coolx.net

Programming

No.

462

Name.

swindler

Subject.

CSS Style 상속 관련 (초기화)

Main Cate.

CSS

Sub Cate.

Date.

2008-07-19 15:53

Hit.

12760 (211.36.27.8)

File.

//중첩된 엘리먼트들에서 상위 엘리먼트에 지정한 속성들을
//하위에 있는 일부 혹은 특정 영역 안의 엘리먼트에서
//속성값을 디폴트 값들로 초기화 할 수 있는 방법이 있는지 궁금합니다.

//모든 속성들을 일일이 지정을 해주어야 하는지요..
//이걸 피하려면 id나 class가 남발(?)될 거 같아서요.

1. 상속의 범위를 제한.
예를 들어 다음과 같은 코드가 있다고 가정 합니다.
[body id="main"]
[div id="locaNavigation"]
[h2]회사소개[/h2]
[/div]
[/body]

CSS 에서는 "사이트 로고" 에 대하여 다음과 같이 선택자를 배열 합니다.
#main #localNavigation h2 {...}

#main 이라는 ID 가 붙어있는 페이지에서,
#localNavigation 이라는 ID 영역에 포함된,
h2 태그에만 Style 을 적용합니다.

즉, 선택자를 쓸 때 h2 {...} 라고만 쓰면 모든 페이지의 h2가 이 속성을 상속 받겠지만 선택자를 저렇게 띄어쓰기 해서 배열하면 상속의 범위가 제한되고 명확 해지겠죠. 현재 페이지에 h2 태그가 만약 또 있는 경우라면 완전히 다른 스타일을 다시 적용할 수 있구요.

이런 방법은 이미 알고 계실줄로 믿습니다.

2. 상속의 범위를 제한하는 방법으로 마크업을 융통성 있게 사용.
중첩된 2단 구조의 [ul] 네비게이션을 만들 때 보통 이렇게 하죠. [ul]-[ul].
[ul]
[li]메뉴1
[ul]
[li]메뉴1_1[/li]
[li]메뉴1_2[/li]
[/ul]
[/li]
[/ul]

이 상황에서 ul 태그에 대하여 Style 을 적용하게 되면 1단계-2단계 모두 상속받죠. 그래서 이런 방법을 쓸 수도 있습니다. 1단계의 목록태그와 2단계의 목록태그를 다르게 사용하는거죠. [ol]-[ul] 식으로 말이죠.
[ol]
[li]메뉴1
[ul]
[li]메뉴1_1[/li]
[li]메뉴1_2[/li]
[/ul]
[/li]
[/ol]

대부분의 웹사이트 메뉴는 이렇게 마크업 해도 무방 합니다. 1단계 메뉴는 보통 순서에도 중요한 의미를 부여하기 때문에 순차적인 마크업을 하고 2단계 메뉴는 비순차 목록으로 마크업을 했습니다. 이 때 1단계 [ol] 태그에 적용된 Style 은 2단계 태그인 [ul] 태그로 상속되지 않기 때문에 효과적으로 상속을 제한하게 되죠.

3. 그럼에도 불구하고 어쩔 수 없이 상속을 제한할 수 없게 되는 경우에는 CSS 의 우선순위 규칙을 이용.
CSS 문서에서 나중에 작성된 코드는 먼저 작성된 코드보다 우선순위를 갖습니다. [li] 태그가 여러번 중첩 되었을 때 가장 자식이 되는 태그에 부여할 Style 은 CSS 코드상으로도 가장 나중에 정의하면 됩니다. 위와 동일한 마크업으로 예를 들면.

[ol]
[li]메뉴1
[ul]
[li]메뉴1_1[/li]
[li]메뉴1_2[/li]
[/ul]
[/li]
[/ol]

이 상황에서는 아래와 같은 순서로 코드를 쓸 수 있겠죠.
li {...} /*부모 스타일을 윗줄에 적용*/
li li {...} /*자식 스타일은 아랫줄에 적용, 부모의 스타일보다 우선권을 가짐*/

부모태그에 적용된 Style은 자식에게 상속되지만 자식태그에 적용될 Style을 아랫줄에서 나중에 다시 정의했기 때문에 상속받으려는 속성과 충돌하는 경우 아래쪽에 정의된 Style 이 우선권을 갖습니다.

4. !important 규칙을 사용.
이 방법도 이미 알고 계실줄로 믿습니다만.
li li {속성:값 important; 속성:값 important;}

이렇게 '속성:값' 을 적은 다음 한칸 띄워서 !important 라고 적으시면 코딩된 순서와 무관하게 무조건 우선순위를 갖습니다.

5. 그 밖에 모든 상황에 적용할 수는 없지만 이런 방법도 있습니다.
[div][div][div] 와 같은 식으로 마크업 되어 있고 첫 번째 [div] 에 Style을 적용했는데 두~세번째 [div]에는 전혀 상속할 필요가 없다고 가정 합니다. 이 때 공용 선택자 '*' 를 이용하여 모든 자식에게 상속되려는 속성을 초기화 시켜 버립니다. 공용 선택자는 모든 태그를 대표 합니다.
div {font-style:italic;}
div * {font-style:normal;}

이런 팁은 경우에 따라서 적용할 수도 있지만 그렇지 못할 수도 있죠. 원치 않는 태그까지 초기화 될 수도 있으니까요.

6. 표준이긴 하지만 IE6 에서 지원하지 않는 선택자 사용법.
div>div {...} 라고 코딩하면 바로 한 단계 아래쪽의 [div] 태그에만 Style 을 적용하게 되어 더이상 이를 손자에게는 상속 시키지 않습니다. 하지만 IE6 에서 지원하지 않기 때문에 향후 몇년간은 사용을 금기시 하여야 하겠습니다. IE8 버전이 나올 때즘에는 확실하게 사용할 수 있을 껍니다. IE7에서는 이를 올바르게 지원하는 것을 확인 하였습니다.

[바로가기 링크] : http://coolx.net/cboard/develop/462


[Modify] [Delete]		[Reply] [List]