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