CSS코드를 올바로 작성하면 CSS를 지원하는 모든 브라우저에서 올바로 동작해야합니다. 하지만 불행하게도 브라우저에는 버그도 있고 일괄적으로 동작하지도 않습니다. 이를 해결하기 위한 아주 강력한 무기가 바로 핵(hack)과 필터(filter)입니다.

하지만 이런 강력한 기능을 사용할 때는 그에 따른 의무사항도 지켜야 하겠죠.

이런 핵과 필터에 대한 기능과 사용방법을 이번 포스팅에서 설명하겠습니다. ㅋㅋ

필터는 브라우저에 따라서 특정 규칙을 적용되도록 하거나 적용되지 않도록 하는 방법입니다.

핵은 원하는 방법대로 브라우저를 동작시키려고 사용하는 쉽게 말해 꼼수입니다;;

핵은 브라우저에 따라 각기 다른 규칙을 적용하기 위해 필터를 사용합니다. 또한 핵을 이용해 브라우저에서 원하는 결과를 얻기 위해 올바르지 않은 CSS를 사용하기도 합니다. 다시말해 CSS필터는 브라우저마다 다른 규칙을 적용하기 위해 사용하는 핵의 한 종류라고 할 수 있습니다.

핵 사용시 유의점

핵과 필터에 많이 의존하게 되면 오히려 복잡한 코드로 인해 기존의 코드를 읽기 어려워지게 될 수도 있습니다.

따라서 핵을 사용하기 전 단순하고 명료한 코드 관리를 우선시 하고 핵을 위한 스타일시트 파일을 별도로 만드는 것이 좋습니다.

유용한 핵

01. 언더바 핵 ( _ ) : div { _width:100px; } - Win IE 4~6에서만 스타일만 적용

02. 닷 핵 ( . ) : div { .width:100px; } - Win IE 6~7에서만 스타일 적용

