수다닷컴

아래 두 마크업은 비슷하지만
실제 화면에서는 아주 적은 차이가 나타납니다.
하지만 레이아웃과 디자인을 철저하게 맞춰야할 때
매우 큰 문제가 되더라구요.

(1)
div
span■/spanspan■/span
/div

*결과 (1x1표를 div라고 가정하겠습니다.)
■■

(2)
div
span■/span
span■/span
/div

*결과 (공백을 파란색음영으로 나타내었습니다.)
■ ■

저 공백은
span과 span이
줄바꿈을 했기 때문에 나타나는데요.

저 공백에 글자를 적는다면
span을 감싸고있는, 또는 span의 부모, 조상 노드의 폰트스타일, 줄간격 등을 따르게 되는 듯 하더라구요.

즉, div에 font-size:0과 line-height:0 을 넣게되면,
저 공백을 없앨 수 있는데요.
(이 때 span에는 font-size와 line-height 값이 별도로 있다고 가정합니다.)
물론 실제로 공백이 없는 것은 아닙니다.
드래그 복사해서 메모장에 붙여넣으면 공백이 있습니다.

어디서 주워들은 얘기인데
font-size:0을 인식하지 못하는 중국? 브라우저가 있다고 해서
좋은 방법이 아니라고 들었거든요.

실제로 div에 순수한 텍스트노드가 들어갈 경우라면
당연히 사용하면 안되겠죠. (아래처럼)
div
전화번호
span123-1234/span
/div

하지만 (2)와 같은 경우에서는
사용해도 표준이나 접근성 부분에서
큰 문제가 되지 않을 듯 하거든요.

전문가 님들은 어떻게 생각하시는지 궁금합니다.

신청하기