css Warning 메세지 질문드립니다.

[soul.]

131 Same colors for color and background-color in two contexts #contents and #quickLink h3


이러한 메세지가 떴는데.
배경색과 폰트색깔이 같은데 왜 이것이 waring으로 나오는건지...
어떠한 이유가 있나요?

[hyeonseok]

배경색과 폰트색이 같으면 글자를 읽을 수 없기 때문이지요.

[fhel]

http://zeo.unic.net.my/notes/no-backgro ... our-color/

읽어보면 나오네요. 이유는 자세하게 나와 있지 않지만... 어쨌든 코멘트들을 읽어보면 이게 문제가 되는 경우가 있는 것 같습니다.

[soul.]

Code: Select all

<div id="middle">
      <div id=contents> 왼쪽문단 </div>
      <div id="quickLink"> 오른쪽문단 </div>
</div>

#contents문단에는 background-color: #fff , 폰트색상은 body에서 지정한 기본 색상코드가 들어갑니다.
#quickLink문단에는 color: #fff, 배경은 이미지로 들어갑니다.

서로 다른 영역인 이 두개 문단이
배경색과 폰트 색상이 왜 충돌이 일어나는건지 이해가 안갑니다.
같은 문단에서라면 답글주신대로 글자를 읽을 수 없기때문이지만....
#quickLink 에 배경색을 임의로 지정해주니 충돌이 안일어나긴하네요...
하지만 그렇다고 엉뚱하게 다른 배경색을 지정해줄수도 없고....
경고는 그다지 문제가 되지는 않는것 같지만, 제가 모르는 뭔가가 있는 것 같은데 설명부탁드립니다.

[눈사람]

눈팅한 하던 유령이 답드릴께요.

한마디로 배경색과 글자색의 값은 상속되기 때문입니다.
그런고로 body의 배경색을 #fff으로 줄 경우, 그 아래에
해당되는 문법들의 배경색은 임의로 지정하지 아니하면 모두 #fff가 됩니다.
#QuickLine은 결과적으로 배경색과 글자색은 #fff가 되어
한번에 읽을수가 없게 되지요.
덧붙여, 오페라에서는 글자위에 커서를 올려도 입력 커서로 모양이 안바뀌기 때문에
Ctrl+a하지 않는한, 글자가 있는지 없는지 모를겁니다.

더 자세한건 trio.co.kr에서 영한 번역된 규격문서를 읽어보시기 바랍니다.

[dece24]

서로 다른 문단이라고 말씀하셨는데 '구조와 표현이 완전히 분리된' 상태를 가정하면 이야기가 달라집니다.

CSS 를 사용하지 않은 상태라면 저 두개의 문단이 겹칠 일은 절대 없을 것입니다. 하지만 CSS 를 사용했고 구조로부터 표현을 분리시킨 상태라면 CSS 에 의하여 얼마든지 겹칠 소지가 있고 그것이 문제가 될 수도 있다고 경고하는 겁니다.

겹치는 상황은 position:absolute, position:relative 일 때 그렇죠.

PS : 눈사람님께, 배경이 상속된다고 말씀하셨는데 그렇지 않습니다. background는 상속되는 속성이 아닙니다. 참조 http://trio.co.kr/webrefer/css2/colors. ... background ('전달:안됨' 이라는 항목이 그것을 말해주고 있습니다)

[soul.]

답변들 감사합니다.^^
그럼 단순이 겹칠 소지가 있다는 경고 메세지이니까
position으로 이루어진 상황이 아니라면 신경안써도 되는건가요?

어렵네요. 구조와 표현을 분리해서 코딩한다는 것이...
제가 코딩한것이 개발들어가면서 문제가 생기면...
제가 초보라..자꾸 제가 원인인듯해서 불안불안하답니다.
최근에는 개발들어가면서 테이블로 코딩한 부분만 폰트크기가 안먹길래..
원인을 모르다가... 테이블은 body에서 지정한 폰트크기가 상속이 안되는 거였더라구요...ㅎㅎ

[dece24]

A 라는 업체가 해당 웹사이트를 개발하고 B 라는 업체가 유지보수 하는 사례는 비일비재 합니다. 설사 A 라는 업체의 a 개발자가 개발하더라도 유지보수 담당자는 b 일 수 있습니다.

이런 경우 b 라는 담당자 또는 B 라는 회사에서는 CSS 코드를 유지보수 하면서 모든 ID 나 Class 가 어떤 페이지에서 어떻게 작동하는지 전부 알지는 못합니다. 따라서 어떤 ID 나 Class 의 속성을 변경하려고 할 때 그것의 위치값을 변경시키려고 position 속성의 값을 absolute, relative 으로 수정하게 되면 아무도 모르게 흰색 배경과 흰색 글씨가 겹칠수도 있겠지요.

물론 최악의 상황일 경우 그럴 수 있다는 겁니다. 그것에 대한 경고 정도라고 생각하시면 될 것 같습니다.