CSS3 Top10

CSS3 속성 Top10Toby

2011.02.19

Toby

잠깐, 벤더 프리픽스를먼저 알아봅시다이걸 알아야 얘기가 되지

• 각 벤더(브라우저 개발사)에서 새로운 기능추가를시범 적용하기 위해 사용하는 방식입니다.

• 벤더 프리픽스는 hack이 아닙니다

Safari, Chrome

Firefox

Opera

Internet Explorer

-webkit-

-moz-

-o-

-ms-

벤더 프리픽스 (Vendor prefix)

w\idth: 10px 이나 _width: 10px 같은 근본없는 코드와는 다릅니다.

벤더 프리픽스 적용 예시

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

prefix를 사용한 코드를 먼저 적고, 없는 겂을 마지막에 적습니다.

CSS는 중복선언된 속성은 나중의 겂을 우선으로 적용합니다.

순서를 지켜 작성할 경우, 미래에 해당 속성이 표준이 되면

각 벤더의 방식이 아닌 표준방식으로 적용 될 수 있게 됩니다.

그럼 본격적으로Top10을 뽑아봅시다내가 젤 많이 쓰는걸루

1. border-radius

이젠 뚜껑 따지 맙시다

1. border-radius

border: 1px solid #FFF;-moz-border-radius: 5px;-webkit-border-radius: 5px;-o-border-radius: 5px;border-radius: 5px;

* Opera는 벤더 프리픽스 지원을 다른 브라우저보다 빠르게 중단합니다

2. RGBA (HSLA)

투명한 글씨, 투명한 배경색, 투명한 그림자…

2. RGBA (HSLA)

color: #82B4FF;color: rgb(130,180,255);color: rgba(130,180,255,.5);

R AlphaG B

R G B

Alpha 값은 50%를0.5 또는 .5로 적습니다.

3. text-shadow

그림자, 이제는 넣을 수 있다

3. text-shadow

text-shadow: 1px 1px 2px rgba(0,0,0,.5);

X colorY blur

text-shadow는 이미 벤더프리픽스를쓰지 않는 단계에 와 있습니다.

4. box-shadow

박스에 그림자를 주는 가장 쉬운 방법

4. box-shadow

-moz-box-shadow: 2px 2px 0 #FFF;-webkit-box-shadow: 2px 2px 0 #FFF;box-shadow: 2px 2px 0 #FFF;

X colorY blur

5. 슈도 클래스 (pseudo class)

임시 속성을 부여하는 방법입니다.의사 클래스라고 번역하기도 합니다.

:active


a:link {color:#F00;} /* unvisited link */a:visited {color:#0F0;} /* visited link */a:hover {color:#F0F;} /* mouse over link */a:active {color:#00F;} /* selected link */

love & hate의 순서로 작성합니다


:active - Click시 발동

:hover - Mouse Over시 발동

:focus - Focus in시 발동

슈도클래스는 CSS3는 아니지맊,그 동안 IE6에서 동작이 제한적이어서 잘 사용되지 않았습니다.

앞으로는 위의 코드를 맋이 쓰게 될 겁니다

6. New Selectors

• 자식선택자

• 인접형제선택자

• 첫째셋째막내

• 속성선택

• 책갈피 사용시에발동

• 그외기타등등

7. Transition

개체에 젂환 효과를 부여합니다.플래시의 모션 트위닝과 유사합니다.

7. Transition

a.btn {padding: 5px 10px;background: #000;-webkit-transition: All 1s ease;-moz-transition: All 1s ease;-o-transition: All 1s ease;

}a.btn:hover {

background: #FFF;}

마우스 오버시 배경색이 검정에서 흰색으로 변합니다.1초가 걸립니다.

8. Transform

개체를 형태변형 시킵니다.포토샵의 Transform과 유사합니다.

8. Transform

-webkit-transform: rotate(90deg) scale(1) skew(1deg) translate(10px);-moz-transform: rotate(90deg) scale(1) skew(1deg) translate(10px);-o-transform: rotate(90deg) scale(1) skew(1deg) translate(10px);

회젂, 확대/축소, 비틀기, 이동시키기…

9. Multi-background

마크업을 추가하지 않고도여러 개의 배경을 깔 수 있습니다

background: url(“a.png") repeat-x bottom,url(“b.png") no-repeat bottom right,url(“c.png");

, 쉼표맊 붙이면 됩니다

9. Multi-background

10. Border-image

가변 사이즈를 처리하기에 유용합니다

10. Border-image

작은 이미지를 repeat/stretch 하여 사용합니다

border-width:15px;

-moz-border-image:url(border.png)

30 30 round;

-webkit-border-

image:url(border.png) 30 30 round;

Thank you

CSS3 Top10

Technology