CSS3의 5가지 특징과 사용 방법

이번에는 CSS3의 5가지 특징을 알아보고 현재 진행중인 웹사이트와 디자인에 적용해보자.

1. Border Radius

가장 큰 일반적인 CSS3특징으로 사용되어지는것은 border-radius이다.
일반적인 HTML 블록 엘레멘트들은 90각도로 되어진 사각형이다. 하지만
CSS3 스타일 규칙은 라운드형태가 되도록 설정을 허용한다.

-moz-border-radius: 20px;   
-webkit-border-radius: 20px;   
border-radius: 20px;  

moz- and -webkit문법은 약간씩 다르지만 border-radius는 목표인 각각의 코너들에 사용되어 진다.
-moz-border-radius-topleft: 20px;   
-moz-border-radius-topright: 20px;   
-moz-border-radius-bottomleft: 10px;   
-moz-border-radius-bottomright: 10px;   
-webkit-border-top-right-radius: 20px;   
-webkit-border-top-left-radius: 20px;   
-webkit-border-bottom-left-radius: 10px;   
-webkit-border-bottom-right-radius: 10px;  
위의 내용은 Firefox, Safari and Chrome에서 지원된다.


http://twitter.com에서 사용되어졌다.


참고자료
W3C Working Draft (http://www.w3.org/TR/css3-background/#the-border-radius)
Border-radius on CSS3.info (http://www.css3.info/preview/rounded-border/)
The Art of Web (http://www.css3.info/preview/rounded-border/)


2. Border Image

Border-images는 객체의 border로 사용되어지는 곳을 image사용을 가능하게한다.
이미지는 객체의 각 사이드와 인접한 부분에 만들어진다.
이미지의 각 사이드 부분은 HTML객체의 모서리 부분과 일치한다.
다음과 같은 문법으로 실행되어 진다.
 border: 5px solid #cccccc;   
-webkit-border-image: url(/images/border-image.png) 5 repeat;   
-moz-border-image: url(/images/border-image.png) 5 repeat;   
border-image: url(/images/border-image.png) 5 repeat;  

{ border:5px }속성은 보더 너비값의 전부이다. 그리고 각 border-images규칙은 border의 5px부분을
채우고 몇개의 이미지들을 사용하는것을 말한다.
Border-image는 한 사이등 기본적으로 정의할 수 있고, 네개의 코너만큼 각각의 사이마다 이미지들을
다르게 적용시키는것을 가능하게한다.

border-bottom-right-image   
border-bottom-image   
border-bottom-left-image   
border-left-image   
   border-top-left-image   
   border-top-image   
   border-top-right-image   
   border-right-image  

Supported in Firefox 3.1, Safari and Chrome.

http://www.blog.spoongraphics.co.uk/에서 사용되어 졌다.

참고자료
W3C Working Draft (http://www.w3.org/TR/2002/WD-css3-border-20021107/#the-border-image-uri)
Border-image on CSS3.info (http://www.css3.info/preview/border-image/)
Border-image in Firefox  (http://ejohn.org/blog/border-image-in-firefox/)

3.Box Shadow and Text Shadow

Drop shadows : drop shadow를 만드는데 있어서 포토샵은 필요하지 않다. CSS3면 할 수 있다.
좋은예제는 24 Ways website(http://24ways.org/)에서 볼 수 있다.

-webkit-box-shadow: 10px 10px 25px #ccc;   
-moz-box-shadow: 10px 10px 25px #ccc;   
box-shadow: 10px 10px 25px #ccc;  

첫번째 두가지 속성은 엘레멘트와 연관된 그림자의 offset을 결정한다.
세번째 속성은 shadow의 흐릿함의 정도를 설정한다.
마지막은 shadow의 색을 설정한다.
text-shadow속성은 원문문장을 사용하는데 유용하다.
text-shadow: 2px 2px 5px #ccc;  

Supported in Firefox 3.1, Safari, Chrome (box-shadow only) and Opera (text-shadow only).


24 Ways website(http://24ways.org/)에서 사용되어 졌다.

참고자료

W3C Working Draft (http://www.w3.org/TR/css3-background/#the-box-shadow)
Box-shadow on CSS3.info (http://www.css3.info/preview/box-shadow/)
W3C Working Draft (http://www.w3.org/TR/2003/CR-css3-text-20030514/#text-shadows)
Text-shadow on CSS3.info (http://www.css3.info/preview/text-shadow/)

4.Easy Transparency with RGBA and Opacity

웹디자인에서 PNG 파일을 사용하는 것은 투명한 디자인 특징의 핵심이다.
alpha값 또는 opacity 규칙을 css에서 직접적으로 정의 할 수 있다.

rgba(200, 54, 54, 0.5);   
/* example: */  
background: rgba(200, 54, 54, 0.5);   
/* or */  
color: rgba(200, 54, 54, 0.5);  

첫번째 세 값은 빨강, 초록, 파란색이다. 그리고 마지막 값은 alpha값(투명한 효과를 생성한다)
으로 간주된다.

opacity규칙은 대신에 색을 일반적으로 정의한다. opacity값은 분리된 규칙으로 설정한다.
color: #000;   
opacity: 0.5;  

Supported in Firefox, Safari, Chrome, Opera (opacity) and IE7 (opacity, with fixes).

24 Ways website(RGBA)(http://24ways.org/)에서 사용되어 졌다.

참고자료
W3C Working Draft (http://www.w3.org/TR/css3-color/#rgba-color)
RGBA on CSS3.info (http://www.css3.info/preview/rgba/)
Pure CSS Opacity (http://www.stevenyork.com/tutorial/pure_css_opacity_and_how_to_have_opaque_children)

5.Custom Web Fonts with @Font-Face

일반적인 폰트들의 설정은 웹에서 사용되어 진다(알려진것으로는 Arial, Helvetica, verdana, georgia,
comic sans(ahem) 등등 현재 @font-face css3규칙은 특별한 텍스트의 사용을 가능하게한다.
그러나 이것은 저작권 문제를 일으킬 수 있다. 그래서 @font-face내장 속성을 이용하여 특별한 fonts들을
다룰 수 있다.

@font-face {   
font-family:'Anivers';   
src: url('/images/Anivers.otf') format('opentype');   
}  

두번째 옵션을 포함하여 font-family의 사용은 일반적으로 사용되어 진다.
h1 { font-family: ‘Anivers’, Helvetica, Sans-Serif;  

Supported in Firefox 3.1, Safari, Opera 10 and IE7

TapTapTap(http://www.taptaptap.com/)에서 사용되어 졌다.

참고자료
Fonts available for font-face embedding (http://www.webfonts.info/wiki/index.php?title=Fonts_available_for_%40font-face_embedding)
Font-face in IE, making Web fonts work (http://jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work)
Web fonts, the next big thing - A List Apart (http://www.alistapart.com/articles/cssatten)


CSS3로 개발함에도 불구하고 리스트되어진 규칙들은 현재 몇몇 브라우져에서만 지원하고 있다.
Safari는 이러한 새로운 특징들을 광범위하게 지원하고있다. 불행하게도, (상위의브라우져들임에도 불구하고)
Safari와 친밀한 사용자들은 적다. 반대인 그룹의 사용자들을 위해서 추가확장특징은 가치가 없다.
그러나 apple은 그들의 방법을 만들고 Safari사용자들은 계속적으로 증가하고 있다.

반면 Firefox는 기본적인 사용자들을 많이 가지고 있다. FF3.1이상부터는 CSS3특징들을 추가적으로 지원을 하고 있다.
대부분 FF사용자들의 추측은 FF브라우져가 업데이트 될것이고 사용자 그룹들은 이러한 새로운 규칙들을 지원할 것이라고
믿고 있다.

Google Chrome은 작년에 공개하였고 WebKit Engine을 탑재하고 있다. 크롬은 Safari와 같은 지원을 하고 있다.
Safari가 Mac 사용자들에 의해 좋은 위치를 잡는 동안 크롬은 폭발적인 유저층을 가지게되었다.

비율로 보면(W3's Browser statistics - http://www.w3schools.com/browsers/browsers_stats.asp)는(2008년 11월조사)
W3School의 사용자들 44.2%가 파이어폭스, 3.1%구글 크롬, 2.7%사파리를 사용한다고 말했다.
50%의 대다수 인터넷 유저들이 이러한 특징을 보여주고 있다.
웹디자인 커뮤니티에서는 더욱 더 개념적인 브라우져들을 택하고 있다. CSS3지원하는 사용자들의 비율은 더 높아져 73.6%에 달한다.

위 내용은 Blog.SpoonGraphics(http://www.blog.spoongraphics.co.uk/)에서 참고했다.

6.The downside(또다른 면)
당신은 새로운 디자인을 적용해보고자하는 상상을 하고 있을것이다. 하지만 몇가지 부정적인 면을 고려하여야 한다.
- Internet Explorer : 인터넷 유저중 46%는 이러한 특징을 볼 수 없다. 디자인의 가장 중요한 특징을 그들은 볼 수 없을
수도 있다. 이런 해결 방법은 CSS3의 특징을 두번째 옵션으로 생각해야한다.

IE는 @font-face를 지원한다. (http://jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work)

- Style Sheets의 오류
이러한 CSS3의 특징은 최종 명세서로서 추가되지 못했다. CSS3는 다양한 브라우져들의 태그에서 실행되어졌다.
이것은 당신의 style sheet를 쓸모없게 만들 수 있다.

- CSS markup의 확장성
마지막 견해에 따르면 각각의 브라우져들을 같은 규칙들로 명세하여 다양한 태그들을 지원하고 있다.
CSS의 마최종 명세로서의 표준규칙을 포함하고 있다. CSS Markup의 추가적인 코드들을  포함하고 있다.

- 잠재적인 좋지 않은 습관
전통적인 포토샵으로 작업을 완료하고 이것들을 통하여 새로운 스타일 특징의 사용은 몇몇 왜곡된 디자인들의 결과이다.
Drop Shadows와 같은 것들을 우리에게 경고를 하고 있다.

-참고 자료
http://www.smashingmagazine.com/2009/01/08/push-your-web-design-into-the-future-with-css3/
http://html5gallery.com/

덧글

[최동호]

css3 잘 긁어 간다 ㅋㅋㅋㅋㅋㅋ