[CSS3] 새로운 스타일

CSS 는 Cascading Style Sheets 의 약자로 글자체, 줄간격, 배경색, 위치 지정과 같은 웹 페이지의 전반적인 스타일을 지정하는데 이용되는 문법 규칙이다

엄밀히 말하자면 HTML과 CSS는 그 역할이 서로 다르다고 할 수 있다
그러나 HTML 의 차세대 버전인 HTML5 제안과 함께 CSS3라는 이름으로 새로운 스타일도 개발되고 있다. 즉 HTML5 와 CSS3 둘 다 차세대 웹 개발을 위한 새로운 표준인 것이다
그래서 HTML5를 다루는 많은 자료들에서 이 둘을 같이 설명하는 경우가 많다

어쨋든 CSS3 는 웹 개발자 보다는 웹 퍼블리셔 혹은 코더라고 불리우는 직군에 더 친숙한 언어이다
(뭐.. 이 역할이 명확히 구분되지 않는 경우도 있지만...)

나 역시 개발자라써, 디자인 영역에 더 가까운 스타일을 다루는 데는 익숙하지 않으며 직접적인 영향을 받지 않는 기술이긴 하지만 흥미로운 몇 가지 CSS3 기능을 알아 둬서 나쁠 건 없어 보인다

이 글에서는 CSS3의 새로운 기능 중 일부를 소개하고자 한다

다중 컬럼 레이아웃(Multiple column layout)
CSS3 의 새 스타일 중 제일 처음 눈에 띄는 것이었다
다중 컬럼 레이아웃 스타일을 사용하면 다수의 컬럼(세로단)에 텍스트를 배치 할 수 있어 마치 신문과 같은 레이아웃을 구성할 수 있다

다중 컬럼 레이아웃의 가장 기본적인 적용법은 컬럼 갯수를 정의하는 것이다
컬럼 갯수 정의는 column-count, column-width 두 가지 중 하나의 방식을 이용할 수 있다

column-count : 컬럼의 갯수를 직접적으로 지정한다. 직관적으로 수를 지정할 수 있어 주로 사용된다
                      컬럼의 너비는 컬럼 갯수를 기반으로 (사용 가능한 공간에 따라)자동으로 결정된다
column-width : 각 컬럼의 너비를 지정함으로써 컬럼의 갯수는 자동으로 결정되도록 한다

그리고 컬럼의 레이아웃을 좀 더 세밀하게 조정할 수 있다
column-gap : 컬럼 간 띄워질 공간을 지정한다
column-rule : 컬럼 구분 막대의 Border Style(두께, 색상 등)을 지정한다

브라우저에 따른 구현 규칙
현재 다중 컬럼 레이아웃은 Mozilla 와 WebKit 브라우저에서만 지원된다. 즉 파이어폭스, 크롬, 사파리에서 지원된다. 다중 컬럼 레이아웃을 위한 특성은 각 브라우저의 접두사를 같이 사용해야 하는데 이는 스펙이 완료되기 전에 임시 특성을 이용하는 것이다. 스펙이 완성되면 접두사 없이 특성이름만으로도 적용가능하게 될 것이다

웹킷 브라우저 임시 특성 예: -webkit-column-count
모질라 브라우저 임시 특성 예: -moz-column-count

보통 다중 컬럼 레이아웃을 지정할 때 모질라, 웹킷, 그리고 표준 모두를 다 적용해 두는 것이 좋다
이제 다중 컬럼 레이아웃을 지정한 예를 보도록 하자
뉴스를 div로 감싸고 div에 다중컬럼레이아웃을 적용한다. 웹킷 및 모질라 모두 구현하였으며 향후 표준 완성을 위해 접두어을 뺀 특성도 정의해 두었다. 이렇게 하는 것이 좋은 습관이다

<div id="news">
교육과학기술부와 한국장학재단이 7일 학자금 대출 제한대학을 발표했다. 전국
......
</div>

<style>
  #news {
    #-webkit-column-width : 130px;
    -webkit-column-count: 3;
    -webkit-column-rule: 2px solid blue;
    -webkit-column-gap: 2em;                       
   
    -moz-column-count: 3;
    -moz-column-rule: 2px solid blue;
    -moz-column-gap: 2em;
   
    column-count: 3;
    column-rule: 2px solid blue;
    column-gap: 2em;
  }         
</style> 

실행 화면(크롬)

참고>
http://www.quirksmode.org/css/multicolumn.html
http://designshack.co.uk/articles/introduction-to-css3-part-5-multiple-columns


다양한 텍스트 효과
웹 페이지의 텍스트에 다양한 효과를 줄 수 있어 기존 이미지로 표현해야 했던 것을 간단한 스타일로 대신할 수 있다

Text-Stroke
웹킷 기반 브라우저에서 텍스트 윤곽에 대한 스타일을 지정할 수 있다
Stroke 의 두께와 색상을 지정할 수 있다

