스타일 초기화(?) 질문입니다.

[초보]

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

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

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

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

[dece24]

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

//모든 속성들을 일일이 지정을 해주어야 하는지요..
//이걸 피하려면 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에서도 지원이 됐었다면
그나마 삽질을 덜 했을텐데 말이죠..