Mozilla 한국 커뮤니티

계속 삽질만 하고있는 초보입니다.
이 곳에서 여러 고수님들께 많이 배우고 있구요..

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

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

( 아흑.. 언제쯤 이 삽질들에서 벗어날 수 있을지.. )

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

//모든 속성들을 일일이 지정을 해주어야 하는지요..
//이걸 피하려면 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에서는 이를 올바르게 지원하는 것을 확인 하였습니다.

'나름대로' 정리 했는데 도움이 되실까 모르겠네요. 많이들 알고 계실텐데 혹시나 다른 분들께도 도움이 될까 싶어 적어 보았습니다.

dece24님 답변 감사합니다.

2번 방법은 생각해 보지 못한 방법이네요.
그런데, 2번 방법을 테스트해 보다가 알게된건데..
속성들 중엔 하위 엘리먼트에 기본적으로 상속이 되는 속성과 그렇지
않은 속성이 있었군요. ( 이걸 이제서야 알게 되다니.. 부끄.. ^^;; )

감사합니다.


6번에서 말씀하신 div>div {...} 요게 IE에서도 지원이 됐었다면
그나마 삽질을 덜 했을텐데 말이죠..