css3

CSS3 Top10

View more presentations from Toby Yun

CSS3 Top10 — Presentation Transcript

1. CSS3 속성 Top10Toby2011.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시 발동 주목하세요 앞으로 맋이 쓰게 될 겁니다
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. -webkit-border-image 가변 사이즈를 처리하기에 유용합니다 아이폰, 안드로이드 한정 작업에 사용해보세요
26. 10. -webkit-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