» 웹로그 아카이브 » CSS 3: 배경 속성 Niquelao CSS 3: 배경 속성 2009년 12월 2일, Rumoroso 작성 어제 문득 CSS 3에서 어떤 요소의 배경(시각적 매체에서)을 제어하기 위해 포함할 것으로 예상되는 속성들과 그에 해당하는 값들을 정리해보고 싶어졌다. 그중 몇 가지는 우리가 스타일시트에서 흔히 사용하는 것들과 일치하므로 낯설지 않을 것이다. 나머지는 CSS 전문가들이 확인한 부족한 부분을 보완하기 위해 새로 등장한 속성들이다. 이를 바탕으로 다음과 같은 표를 준비했다: 속성 기본값 % background-attachment [scroll | fixed | local] [ , [scroll | fixed | local] ]* scroll - background-clip [border-box | padding-box] [ , [border-box | padding-box] ]* border-box - background-color transparent - background-image [![]()
| none] [ , [![]()
| none] ]* none - background-origin [border-box | padding-box | content-box] [ , [border-box | padding-box | content-box] ]* padding-box - background-position [ [ [ | | left | center | right ] ] [ [ | | top | center | bottom ] ]? | [ center | [ left | right ] [ | ]? ] || [ center | [ top | bottom ] [ | ]? ] ]* 0% 0% 예 background-repeat [repeat-x | repeat-y | [repeat | space | round | no-repeat] ] [ , repeat-x | repeat-y | [repeat | space | round | no-repeat] ]* repeat - background-size [ [ | | auto ]{1,2} | cover | contain ] [ , [ | | auto ]{1,2} | cover | contain ]* auto 예 …그리고 물론, shorthand 방식: background: [ || || / || || || , ]* || || / || || || || <’background-color’> 일부 속성들은 최신 버전의 브라우저에서 지원되기 시작했으며(앞서 ‘CSS 3로 여러 개의 배경 이미지 사용하기’라는 글에서 언급한 바와 같이), 경우에 따라 실험적으로 포함되기도 한다(예를 들어 Firefox에서는 -moz 접두사를 통해). 참고: 어떤 속성도 상속되지 않는다는 점을 다시 한번 알려드린다. 곧, 이 주제를 완벽하게 마무리하고 배경 속성을 수정함으로써 우리가 무엇을 얻을 수 있는지 명확히 이해하기 위해, 각 속성이 하는 일을 자세히 설명하겠다. CSS 3: 배경 속성 카테고리: CSS —> RSS 2.0 피드를 통해 댓글을 팔로우할 수 있다. 또한 자신의 사이트에서 트랙백을 보낼 수도 있다. 이전 글: CSS 3로 여러 개의 배경 이미지 사용하기 다음 글: Safari나 Chrome을 사용한다면… —> —> —> 이 저작물은 Creative Commons 라이선스에 따라 이용할 수 있다.