<style>
  div {
    font-size: 50px;  
    -webkit-text-fill-color: black;
    -webkit-text-stroke: 1.5px red;          
  }         
</style>

참고> http://www.quirksmode.org/css/stroke.html

Text-Shadow
텍스트에 그림자 효과를 줄 수 있다. 현재 IE를 제외한 사파리, 크롬, 파이어폭스, 오페라에서 모두 지원 된다. 그림자의 색상, 수평위치, 수직위치, 그림자 선명도를 지정할 수 있다
text-shadow: 색상 수평위치 수직위치 선명도

<style>
  div {
    font-size:30px;
    text-shadow: rgba(64, 64, 64, 0.5) 10px 5px 2px;
  }     
</style>

참고> http://www.quirksmode.org/css/textshadow.html


Text-Overflow
텍스트 랩핑(Wrapping)과 관련되는 스타일이다
영역을 벗어나는 텍스트를 오버플러된 텍스트라 하는데 이렇게 오버플러된 텍스트를 '생략 부호(…)' 로 처리할 수 있도록 한다. 현재 IE 6 이상, 크롬, 사파리에서 지원된다

아래 그림을 보면 텍스트 길이가 div 사각영역을 벗어 나고 있다(텍스트가 오버플러 되었다)
이 그림은 텍스트 랩핑을 하지 않았을 때(white-space: nowrap)의 모습이다

그리고 텍스트 랩핑을 하면 아래와 같다(white-space: wrap)

이렇게 오버플로된 텍스트는 보기 싫기 때문에 보통 overflow: hidden 으로 영역을 넘어가는 텍스트를 숨기도록 처리한다. 이렇게 하면 보기 싫게 벗어난 텍스트를 숨길 수 있다

하지만 가장 적합한 선택은 Text-Overflow 의 생략기호(...)를 사용하는 것이다
text-overflow: ellipsis 로 처리하면 아래 그림과 같이 숨겨진 텍스트는 생략기호(...)으로 대체되어
보기 싫지도 않으며 사용자에게 추가 텍스트가 있다는 의미를 직관적으로 알리 수 있다

<div>
  CSS3 텍스트 효과, 텍스트 오버플러
</div>
.....
<style>
  div {   
    padding: 10px 10px;  
    border: 1px solid #000000;           
    height: 1.1em;    
    overflow: hidden; 
    white-space: nowrap;     
    width:20%;
    text-overflow: ellipsis;   
  }     
</style>

참고> http://www.quirksmode.org/css/textoverflow.html


Opacity
텍스트의 투명도를 조절할 수 있다. IE를 제외한 파이어폭스,크롬,사파리,오페라에서 모두 지원한다
(IE이 경우 filter 로 유사한 효과를 줄 수 있다)
투명도는 0.0 ~ 1.0 사이의 값을 가진다. 0(완전 투명) ~ 1(완전 불투명)

코드에서는 opacity 와 더불어 IE8과 IE5~7을 위한 각각의 필터 특성도 정의 해 두었다

<div>
  CSS3 텍스트 효과, 투명도 조절
</div>
<div id="op">
  CSS3 텍스트 효과, 투명도 조절
</div>
.....
<style>
  div{
    font-size: 30px;
    font-weight: bold;
    color: blue;
  } 
  #op{       
    opacity: 0.2;
    filter: alpha(opacity=20);
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  }     
</style>

참고> http://www.quirksmode.org/css/opacity.html


다양한 테두리 및 백그라운드 효과
테두리와 백그라운드에 다양한 스타일을 적용할 수 있다
이전에 이미지로 가능했던 많은 부분이 간단한 스타일 적용으로 가능하게 된 것이다

Border-Radius
테두리의 각을 조절할 수 있다. 테두리의 양 끝의 각을 0 ~ 50 px까지 조절하여 모서리의 각을 조절한다. IE 9 이전 버전을 제외한 파이어폭스, 크롬, 사파리, 오페라에세 지원된다

<style>
  div{
    font-size: 20px;
    padding: 20px 20px;
    text-align: center;
    border: 1px solid #bbb;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
  }      
</style>

참고> http://www.quirksmode.org/css/borderradius.html


Box-Shadow
텍스트 뿐만 아니라 테두리에도 그림자 효과를 줄 수 있다
IE9 이전과 오페라를 제외한 파이어폭스, 사파리, 크롬에서 지원된다
box-shadow: 수평위치 수직위치 선명도 색상

<style>
  div{
    border: 1px solid black;
   padding: 10px;
   -webkit-box-shadow: 10px 10px 5px gray;
   -moz-box-shadow: 10px 10px 5px gray;
  }      
</style>

참고> http://www.quirksmode.org/css/boxshadow.html

