1. CSS3 속성 Top10
Toby
2011.02.19

2. Toby

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

4. 벤더 프리픽스 (Vendor prefix)
• 각 벤더(브라우저 개발사)에서 새로운 기능추가를
시범 적용하기 위해 사용하는 방식입니다.
Safari, Chrome -webkit-
Firefox -moz-
Opera -o-
Internet Explorer -ms-
• 벤더 프리픽스는 hack이 아닙니다
width: 10px 이나 _width: 10px 같은 근본없는 코드와는 다릅니다.

5. 벤더 프리픽스 적용 예시
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
prefix를 사용한 코드를 먼저 적고, 없는 겂을 마지막에 적습니다.
CSS는 중복선언된 속성은 나중의 겂을 우선으로 적용합니다.
순서를 지켜 작성할 경우, 미래에 해당 속성이 표준이 되면
각 벤더의 방식이 아닌 표준방식으로 적용 될 수 있게 됩니다.

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

7. 1. border-radius
이젠 뚜껑 따지 맙시다

8. 1. border-radius
border: 1px solid #FFF;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
* Opera는 벤더 프리픽스 지원을 다른 브라우저보다 빠르게 중단합니다

9. 2. RGBA (HSLA)
투명한 글씨, 투명한 배경색, 투명한 그림자…

10. 2. RGBA (HSLA)
R G B
color: #82B4FF;
color: rgb(130,180,255);
color: rgba(130,180,255,.5);
R G B Alpha
Alpha 값은 50%를
0.5 또는 .5로 적습니다.

11. 3. text-shadow
그림자, 이제는 넣을 수 있다

12. 3. text-shadow
text-shadow: 1px 1px 2px rgba(0,0,0,.5);
X Y blur color
text-shadow는 이미 벤더프리픽스를
쓰지 않는 단계에 와 있습니다.

13. 4. box-shadow
박스에 그림자를 주는 가장 쉬운 방법

14. 4. box-shadow
-moz-box-shadow: 2px 2px 0 #FFF;
-webkit-box-shadow: 2px 2px 0 #FFF;
box-shadow: 2px 2px 0 #FFF;
X Y blur color

15. 5. 슈도 클래스 (pseudo class)
:active
임시 속성을 부여하는 방법입니다.
의사 클래스라고 번역하기도 합니다.

16. 5. 슈도 클래스 (pseudo class)
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의 순서로 작성합니다

17. 5. 슈도 클래스 (pseudo class)
:active - Click시 발동
:hover - Mouse Over시 발동
:focus - Focus in시 발동
슈도클래스는 CSS3는 아니지맊,
그 동안 IE6에서 동작이 제한적이어서 잘 사용되지 않았습니다.
앞으로는 위의 코드를 맋이 쓰게 될 겁니다

18. 6. New Selectors
• 자식 선택자
• 인접형제 선택자
• 첫째
셋째
막내
• 속성 선택
• 책갈피 사용시에 발동
• 그 외 기타 등등

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

20. 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초가 걸립니다.

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

22. 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);
회젂, 확대/축소, 비틀기, 이동시키기…

23. 9. Multi-background
마크업을 추가하지 않고도
여러 개의 배경을 깔 수 있습니다

24. 9. Multi-background
background: url(“a.png") repeat-x bottom,
url(“b.png") no-repeat bottom right,
url(“c.png");
, 쉼표맊 붙이면 됩니다

25. 10. Border-image
가변 사이즈를 처리하기에 유용합니다

26. 10. Border-image
border-width:15px;
-moz-border-image:url(border.png)
30 30 round;
-webkit-border-
image:url(border.png) 30 30 round;
작은 이미지를 repeat/stretch 하여 사용합니다

27. Thank you