당신은 선[善]플러 입니까?

팁공유방

  • 홈관련팁
  • 윈도우
  • 리눅스
  • 드림위버
  • 제로보드(XE)new
  • (x)html
  • CSS
  • javascript
  • jQuery
  • 웹표준
  • 웹접근성
  • 포토샵
  • 플래쉬
  • 기타

Xpress engine
Textyle

CSS

CSS와 관련된 팁이 있는 곳입니다. 좋은 자료 공유해 주세요.

CSS hack 정리

조회 수 8142 추천 수 0 2008.02.09 14:56:55
출처 :  

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

  1. [2010/08/30] CSS Properties Index by kihoon (55)
  2. [2009/05/18] 구글 킬러의 등장, 울프럼알파 by nkkim96 (28)
  3. [2009/02/17] Explorer 6 더블마진 현상 by nkkim96 (27)
  4. [2008/12/19] CSS의 em 단위 by nkkim96 (18)
  5. [2008/12/19] PNG 파일의 알파값 IE6에 적용시키기 by nkkim96 (27) *4
profile  "생생하게(vivid) 꿈꾸면(dream) 이루어진다.(realization)" R=VD
태그

엮인글 '1'

http://www.webmini.net/24918/707/trackback

2010.01.27 18:07

구글 크롬에서의 자간 문제 해결 방법 - Guju Story

최근 구글 크롬으로 브라우저를 바꾸게 되었는데, 기존에 쓰던 파이어폭스에 비해 갑작스레 죽는 현상은 사라졌으나 다양했던 확장기능이 없어서 자꾸 허전하게 느껴진다. 특히 블로그 본문 자간이 파이어폭스나 IE와 다르게 보여 조금 고생했는데, 검색을 통해 얻은 정보에 따르면 브라우저마다 CSS를 처리하는 방식이 달라서 그렇단다. 그렇다면 어떤 해결방법이 있을까 고민하던 차에 마침 hack이라는 방법을 알게 되어 적용하게 되었다.1 body:first-o...

List of Articles
번호 제목 글쓴이 날짜 조회 수
공지 css 팁에 관련해서... [1] [레벨:30]id: 빽짱구빽짱구 2007-11-30 13964
공지 Cascading Style Sheets (CSS3) file [레벨:30]id: 빽짱구빽짱구 2010-06-29 2079
41 프린트용 css [1] [레벨:30]id: 빽짱구빽짱구 2008-07-29 4337
40 border-collapse:collapse [레벨:30]id: 빽짱구빽짱구 2008-07-29 5197
39 css로 background 이미지 고정하기 [레벨:30]id: 빽짱구빽짱구 2008-06-19 5969
38 고유 색상명 imagefile [1] [레벨:30]id: 빽짱구빽짱구 2008-06-17 5583
37 div 전체 세로 정렬하기 [1] [레벨:30]id: 빽짱구빽짱구 2008-06-13 8005
36 css를 이용한 이미지 확대 [레벨:30]id: 빽짱구빽짱구 2008-03-19 5525
35 IE6에서 border 속성 [레벨:30]id: 빽짱구빽짱구 2008-02-10 4664
» CSS hack 정리 [1] [레벨:30]id: 빽짱구빽짱구 2008-02-09 8142
33 css와 html 을 보면서 적용하는 사이트? [2] [레벨:30]id: 빽짱구빽짱구 2008-02-09 5003
32 스타일시트 속성을 지정하는 순서 [레벨:30]id: 빽짱구빽짱구 2008-02-09 4959
31 브라우저 스타일 초기화 [레벨:30]id: 빽짱구빽짱구 2008-02-09 5522
30 li 에서 이미지와 이미지 사이에 여백이 생기는... [1] [레벨:30]id: 빽짱구빽짱구 2008-01-15 5462
29 css로 원하는 부분만 인쇄하기 [1] [레벨:30]id: 빽짱구빽짱구 2008-01-08 5260
28 IE에서 Float-Margin Bug [레벨:30]id: 빽짱구빽짱구 2007-12-07 5749
27 해당 div를 스크롤로 감싸자. [1] [레벨:30]id: 빽짱구빽짱구 2007-12-06 6834
26 CSS 만으로 구현하는 롤오버 이미지 [1] [레벨:30]id: 빽짱구빽짱구 2007-12-03 5148
25 IE6에서 레이어 고정시키기 핵. Fixed Layer ... [레벨:30]id: 빽짱구빽짱구 2007-11-30 6125
24 스타일 시트 불러오기? [레벨:30]id: 빽짱구빽짱구 2007-11-12 4373
23 margin (마진) 에 대해 알아보자. [레벨:30]id: 빽짱구빽짱구 2007-11-12 4383