Gradient
백그라운드에 그라디에이션 효과를 줄 수 있다. 직선 형태(linear) 효과 또는 방사형 형태(radial) 효과를 줄 수 있다. 파이어폭스, 사파리, 크롬에서 지원된다. IE의 경우 filter 로 유사한 효과를 줄 수 있다

<style>
  div{
    border: 1px solid black;
   padding: 10px;
   background: -webkit-gradient(linear, left bottom, right top, from(orange), to(white));  
   background: -moz-linear-gradient(left,  orange,  white);
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='orange', endColorstr='white');
  }      
</style>

참고> http://www.quirksmode.org/css/gradient.html

Border-Image
테두리에도 이미지를 깔 수 있게 되었다. 웹킷 기반인 사파리, 크롬과 파이어폭스(-moz-)에서 지원된다

<style>
  div{     
    width:15em;
    height:2em;
    -webkit-border-image: url(mk.gif) 50 25 50 25 repeat stretch;
    -moz-border-image: url(mk.gif) 50 25 50 25 repeat stretch;  
    border: solid 25px #f00;   
  }      
</style>

참고> http://css-infos.net/property/border-image
         http://www.css3.info/preview/border-image/

Multiple Background Images
다중 이미지 백그라운드가 가능하다. 즉 백그라운드에 둘 이상의 이미지를 깔 수 있다
이미지의 위치를 조절하여 여러개의 백그라운드 이미지를 처리할 수 있다
IE8 이전 버전을 제외하고 모두 지원된다

두개의 이미지를 백그라운드에 깔고 수직 반복처리 및 각 이미지의 위치를 좌상단,우상단으로 하였다

<style>
  div{
    border: 1px solid black;   
    width: 20em;
    height: 30em;  
    background-image: url(son1.jpg), url(son3.bmp);
    background-repeat: repeat-y;
    background-position: top left, top right;     
  }      
</style>

참고> http://www.quirksmode.org/css/background.html#multiple


Background-Size
백그라운드에 깔린 이미지의 사이징을 조절 할 수 있다
div 나 textarea의 크기가 변경될 때 백그라운드가 어떻게 반응해야 하는지를 결정할 수 있다
IE8 이전 버전을 제외한 크롬, 사파리, 파이어폭스(-moz), 오페라에서 지원된다
background-size 의 값으로는 다음 중 하나로 지정할 수 있다

- 기본 값(auto): 원본 이미지 크기 그대로 표시된다, background-size: auto;
- 가로,세로 길이 지정: 지정된 크기로 이미지가 조정 된다, background-size: 250px 20px;
- 퍼센트 지정: 개체의 크기가 변경될 때 같은 비율로 확대/축소 된다, background-size: 50% 70%   
- contain: 개체의 가로,세로 크기에 맞춰 이미지 사이즈가 변경된다
                개체의 가로,세로의 같은 변화에만 반응한다
                (ex: 가로만 늘리면 이미지 크기는 확대 되지 않음)

- cover: contain과 유사히지만 개체의 한 방향(가로 혹은 세로) 크기 변화에도 이미지가 조절된다
          (ex: 가로만 늘리면 이미지의 크기도 같이 확대 된다)

아래의 코드로 브라우저에서 직접 테스트 해 보기 바란다
참고로 div 에 resize를 가능하도록 하여 div의 크기를 사용자가 확대 할 수 있도록 하였다
(resize 는 사파리, 크롬에서만 지원된다

<style>
  div{   
    border: 1px solid black;   
    width: 12em;
    height: 17em;  
    background: url(son1.jpg) center center no-repeat;
    background-size: contain;
    resize: both;
    overflow: auto;    
  }      
</style>

참고> http://www.quirksmode.org/css/background.html#size

Box-Reflect
웹 페이지에 표시되는 개체에 대한 반사 효과를 줄 수 있다. 이 특성은 비단 테두리 및 백그라운드에 국한된 것이 아니라 텍스트, 테이블, 이미지, 비디오 등 웹 페이지에 표현되는 모든 개체가 대상이 된다.
웹킷 기반 브라우저인 사파리, 크롬에서 지원된다

-webkit-box-reflect: direction offset mask-box-image;

<style>
img{
  -webkit-box-reflect: below 4px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.0, transparent), to(white)); 
  -webkit-border-radius: 30px;
   #border-radius: 3px;
   #border: 3px solid #777;        
}
</style>

참고> http://css-infos.net/property/-webkit-box-reflect

CSS3의 새로운 스타일을 적용하면 다양한 효과와 스타일을 줄 수 있어 웹 페이지를 보다 쉽고 편하게 스타일링 할 수 있게 되었다. 특히 UI를 개발하는 사람은 더욱 관심있게 봐야할 주제이다
CSS3와 관련된 더 자세하고 추가된 학습은 아래의 사이트를 확인하기 바란다
http://www.quirksmode.org/css/contents.html
http://css-infos.net/
http://www.css3.info/preview/