하나의 요소에 background 속성으로 위 사진처럼 여러장의 이미지와 색깔이 겹쳐진 것을 만들 수 있을까? 정답을 알아보기 위해 background 속성을 살펴보자.
background 속성은?
색상, 이미지, 원점, 크기, 반복 등 여러 배경 스타일을 하나로 묶은 단축 속성으로, 속성값을 쉼표로 구분하여 배경 레이어를 여러개 지정할 수 있다.
단축 항목
background-colorbackground-imagebackground-positionbackground-sizebackground-repeatbackground-attachmentbackground-clip
위 내용에 명시되어 있듯, background 속성은 ”배경 레이어를 여러개 지정할 수 있다.”
자, 이제 정답은 알았으니 위와 같은 예제를 만들기 전 background의 속성의 특징에 대해 먼저 알아보자.
특징
- box model에서 contents, padding, border 영역을 배경으로 나타낸다.
- border 영역의 색상과 스타일은
border속성으로 지정되기 때문에,border색상이transparent일 때background속성이 비춰짐- 단, 배경이 비춰지긴 하나, background-position의 기준에 포함되지는 않는다.
padding은 항상 투명하므로background속성이 비춰짐- 예제
- 노란색 영역: border
- 초록색 영역: padding
- 파란색 영역: contents
- border 영역의 색상과 스타일은
background속성은 상속되지 않지만,background-color의 기본값인transparent로 인해 기본적으로 부모 상자의 배경이 비춰진다.
- root 요소(html에 배경을 지정하면 전체 영역을 덮을 수 있음 → 하지만,body에 지정하는 것이 좋음
- z-index에 의해 맨 아래 배치된 요소의 배경은 부모 상자의 배경처럼 모두 비춰짐
background 속성으로 여러 레이어 쌓기
background 속성을 여러겹 쌓을 때는 레이어의 개념으로 이해하면 좋다. 쉼표를 기준으로 맨 뒤에서 부터 앞으로 오면서 레이어가 순차적으로 쌓인다.
포토샵을 안다면 포토샵의 레이어를 생각하면 보다 쉽게 이해할 수 있다.
- 레이어 목록에서 가장 위에 작성된 레이어는 화면에서 제일 위쪽에 위치한다.
- 가장 아래에 작성된 레이어는 화면에서 가장 밑에 깔려 다른 레이어들에 의해 가려진다.
그래도 이해가 안된다면, 예제를 통해 살펴보자.
예제
background: url(../../media/examples/firefox-logo.svg) center / 120px no-repeat,
url(../../media/examples/lizard.png) 35%,
linear-gradient(to bottom, #eee, #aaa);예제 코드는 총 3가지의 배경 스타일이 지정되어 겹을 이루고 있으며, 선언된 순서대로 레이어가 쌓이는 형태를 이루고 있다. 코드를 레이어별로 나눠보자.
-
제일 앞에 보이는 속성값: firefox 로고
url(../../media/examples/firefox-logo.svg) center / 120px no-repeat -
다음으로 보이는 속성값: 초록색 도마뱀
url(../../media/examples/lizard.png) 35% -
마지막으로 보이는 속성값: 회색 그라데이션
```css linear-gradient(to bottom, #eee, #aaa) ```
코드를 보이는 순서대로 한 줄씩 나눠보니 레이어 개념이 이해가 됐다. 이번엔 위 코드에서 background-image가 렌더링 되지 않는 사용자에게 보다 나은 환경을 제공하기 위해 background-color를 추가하려 한다. background-color는 background-image가 모두 걷어졌을 때 보여야 한다. #eee 값을 어디에 넣어야 할까?
다시한번, background는 레이어의 개념으로 바라보자.
레이어의 개념으로 바라볼 때, background-image가 모두 걷어졌을 때 드러나는 위치는 마지막 3번의 뒤이다. 하지만, background-image와 background-color는 한 줄의 단축 속성으로 작성할 수 있기 때문에 마지막 3번과 연결해서 작성해주면 된다.
완성
background: url(../../media/examples/firefox-logo.svg) center / 120px no-repeat,
url(../../media/examples/lizard.png) 35%,
#eee linear-gradient(to bottom, #eee, #aaa);- 마지막으로 보이는 속성값: 회색 그라데이션과 가려져 보이지 않는 #eee
```css #eee linear-gradient(to bottom, #eee, #aaa) ```
유의할 점
background-position 값을 지정할 때
값을 하나만 지정했을 때
background-position의 기본값은 x, y좌표 순으로 0% 0%이나, 하나의 값을 지정하고 나머지를 생략하면 나머지 같은 center로 간주 된다.
백분율(%)로 값을 지정했을 때
백분율(%)로 background의 position값을 지정하면 px과 같이 명확한 값을 지정했을 때와 다르게 동작한다.
- px 등 명시적으로 값을 지정했을 때: 배경 영역(content + padding)으로 사용할 수 있는 width와 height를 기준으로 배치됨
- 백분율(%)로 값을 지정했을 때: 배경 영역(content + padding)이 아닌 배경 이미지 고유의 너비와 높이를 기준으로 배치됨
- ex)background-position: 14% 84%이면, background의 가로에서 14%, 세로에서 84% 지점이 배경 영역(content + padding)에서의 가로 14%, 세로 84% 지점에 배치된다.
background가 페이지의 어떠한 정보를 지니고 있을 때
브라우저는 접근성 보조 기술 사용자에게 background의 어떠한 정보도 제공하지 않는다. 특히 스크린 리더의 경우 background의 존재 유무조차 알려주지 않는다. 때문에 background가 어떠한 정보를 지니고 있다면 HTML 문서에서 설명하는 것이 좋다.
참고
