Niquelao » 웹로그 아카이브 » CSS 3로 여러 배경 이미지 사용하기

» 웹로그 아카이브 » CSS 3로 여러 개의 배경 이미지 사용하기 Niquelao CSS 3로 여러 개의 배경 이미지 사용하기 2009년 11월 25일, Rumoroso 작성 CSS 3가 도입한 새로운 기능 중 하나는(개인적으로 반가운 기능인데) 하나의 요소에 여러 개의 배경 이미지를 넣을 수 있다는 점입니다( http://www.w3.org/TR/css3-background/#layering ). 지금까지 배경으로 두 개 이상의 이미지를 조합하고 싶다면, 페이지에 있는 여러 요소를 활용해 각각에 배경을 적용하여 원하는 결과를 얻는 방법밖에 없었습니다. 심지어 때로는 추가 마크업을 사용하기도 했는데, 이는 오로지 표현 목적으로 마크업을 추가하여 웹의 품질을 떨어뜨리는 일이었습니다. 하지만 이제 상황이 바뀝니다… CSS 3 덕분에 두 개 이상의 배경 이미지를 사용하려면 background-image: 속성에 각 이미지의 경로를 쉼표로 구분하여 추가하면 됩니다. 예를 들어: background-image: url(‘fondo1.png’), url(‘fondo2.png’) 이렇게 간단한 것만으로 적용하는 요소에 두 이미지를 배경으로 지정할 수 있습니다. 물론 여기서부터 새로운 의문이 생깁니다… 서로 겹쳐지나요? 각각 다른 위치에 배치할 수 있나요? 하나는 한 축으로 반복하고 다른 하나는 반복하지 않게 할 수 있나요? … …그리고 모든 답은 YES 입니다. 겹침과 관련해서는, 먼저 선언된 이미지가 사용자에게 가장 가까이 배치됩니다 . 그다음 그 뒤에 다음 이미지가 배치되고(화면에 수직인 축으로), 그다음 이미지가 그 뒤에, 이런 식으로 마지막 이미지까지 이어지며, 마지막 이미지가 모든 이미지 뒤에 위치합니다. 마치 각 이미지가 하나의 레이어 에 놓이는 것과 같습니다. 또한 배경색을 선언하면, 이 색은 사용된 모든 이미지 뒤에 배치됩니다. 나머지 의문들에 대해서는 일반화된 답변을 드릴 수 있습니다. 왜냐하면 이 모든 의문은 우리가 일상적으로 사용하는 속성들, 즉 배경 이미지의 위치( background-position ), 스크롤 시 동작( background-attachment ), 반복( background-repeat )을 생각하면서 생겨난 것이기 때문입니다. 각 이미지에 특정 값을 지정하고 싶다면, 이미지를 선언할 때처럼 값을 연속으로 쉼표로 구분하여 선언하면 됩니다. 예를 들어: background-image: url(‘fondo1.png’), url(‘fondo2.png’), url(‘fondo3.png’); background-position: 0 0, 150px 200px, left center; background-repeat: no-repeat, repeat-x, no-repeat; 이렇게 하면 세 개의 이미지를 배경으로 선언하며, 첫 번째는 왼쪽 상단에, 두 번째는 오른쪽으로 150px, 아래로 200px 이동하고, 세 번째는 역시 왼쪽에 수직으로 중앙에 배치됩니다. 반복과 관련해서는 첫 번째와 마지막은 반복되지 않고, 두 번째는 가로 축으로 반복됩니다. 하지만 여기서 끝이 아닙니다. 코드를 최적화하기 좋아하는 분들을 위해(우리 모두 그래야 하지만), 일부 선언은 축약할 수 있습니다: background-position: 0 0, 150px 200px, left center; 는 다음과 같이 됩니다: background-position: 0 0, 150px 200px, left; center 라는 단어가 제거됩니다. 우리 모두 알다시피(또는 알아야 하듯이), 배경 위치 값 중 하나를 선언하지 않으면 기본값으로 중앙( center )이 적용되는데, 이 경우 수직 방향입니다. background-repeat: no-repeat, repeat-x, no-repeat; 는 다음과 같이 됩니다: background-repeat: no-repeat, repeat-x; 세 번째 값은 제거할 수 있습니다. 그 이유는 값이 부족할 때 이미 선언된 값 목록이 이미지당 하나씩 가질 때까지 반복되기 때문입니다(그래서 값 목록이 다시 시작되면 첫 번째가 no-repeat 입니다). 하지만 shorthand 속성인 background: 를 활용하면 더 최적화할 수 있습니다: background: url(‘fondo1.png’) 0 0 no-repeat, url(‘fondo2.png’) 150px 200px repeat-x, url(‘fondo3.png’) left no-repeat; 보시다시피, 이 모든 것이 우리 디자인에 가능성의 폭을 넓혀줍니다. 일부 브라우저는 현재 버전에서 여러 개의 배경 이미지 지원을 시작하고 있습니다. 그중에는 Firefox (버전 3.6부터), Chrome , Safari , Konqueror 가 있습니다. 이 중 하나를 사용하고 있다면, 제가 준비한 예제 에서 결과를 볼 수 있습니다. 유감스럽게도 아직 Internet Explorer (향후 버전 9에 포함될지는 두고 봐야 합니다)와 Opera 에서는 지원되지 않습니다. 아래에 지원되는 경우 예제에서 보이는 화면 캡처를 첨부합니다(지원되지 않는 브라우저로 접속하면 점선 테두리만 보입니다): 앞서 언급한 것 외에도, CSS 3는 언급된 일부 속성에 새로운 값을 포함하며, 또한 우리 디자인에 큰 유연성을 줄 새로운 속성들도 포함합니다. 다음 글에서 자세히 다루겠습니다. 맛보기로 background-size 를 언급하겠습니다… 네, 생각하시는 그겁니다! 참고: 글의 기술적인 내용 외에 가장 눈길을 끄는 것은 사진 속 케이크 라고 생각합니다. 여러분을 조금 부럽게 해드리자면, 사진은 제가 찍었고 Dolores가 만들어준 과일 케이크입니다… 그녀가 프레젠테이션을 제어하는 주제를 잘 다룬다는 것은 분명하지만, 콘텐츠 관리도 잘한다고 보장합니다. 정말 맛있었거든요… CSS 3로 여러 개의 배경 이미지 사용하기 카테고리: CSS —> 댓글 4개 CSS 3로 여러 개의 배경 이미지 사용하기 2009년 11월 26일 […] 이제 상황이 바뀝니다… CSS 3로 여러 개의 배경 이미지 사용하기 […] Niquelao » 웹로그 아카이브 » CSS3로 여러 개의 배경 이미지 사용하기를 언급한 트윗 — Topsy.com 2009년 11월 27일 […] 이 글은 Jorge Rumoroso, Juanjo Fernández가 트위터에서 언급했습니다. Juanjo Fernández가 말했습니다: RT @rumoroso: #niquelao CSS 3로 여러 개의 배경 이미지 사용하기 http://bit.ly/4YqcJ2 #CSS3 […] Niquelao » 웹로그 아카이브 » CSS 3: 배경 속성 2009년 12월 2일 […] 최신 버전의 브라우저에서 지원됩니다(제가 “CSS 3로 여러 개의 배경 이미지 사용하기”라는 글에서 이미 언급했듯이). 일부 경우에는 실험적으로 포함되기도 합니다(예를 들어 Firefox에서는 접두사를 통해 […] Niquelao » 웹로그 아카이브 » CSS 3 더 알아보기: background-origin과 background-clip 2009년 12월 13일 […] 다른 글에서 이미 설명했듯이, CSS 3를 사용하면 하나 이상의 배경 이미지를 포함할 수 있습니다. background-origin과 background-clip 속성은 각각에 대해 하나의 값을 포함할 수 있습니다 […] RSS 2.0 피드 를 통해 댓글을 팔로우할 수 있습니다. 또한 사이트에서 트랙백을 보낼 수 있습니다. 이전 글: CSS 강좌에 또 다른 스타일 더하기 다음 글: CSS 3: 배경 속성 —> —> —> 이 저작물은 Creative Commons 라이선스 에 따라 이용할 수 있습니다 .

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.