니켈라오 » 웹로그 아카이브 » 공간 및 의사 문제

» 웹로그 아카이브 » 공백과 의사 요소 문제 Niquelao - CSS 공백과 의사 요소 문제 2006년 9월 7일 Maroto 작성 이런 종류의 버그를 발견한다는 건 참 이상한 일이다. 그러니까, 별것도 아닌 사소한 문제인데, 할 일이 없거나 아니면 정말 우연의 우연이 겹쳐서야 깨닫게 되는 그런 거다. 게다가 늦게나마 알게 되는 것도. 이미 1년도 더 전에 Maxgeek, Satzansatz 그리고 아마 다른 곳에서도 같은 내용이 쓰인 적이 있다. 본론으로 들어가자. 무슨 일이 일어나는 걸까? CSS 2.1 명세에서 정의한 의사 요소인 :first-letter와 :first-line을 사용할 때(우리 친구 IE가 별로 신경 쓰지 않는 :first-child 같은 의사 요소는 넘어가자), 때때로 예상한 결과를 얻지 못한다는 걸 확인할 수 있다. 무슨 일일까? 이해할 수 없게도, IE는 CSS 문법을 해석할 때 실수를 한다. 이 의사 요소들 뒤에 선언을 시작하는 중괄호({)를 둘 사이에 공백 없이 바로 붙여 쓰면, IE가 이를 해석하지 못한다. 예제 1에서 확인할 수 있다. p:first-line { color: blue; font-weight: bold; } 여러 요소에 공통 속성을 하나의 선언으로 지정하려 할 때, 즉 요소들을 쉼표(,)로 구분할 때도 마찬가지다. 예제 2에서 확인할 수 있다. p:first-letter , blockquote p:first-letter { color: #000; font: 2.3em serif; float: left; margin: .2em .2em 0 0; } 그럼 해결책은, 있긴 있을까? 이 경우에는 존재하고 비교적 쉽다. 그냥 의사 요소와 적용해야 할 기호, 즉 쉼표(,)나 중괄호({) 사이에 공백을 하나 넣어주면 된다. 못 믿겠다면, 예제 3이 여기 있다. p:first-letter , blockquote p:first-letter { color: #000; font: 2.3em serif; float: left; margin: .2em .2em 0 0; } 어!! 여기서 끝이 아니다! 우리가 마주치는 또 다른 작은 문제는 목록에서 비롯된다. 이번엔 무슨 일일까? 목록 요소에 :first-letter 의사 요소로 스타일을 적용하면, IE는 친절하게도 이를 목록 요소 자체의 마커(순서 없는 목록의 경우 불릿, 순서 있는 목록의 경우 숫자나 문자)에까지 전파한다. 못 믿겠으면 예제 4를 봐라. 그럼 이 엉킨 문제의 해결책은? 문어를 반려동물로 인정한다면, 다음과 같이 목록의 마커를 제거하는 걸로 하자: li {list-style:none} 아니면, 뭐 별수 없지. 중요하지 않은 또 다른 세부 사항은, IE7b2는 의사 요소와 { 문자 사이에 공백이 없어도 상관하지 않는다는 것이다. 물론 그 작은 동생은 신경 쓰니까, 그의 생존 공간은 존중해주자. 그리고 겸사겸사, 명시도(specificity)는 어떻게 될까? 뭐 어떻게 되긴, 아무 일도 없다, 적어도 IE에서는. 먼저 알아야 할 것은 이 의사 요소들이 (적은 범위는 아니지만) 블록 레벨 요소에만 영향을 준다는 것이다. 좋다, 예를 들어 단락에 몇 가지 속성을 정의하고 이어서 인용 블록(blockquote) 안에 나타나는 다른 단락에 또 다른 속성을 정의하면, 두 단락 모두 같은 특성을 갖게 된다(물론 의사 요소와 그 멋진 기호 사이에 해당 공백을 넣는 걸 깨달았다는 전제하에. 모든 게 마지막 예제에 요약되어 있다. 그럼 해결책은? 오늘은 이미 지쳤으니, 네가 직접 찾아봐라. 카테고리: CSS —> RSS 2.0 피드로 댓글을 추적할 수 있다. 댓글을 남기거나, 자신의 사이트에서 트랙백을 보낼 수도 있다. 이전 글: 폼 다듬기 (에피소드 I) 다음 글: Asides를 시작하며 댓글 남기기 이름과 이메일 필드는 필수입니다 우리를 추가하세요… 우리가 일반적으로 강조하는 태그 접근성 bert bos blockquote bug cañas 인용 cite 동작 지식 CSS escuas 표준 fieldset Firefox 서식 formulario 폰트 hidden ie IE 7 정보 javascript legend 목록 niquelando 필수 opera 해변 q squash 휴가 w3c WCAG xhtml 이 저작물은 Creative Commons 라이선스에 따라 이용할 수 있습니다.

P.S. A few readers have asked which superposición de accesibilidad (overlay) we actually reach for — it's accessiBe; take a look here if you want the current details.