03. 해시 핵 ( # ) : div { #width:100px; } - Win IE 5.5~6, Mac IE 5, Opera 7, Mozilla 계열, Firefox에 스타일 적용

04. 스타 핵 : *html div { width:100px; } - Win IE 4~6, Mac IE 4~5에 적용

05. 스타7 핵 : html*div { width:100px; } - Win IE 5.5~6, Mac IE 5, Safari에 적용

06. xmlns 속성 핵 : html[xmlns] div { width:100px; }
- Mozilla, Firefox, Opera, Safari 등 속성 선택자를 지원하는 브라우저에 적용

07. :root 가상클래스 핵 : :root div { width:100px; }
- Mozilla, Firefox, Mac IE 5, Safari 등 가상클래스를 지원하는 브라우저에 적용

08. IE 8에서만 적용 : div { width/***/:100px; } - IE 8에서만 적용

09. IE 8을 포함한 IE버젼에서만 적용 : div { width:100px＼; } - IE에서만 적용

10. IE 7, Opera 적용 : *+html body div { width:100px; }

- IE 7, Opera 8 이후 버전 적용, Opera를 배제한 IE7전용으로 하고 싶을 때는

*+html>/**/body 로 Opera 전용 속성 기술

11. IE 7 적용 : *:first-child+html div { width:100px; }
- IE 7에서만 적용되고, 이외의 브라우저는 앞에서 기술한 셀럭터의 속성에 적용

12. Netscape 4 제외시키기 : <link rel="stylesheet" type="text/css" href="/css/style.css" media="all" />
- Netscape는 media 속성이 screen이 아닌 경우 외부 스타일시트를 읽지 못하는 버그가 존재함

13. Win IE 3~4, Mac IE 4 ~ 4.5, Netscape 4 제외시키기 : @import url("/css/style.css")
- Win IE 4, Mac IE 4는 인용부호가 "가 아니면 읽지 못하는 버그 존재.
IE 3과 Netscape 4는 @import 지원하지 않음

14. Mac IE 5 제외시키기 : div { /*＼*/width:100px; /* */ } - Mac용 IE 5에서는 적용시키기

15. Win IE 4~5 제외시키기 : div/**/ { width:100px; } - Win용 IE 4~5에서는 적용 제외시키기

16. Win IE 4~5, Mac IE 4.5~5 제외시키기 : div { width/* */:100px; }
- Win용 IE 4~5, Mac용 IE 4.5~5에서는 적용 제외시키기

17. Win IE 6 제외시키기 : div { width/**/:100px; } - Win용 IE 6에서는 적용 제외시키기

18. IE 7, IE 8에 적용: html>body div { width:100px; } - IE 7, IE 8에서만 적용

19. Opera 9,27 및 하위 버전에서만 적용 : html:first-child div { width:100px; }
- Opera 9.27 및 하위버전에서만 적용

20. Win IE 6 패스필터
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="/css/style.css" media="all" /><![endif]->

21. Win IE7 패스필터
<!--[if IE 7]><link rel="stylesheet" type="text/css" href="/css/style.css" media="all" /><![endif]->

22. 모던브라우저 패스필터 (Win IE 5.5 이하, Mac IE 5,Opera 8 이하, Netscape 4 이하 제외)
@import "null?"{";
@import "/css/style.css";
@import "null?"}";

보통 p, h1, div 같은 엘리먼트를 블록 엘리먼트라고 부릅니다.

이런종류는 화면에 표시될 때 블록상자처럼 표시하기 때문에 이렇게 불리우게 되었습니다.

반면에 strong, spen 등과 같은 엘리먼트는 한줄이거나 한줄의 박스로 표시되기 때문에 인라인 엘리먼트라 불리웁니다.

블록박스는 하나씩 세로 방향으로 나타나고

인라인박스는 수평방향으로 자리를 잡게됩니다.

여기에 포지션 방식인 normal flow(일반흐름방식), float(플로트방식), absolute positoin(절대위치방식) 방식을 이용하면 위치를 조정할 수 있게됩니다.

상대위치

상대위치(relative positioning) 개념은 쉽게 이해할 수 있을 겁니다. 해당위치를 유지하면서 시작점으로 부터 top, bottom, left, right 값에 따라 수평, 수직방향으로 이동합니다.

절대위치

절대위치(absolute positioning)은 문서의 흐름에서 벗어나 절대위치로 동작하게 됩니다. 상대위치가 지정된 조상 엘리먼트 중 가장 가까운 엘리먼트의 위치에서 수평, 수직방향으로 이동하게 됩니다.

* 이런 위치값을 이용하다보면 박스간 겹치는 일이 발생하게 됩니다. 이때 유용한 속성이 z-index입니다. 여러개의 박스가 위아래로 겹칠때 z-index값이 높은 박스가 위로 올라오게 됩니다.

고정위치

고정위치(fixed positioning)은 절대 위치 지정의 하위 분류에 속합니다. 이 방법을 이용하며 브라우저 창에 항상 동일한 위치에 표시되는 엘리먼트를 만들 수 있습니다.

플로팅

박스를 플로트로 띄우게 되면 그 박스를 둘러싸고 있는 박스나 플로트가 지정된 다른 박스의 왼쪽이나 오른쪽 끝면에 닿도록 이동시킬 수 있습니다.

라인박스와 플로트 해제방법

라인박스가 플로트된 박스 옆으로 흐르지 않도록 하려면 clear를 적용해서 플로트를 해제해야 합니다.

clear 속성에 들어갈 수 있는 값으로는 left, right, both, none이 있어서 박스의 어느쪽에서 이어서 표시되지 않도록 지정할 수 있습니다.

문단 왼쪽에 그림 하나를 플로트로 띄우고 싶다면 다음과 같은 코드를 작성할 수 있습니다.

위와 같이 별로의 엘리먼트를 추가하여 플로트를 해제하는 방법이 있는가 가면 CSS를 이용한 방법도 있습니다.

:after라는 유사 클래스와 content라는 속성을 활용하며 엘리먼트의 내용 끝 부분에 새로운 내용을 추가할수도 있습니다.

.news:after{content:"."; height:0; visibility:block; clear:both; }

박스모델은 CSS를 받들고 있는 주춧돌의 하나로, 한 요소가 어떤 영역에 어떻게 표시되고 다른 요소를 만났을 때 어떻게 되어야 하는지를 규정하게 됩니다.

패딩(padding) : 내용 영역 주의를 둘러싸며, 패딩 영역을 합친 영역에 배경이 지정됩니다. 테두리선을 추가하면 패딩 영역 바깥에 적용됩니다.

마진(margin) : 테두리선 바깥쪽에 지정되는것이 마진입니다. 마진은 투명하고 모양이 없습니다.

윈도우용 인터넷 익스플로러의 박스 모델

익스플로러 브라우저에서는 width속성을 계산할때 단지 내용 영역의 너비를 계산하지 않고 내용, 패딩, 테두리선의 너비를 모두 합한 값을 너비로 계산합니다. 아래 그림과 같이 내용 영역 너비인 40px 안에 패딩값을 포함합니다.

마진 겹침 현상

마진 겹침 현상은 알고보면 단순한 개념이지만 실전에서 웹페이지 레이아웃을 잡을 때 수많은 혼란을 일으킵니다.

간단하게 설명하자면 두 개 이상의 마진값이 세로 방향으로 만났을 때 하나의 마진으로 합쳐지는 현상을 말합니다. 마진이 하나로 합칠 때 두 개의 마진값 중에서 큰 값이 이 마진의 높이값이 됩니다.

두 개의 요소가 위 아래에 자리잡고 있을 때, 두 번째 요소의 상단 마진값은 첫 번째 요소의 하단 마진값 아래로 접혀들어가는 현상이 나타납니다.

이런 방식을 처음 접하면 생소하게 느껴지지만 사실 이는 매우 합리적인 방식으라고 할수 있습니다. 여러 개의 문단을 포함하고 있는 전형적인 웹 페이지의 경우를 한번 예로 들어 보겠습니다.

마진 겹침을 하지 않는다면 첫번째 문단의 상간 마진은 제대로 표시되지만 그 다음부터는 하단 마진과 이어지는 문단의 상단 마진을 합한 높이가 됩니다. 즉 문단 간격의 높이가 첫 번째 문단의 높이에 비해 두 배가 되겠죠. 마진 겹침 방식때문에 각 문단의 상간 마진과 하단 마진이 겹치게 되어 모든 간격이 동일하게 유지되는 효과를 얻게 되는 것입니다.

* 마진 겹침 현상은 일반적인 문서 흐름 상태에서 블록 레벨 박스에 지정된 세로 방향의 마진에서만 적용됩니다. 즉 인라인 레벨의 박스나

플로팅(float)이 지정된 문서 흐름 상태거나 절대 위치값으로 지정된 박스의 경우에는 이런 현상이 적용되지 않습니다.

· 기존의 HTML은 웹 문서를 다양하게 설계하고 수시로 변경하는데 많은 제약이 따라 이를 보완하기 위해 만들어진 것이 스타일 시트이고 스타일 시트의 표준안이 CSS.

· 적용하고자하는 속성을 미리 정의해 두고 필요한 경우 해당 문자열에 쉽게 적용할 수 있으며 문서 전체의 모양을 일괄적으로 변경 할 수 있는 기능.