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는 중복선언된 속성은 나중의 겂을 우선으로 적용합니다.
순서를 지켜 작성할 경우, 미래에 해당 속성이 표준이 되면
각 벤더의 방식이 아닌 표준방식으로 적용 될 수 있게 됩니다.
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
• 자식 선택자
• 인접형제 선택자
• 첫째
셋째
막내
• 속성 선택
• 책갈피 사용시에 발동
• 그 외 기타 등등