Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

CSS3 Top10

5,955 views

Published on

Published in: Technology, Design
  • Be the first to comment

CSS3 Top10

  1. 1. CSS3 속성 Top10Toby2011.02.19
  2. 2. Toby
  3. 3. 잠깐, 벤더 프리픽스를먼저 알아봅시다이걸 알아야 얘기가 되지
  4. 4. 벤더 프리픽스 (Vendor prefix)• 각 벤더(브라우저 개발사)에서 새로운 기능추가를 시범 적용하기 위해 사용하는 방식입니다. Safari, Chrome -webkit- Firefox -moz- Opera -o- Internet Explorer -ms-• 벤더 프리픽스는 hack이 아닙니다 width: 10px 이나 _width: 10px 같은 근본없는 코드와는 다릅니다.
  5. 5. 벤더 프리픽스 적용 예시 -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; prefix를 사용한 코드를 먼저 적고, 없는 겂을 마지막에 적습니다. CSS는 중복선언된 속성은 나중의 겂을 우선으로 적용합니다. 순서를 지켜 작성할 경우, 미래에 해당 속성이 표준이 되면 각 벤더의 방식이 아닌 표준방식으로 적용 될 수 있게 됩니다.
  6. 6. 그럼 본격적으로Top10을 뽑아봅시다내가 젤 많이 쓰는걸루
  7. 7. 1. border-radius 이젠 뚜껑 따지 맙시다
  8. 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. 9. 2. RGBA (HSLA)투명한 글씨, 투명한 배경색, 투명한 그림자…
  10. 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. 11. 3. text-shadow 그림자, 이제는 넣을 수 있다
  12. 12. 3. text-shadow text-shadow: 1px 1px 2px rgba(0,0,0,.5); X Y blur color text-shadow는 이미 벤더프리픽스를 쓰지 않는 단계에 와 있습니다.
  13. 13. 4. box-shadow 박스에 그림자를 주는 가장 쉬운 방법
  14. 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. 15. 5. 슈도 클래스 (pseudo class) :active 임시 속성을 부여하는 방법입니다. 의사 클래스라고 번역하기도 합니다.
  16. 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. 17. 5. 슈도 클래스 (pseudo class) :active - Click시 발동 :hover - Mouse Over시 발동 :focus - Focus in시 발동 주목하세요 앞으로 맋이 쓰게 될 겁니다
  18. 18. 6. New Selectors • 자식 선택자 • 인접형제 선택자 • 첫째 셋째 막내 • 속성 선택 • 책갈피 사용시에 발동 • 그 외 기타 등등
  19. 19. 7. Transition 개체에 젂환 효과를 부여합니다. 플래시의 모션 트위닝과 유사합니다.
  20. 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. 21. 8. Transform 개체를 형태변형 시킵니다. 포토샵의 Transform과 유사합니다.
  22. 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. 23. 9. Multi-background 마크업을 추가하지 않고도 여러 개의 배경을 깔 수 있습니다
  24. 24. 9. Multi-background background: url(“a.png") repeat-x bottom, url(“b.png") no-repeat bottom right, url(“c.png"); , 쉼표맊 붙이면 됩니다
  25. 25. 10. -webkit-border-image 가변 사이즈를 처리하기에 유용합니다 아이폰, 안드로이드 한정 작업에 사용해보세요
  26. 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. 27. Thank you

×