CSS

CSS와 관련된 팁이 있는 곳입니다. 좋은 자료 공유해 주세요.
  • 웹미니 한줄 전광판 영역 입니다.
글 수 123

0

조회 수 : 21190 신고 : 0

profile
작성자 : title: [ani]깜빡이는 표정빽짱구
포인트 : 56933 | 레벨 : 25
미리보기 :  

CSS hack 이란?
브라우저의 구현 차이나 버그를 이용하여 CSS의 적용대상에서 일부 브라우우저를 제외하거나, 특정 브라우저만을 대상으로 CSS를 적용하는 방법을 'CSS핵' 이라고 합니다.
크로스브라우징을 위한 응급대처 같은 방법이라고 생각하시면 되고, 핵일부는 CSS의 문법상 올바르지 않은 것도 있을 수 있습니다.

여러 핵들이 있지만, 자주 사용하는 핵을 살펴보겠습니다.

1. 스타핵 (star hack)
셀렉트 앞에 *html  을 붙히며 Win IE 4~6, Mac IE 4~5 등에 스타일이 적용되며 다른 브라우저에는 적용되지 않습니다.

* html p{ padding:3px; } /* 맨앞에 *html 을 붙혀줍니다. */


2. 언더스코어 핵
(underscore hack)
속성의 가장 앞부분에 언더스코어(_)를 붙이며 Win IE 4~6 등에서 스타일이 적용되고 다른브라우저에서는 적용되지 않습니다.

p { _padding:3px; } /* padding 앞에 _ 를 붙혀줍니다. */


3. 해시 핵
(hash hack)
속성의 앞에 # 를 붙이며 Win IE 4~6, Mac IE 5, Opera 7, Mozila, Firefox 등에 스타일이 적용되고 다른 브라우저에는 적용되지 않습니다. (CSS의 문법상 속성의 앞에 #를 두는 것은 문법적으로 바르지 않습니다.)

p { #padding:3px; } /* padding(속성) 앞에 #를 붙힙니다. */


4. 스타 7 핵
(star 7 hack)
셀렉트 앞에 html* 를 붙이며 Win IE 5.5~6, Map IE 5, Safari 등에서 스타일이 적용되고 다른 브라우저에서는 적용되지 않습니다. html* 과 선택자 사이에 공백을 두시면 안됩니다.

html*p { padding:3px; }


5. IE7 전용핵
셀렉트 앞에 *:first-child+html 를 붙히며, IE 7에만 적용이 됩니다.

*:first-child+html p { padding:3px; }


<추가>
구글의 크롬 브라우저가 출시되었습니다. 사파리 엔진을 사용했더군요.. 그래서 사파리용 핵은 아래와 같이 적용하시면됩니다.

body:first-of-type

ex) body:first-of-type #wrap

이밖에도 브라우저 배제를 위한 핵과 박스모델 핵 패스필터 등이 있지만, 제가 주로 사용하는 핵을 위주로 적어봤습니다. 

hack 을 자주 사용하면 새로운 브라우저에 영향을 끼칠수도 있으며, 업무효율을 떨어뜨리는 요인이 될수도 있으니, 응급대처 방법이라고 생각하시고 사용하시는게 올바른 판단이라고 생각됩니다.

태그
profile 글쓴이 빽짱구

단점이 없는 사람은 장점도 거의 없다 - 에이브러햄 링컨

소중한 댓글 부탁드립니다.
추천수 10단위당 메달이 1개씩 노출되고, 추천수에 따라 배경색이 변하며, 일정수의 추천수를 받을시 BEST 아이콘이 붙게됩니다.
추천수에 따른 배경색 보기 본문으로 바로가기
  • 추천수 50개이상
  • 추천수 30개이상
  • 추천수 20개이상
  • 추천수 10개이상
  • 추천수 3개이상
닫기

첫번째 댓글을 남겨주세요!

List of Articles
번호 제목 글쓴이 날짜 추천 수 조회 수sort
공지 Cascading Style Sheets (CSS3) file title: [ani]깜빡이는 표정빽짱구 2010-06-29 1 32637
공지 CSS 용량을 줄여주는 사이트 file [7] title: [ani]깜빡이는 표정빽짱구 2010-05-13 1 23175
공지 css 팁에 관련해서... [1] title: [ani]깜빡이는 표정빽짱구 2007-11-30 1 44339
123 css3 애니메이션 속성 title: [ani]깜빡이는 표정빽짱구 2018-10-30   227
122 sass 기초 개념이 잘정리되어 있네요. title: [ani]깜빡이는 표정빽짱구 2018-10-25   228
121 CSS Transition 옵션 title: [ani]깜빡이는 표정빽짱구 2018-09-30   230
120 아이폰(ios) input 박스안에 그림자 및 라운드 제거하기 title: [ani]깜빡이는 표정빽짱구 2018-10-28   299
119 CSS3 box-sizing:border-box [1] title: [ani]깜빡이는 표정빽짱구 2016-02-16   384
118 아이폰에서 textarea 그림자 제거 [1] title: [ani]깜빡이는 표정빽짱구 2018-09-25   388
117 크롬 input 박스 노란색 제거 하기 title: [ani]깜빡이는 표정빽짱구 2018-09-23   514
116 IOS 박스 스크롤 부드럽게 하기 -webkit-overflow-scro... title: [ani]깜빡이는 표정빽짱구 2016-02-16   572
115 포토샵과 letter-spacing 자간 비교 file title: [ani]깜빡이는 표정빽짱구 2018-12-24   577
114 css 패턴 title: [ani]깜빡이는 표정빽짱구 2014-05-14   1828
113 css3 box-shadow 에 대해 알아보자 title: [ani]깜빡이는 표정빽짱구 2013-01-09   2593
112 모바일 가로버전 @media title: [ani]깜빡이는 표정빽짱구 2013-12-23   2891
111 자주쓰는 css3 속성 Top10 title: [ani]깜빡이는 표정빽짱구 2013-01-09   2903
110 list-style 속성들 title: [ani]깜빡이는 표정빽짱구 2012-10-26   2947
109 [반응형웹]해상도에 따른 CSS호출하기(미디어쿼리) title: [ani]깜빡이는 표정빽짱구 2014-05-20   3228
108 크롬,사파리,익스 스크롤바 바꾸기 title: [ani]방울UI 2013-08-08   3399
107 모바일 코딩시 메뉴가 3개일때 해결방법 title: [ani]깜빡이는 표정빽짱구 2013-12-18   3557
106 css3 그라데이션을 손쉽게 적용하자 title: [ani]깜빡이는 표정빽짱구 2012-10-11   3969
105 css3로 브라우저 별로 그라데이션 주기 title: [ani]깜빡이는 표정빽짱구 2012-07-23   3995
104 [css3] 웹 브라우저별 벤더 프리픽스 title: [ani]깜빡이는 표정빽짱구 2012-08-30   4071