중첩 엘리먼트 스타일 지정할 때요..

국내에 웹 사이트들이 웹 표준을 지키고 OS나 브라우저와 관계 없이 접근성을 향상 시키기 위한 사이트 버그 신고 및 문제 해결을 위한 게시판입니다.
Post Reply
초보

중첩 엘리먼트 스타일 지정할 때요..

Post by 초보 »

중첩된 엘리먼트에 CSS 지정할 때에요..

간혹 상위 엘리먼트까지 명확히 지정해 주어야만 스타일이 적용이
되는 경우가 있더라구요.

특히 클래스인 경우가 더 그런 것 같던데..

Code: Select all

[style type="text/css"]
 #a #b #c .d {
   
 }
[/style]

[div id="a"]
  [div id="b"]
    [div id="c"]
       [div class="d"][/div]
    [/div]
  [/div]
[/div]
어떤 경우엔 해당 엘리먼트만 지정해도 되고 어떤 때는 상위 엘리먼트 ID까지
명확히 지정해야만 적용이 되고..

왜 그럴까요..???

:?:
dece24
서포터즈
서포터즈
Posts: 83
Joined: 2006 05 04 02:44 45
Location: 대전
Contact:

CSS의 property 에 따른 상속문제인듯

Post by dece24 »

CSS 속성에는 자식 엘리먼트로 그 속성을 상속해 주는 속성과 그렇지 않은 속성이 있습니다.
따라서 상속되는 속성은 최상위 엘리먼트에 적용해도 손자에게 까지 상속되지만 상속되지 않는 속성은 자기 자신 또는 상속이 가능한 자식에게 까지만 상속을 해줍니다.

예를들어 body 에 서체를 적용하면 다른 자식들에게는 모두 상속되지만 form 안쪽의 콘트롤 엘리먼트들에게는 상속되지 않는 상황이 바로 이런 경우의 적절한 예 같습니다.

아래 링크를 보시면 CSS 속성에 따라서 '전달:됨, 전달:안됨' 이라는 항목이 있습니다. 전달은 상속을 의미하므로 상속되는 속성과 그렇지 않은 속성을 확인하실 수 있습니다.

http://trio.co.kr/webrefer/css2/propidx.html

특히 font 와 같은 경우 '전달:됨' 이라고 표기되어 있지만 form 외부에서 지정된 서체가 form 안쪽의 콘트롤 엘리먼트 들에게는 전달되지 않음에 유의합니다. 특이한 케이스죠.

지금 격고있는 상황도 아마도 이런 특이한 케이스는 아닌지 추측됩니다. 코드 원문이 있었다면 정확하게 진단이 될것 같은데 그렇지 않아서 아쉽군요.
초보

제가 질문 글을 잘 못 올렸네요.. ^^;;

Post by 초보 »

제가 올린 글을 지금 다시 읽어보니 제가 질문글을 잘 못쓴 거 같네요..

dece24께서 답변해 주셨는데..
죄송합니다.. ^^;; 그리고, 감사합니다.

Code: Select all

[div id="a"] 
  [div id="b"] 
    [div id="c"] 
       [div class="d"][/div] 
    [/div] 
  [/div] 
[/div]
질문 올린 배경은
위에처럼 class가 d인 엘리먼트처럼 안쪽의 엘리먼트에 스타일을 적용하기 위해서..

Code: Select all

[style type="text/css"]
  .d {
    
  }
[/style]
이렇게 했는데요.. 간혹 적용이 안되는 경우가 있더라구요..

그래서,

Code: Select all

[style type="text/css"] 
 #a #b #c .d { 
    
 } 
[/style]
이렇게 하니까 또 적용이 되구요..

왜 그런지 잘 모르겠네요.. ^^;;


소스는 너무 복잡해서(?) 못올렸어요.. ^^;;
hyeonseok
해커
해커
Posts: 691
Joined: 2004 08 11 22:14 59
Contact:

Post by hyeonseok »

.d 가 다른곳에 지정이 되어 있거나 우선순위가 더 높은 셀렉터가 있는 것 같습니다. 셀렉터의 우선순위 계산은 http://dnzin.com/cunningweb/2006/09/04/ ... ification/ 을 참고해 보세요.
초보

감사합니다. ^^

Post by 초보 »

감사합니다.
이런 계산 법이 있었군요.. :!:


dece24님, hyeonseok님 두 분 답변 감사합니다.


^^
Post Reply

Who is online

Users browsing this forum: No registered users and 3 guests