쏭군은 열정 드리머

아마도 앞으로는 디자인을 모듈화 하는 작업이 더욱 많아질 것입니다.
그래서 CSS를 통한 박스형 디자인은 자주 쓰이는 업무 중 하나인데요,
아직까지는 CSS를 이용해서 박스를 디자인함에 있어서 불편한 점이 많습니다.
CSS3 에서 새로이 추가되는 프로퍼티들을 보면서 기대되는 것 몇 가지를 소개할까 합니다.

background-size
background의 사이즈를 조절할 수 있는 프로퍼티입니다

div {
        background-image: url(bg.gif);
        background-size: 50%; }

라고 하면 백그라운드 크기를 50% 줄입니다.

div {
       background-image: url(bg.gif);
       background-size: 50px; }

이라고 하면 백그라운드 이미지를 50픽셀로 고정하게 됩니다.

다중 background 도입
하나의 엘리먼트에 여러개의 백그라운드를 사용할 수 있습니다.

div {
       background-image: url(bg1.gif), url(bg2.gif), url(bg3.gif), url(bg4.gif);
       background-position: top left, top right, bottom left ,bottom right; }

이런 방식으로 사용이가능합니다.

div {
      background-image: url(bg1.gif), url(bg2.gif), url(bg3.gif), url(bg.gif) url(bg5.gif);
      background-position: 20% 30%, 10% 40%, 60% 100%, 60%, 70% 80%; }

갯수의 제한도, 포지션 선언 방법도 자유롭습니다.

div {
      background-image: url(bg1.gif), url(bg2.gif);
      background-repeat: no-repeat, repeat;  }

각기 반복을 다르게 설정하여 사이트를 꾸밀 수 있게 됩니다.

border-style 추가


몇 가지 border-style이 추가됩니다. wave 속성이 눈여겨 볼만하네요~

border-image
엘리먼트의 border에 백그라운드를 넣을 수 있게 되었습니다!!


border-radius

border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius, border-top-left-radius, border-radius

기다렸던 속성중에 하나입니다. 박스형 모델을 디자인 할 때, 모서리에 라운드를 넣기 위해서는 필수 불가결하게 background 를 동원하거나 여러겹의 레이어를 겹쳐서 꽁수를 써야했는데요. 이제 그런 불편함은 많이 사라질 것 같습니다.

box-shadow 속성
엘리먼트의 외곽에 그림자 효과를 줄 수 있습니다.

div { border: 1px solid #999; box-shadow: 4px 4px #ccc; }

별 것 아닌 것 같지만, 이 속성 역시 필요없는 이미지 작업을 무척이나 줄여줄 것 같습니다. 또한 여러개의 엘리먼트를 겹치던 테크닉도 사라지겠네요. 너무나 유용할 것 같습니다.


CSS3로 인해서, 정말 다양한 CSS 기법들이 등장할 것 같습니다. 또한 불필요한 이미지 작업도 많이 줄어들 것 같습니다. 기대가 됩니다. 앞으로 더욱 웹페이지의 디자인 기법들이 발달해서 U.I.가 풍성해질 것을 기대하니 무척이나 고무됩니다.

꽤 오래전에 제안된 테크닉들 같은데요, 언제쯤 CSS3 프로젝트가 완료되고, 모든 브라우저에서 CSS3를 표준으로 채용할 날이 올까요 :D

소개하지 못한 많은 것들이 있습니다. 더 좋은 정보는 아래에 이 자료의 출처를 표시해두겠습니다. CSS3를 공부하시는데 참고가 되었으면 좋겠습니다.

출처 : http://www.w3.org/TR/css3-background