벤더 프리픽스 (Vendor prefix)• 각 벤더(브라우저 개발사)에서 새로운 기능추가를 시범 적용하기 위해 사용하는 방식입니다. Safari, Chrome -webkit- Firefox -moz- Opera -o- Internet Explorer -ms-• 벤더 프리픽스는 hack이 아닙니다 width: 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) 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로 적습니다.
3. text-shadow 그림자, 이제는 넣을 수 있다
3. text-shadow text-shadow: 1px 1px 2px rgba(0,0,0,.5); X Y blur color 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 Y blur color
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시 발동 주목하세요 앞으로 맋이 쓰게 될 겁니다
6. New Selectors • 자식 선택자 • 인접형제 선택자 • 첫째 셋째 막내 • 속성 선택 • 책갈피 사용시에 발동 • 그 외 기타 등등
7. Transition 개체에 젂환 효과를 부여합니다. 플래시의 모션 트위닝과 유사합니다.