티스토리 뷰
색상과 배경을 위한 스타일 핵심 요약
background-color - 배경색을 지정하는 속성
background-image - 배경 이미지를 지정하는 속성
background-repeat - 배경 이미지의 반복 방법을 지정 하는 속성
background-position - 배경 이미지의 위치 지정하는 속성
background-attachment - 배경 이미지의 고정 여부를 지정하는 속성
background-size - 배경 이미지의 크기를 조절
background - 배경을 한꺼번에 지정하는 속성
1. background-color
배경색을 바꾸는 기능으로써 색상을 세밀하게 조절하고 싶으면 16진수 #ffff00 을 사용하고 투명도도 함께 조절하고 싶다면 rgba를 사용하고
그냥 원색을 사용하겠다면 색상의 이름을 사용하면 된다.
글꼴이나 글자 크기는 <body>에서 지정하면 문서 전체에 상속되므로 하위 요소에서 스타일을 수정하지 않는 한 문서 전체에 똑같이 적용 되었다.
하지만 예외적으로 background-color 값은 상속되지 않는다.
예를 들어 body 태그에서 배경을 초록색으로 지정하면 문서에 삽입하는 표나 목록, 기타 요소들에도 문서 배경인 초록색이 그대로 비친다. 하지만 이것은 기본적으로 모든 웹 문서 요소의 배경이 투명하기 때문에 초록색으로 지정한 문서 배경이 그대로 비치는것이지 스타일에 상속된 것은 아니다.
따라서 표나 목록등에서 배경색을 지정하고 싶다면 각 요소에서 직접 background-color로 배경색을 지정해야한다.
background-clip - 배경 적용 범위 조절하기
박스 모델 관점에서 배경 적용 범위를 조절할 수도 있다. 즉 박스 모델의 가장 외곽인 테두리까지 적용할지, 테두리를 빼고 패딩 범위까지 적용할지,
아니면 내용 부분에만 적용할지 선택이 가능하다.
background-clip: border-box | padding-box | content-box
border-box - 박스 모델의 가장 외곽인 테두리까지 적용한다.
padding-box - 박스 모델에서 테두리를 뺀 패딩범위까지 적용한다.
content-box - 박스 모델에서 내용 부분에만 적용한다.
2. background-image - 웹 요소에 배경 이미지 넣기
웹에서 사용 가능한 jpg, gif, png파일를 url 형식으로 사용한다. 문서 전체의 배경 이미지를 지정하려면 body에 지정하고 특정 영역에 배경 이미지를 만들고 싶다면 class선택자나 id선택자로 배경 이미지를 지정하면 된다. 파일 경로는 현재 웹 문서를 기준으로 상대 경로를 지정할 수 있고 http://로 시작하는 절대 경로를 사용할 수도 있다. body { background-image: url('b1g.png'); }
만약 이미지가 채우려는 공간보다 작을 경우 가로와 세로로 반복이 되어 채워진다.
3. background-repeat - 배경 이미지 반복 방법 지정하기
아무것도 하지않으면 가로와 세로가 반복되어 채워지지만 가로만 반복하거나 세로만 반복하며 채울 수도 있다. 아니면 한번만 표시하고 반복x
background-repeat: repeat-x | repeat-y | no-repeat
4. background-size - 배경 이미지 크기 조절하기
background-size: auto | contain | cover | <크기 값> | <백분율>
auto - 원래 배경 이미지 크기만큼 표시(기본값)
contain - 요소 안에 배경 이미지가 다 들어오도록 이미지를 확대/축소 한다.
cover - 배경 이미지로 요소를 모두 덮도록 이미지를 확대/축소한다.
크기 값 - 너비 값과 높이를 지정한다.
백분율 - 들어갈 요소의 크기를 기준으로 백분율 값을 지정한다.
5. background-position - 배경 이미지 위치 조절하기
background-position: <수평위치> <수직위치>;
수평위치: left | center | right | <길이 값> | <백분율>
수직위치: top | center | bottom | <길이 값> | <백분율>
background-origin - 배경 이미지 배치할 기준 조절하기
background-origin: border-box | padding-box | content-box
border-box - 박스모델 가장 외곽인 테두리가 기준
padding-box - 테두리를 뺀 패딩이 기준
content - 내용 부분이 기준
6. background-attachment - 배경이미지 고정하기
지금까지 배운 것으로는 스크롤을 내렸을 때 배경 이미지도 같이 내려간다. 하지만 이 속성을 이용하면 배경 이미지를 고정 시킬 수 있다.
사용 값은 background-attachment: fixed | scroll 로 사용 가능
7. background - 속성 하나로 배경 이미지 제어하기
지금까지 설정한 배경 이미지 관련 속성을 background 라는 하나의 속성으로 줄여 사용 가능하다.
background: url( 'images/bg3.jpg') no-repeat fixed right bottom; 별 다른 속성값을 지정하지 않으면 기본값으로 읽는다.
'front-end > CSS' 카테고리의 다른 글
| CSS 포지셔닝 (0) | 2018.11.13 |
|---|---|
| CSS 레이아웃을 위한 스타일(border,margin,padding등) (0) | 2018.11.13 |
| CSS 목록 스타일(불릿 없애기등) (0) | 2018.11.12 |
| CSS 텍스트 관련 스타일(font, text의 속성들) (0) | 2018.11.11 |
| CSS 기초(태그 선택자, class 선택자, id 선택자) (0) | 2018.11.11 |