font-size:0; line-height:0; 사용해도 문제될 건 없겠죠?
보예
아래 두 마크업은 비슷하지만
실제 화면에서는 아주 적은 차이가 나타납니다.
하지만 레이아웃과 디자인을 철저하게 맞춰야할 때
매우 큰 문제가 되더라구요.
(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)와 같은 경우에서는
사용해도 표준이나 접근성 부분에서
큰 문제가 되지 않을 듯 하거든요.
전문가 님들은 어떻게 생각하시는지 궁금합니다.
번호 | 제 목 | 글쓴이 | 날짜 |
---|---|---|---|
2656960 | p, h 관계 (5) | 시내 | 2024-06-02 |
2656934 | window.print() 에대해서 질문좁할께요 | 주리 | 2024-06-02 |
2656904 | 풀더 경로 로 통해서 삭제하지말고 같은 풀더에잇는 파일 삭제하기. | 요루 | 2024-06-02 |
2656873 | 사진 엑박 질문입니다 | 달빛 | 2024-06-01 |
2656847 | 이런-ㅁ-;자바실행 (1) | 파라미 | 2024-06-01 |
2656823 | [질문]인터넷 익스플로어 관련... (3) | 자올 | 2024-06-01 |
2656792 | 다음 로그인소스 (2) | 보미 | 2024-06-01 |
2656736 | 다시한번 질문합니다. | 뽀야 | 2024-05-31 |
2656708 | IETester 도구를 사용해 보고있는데 결과가 다르게 나옵니다. (6) | 앵겨쪼 | 2024-05-31 |
2656653 | 버튼 누르면 이메일로 내용이 전송되게 하는 소스아시나요?ㅠㅠ | 허우룩 | 2024-05-30 |
2656575 | 굵기 하는법 | 빵야 | 2024-05-30 |
2656525 | vb2008에서 6.0으로 변환중에 이런오류가 나네요...왜이런지; (1) | 비사벌 | 2024-05-29 |
2656466 | 맥북의 장점이 무엇인가요? (4) | 티나 | 2024-05-29 |
2656436 | [제작의뢰]간단한 자바 프로그램. (1) | 참이 | 2024-05-28 |
2656408 | 자바 객체 생성에 관한 질문입니다. | 해비치 | 2024-05-28 |
2656382 | 혹시 맥북환경에서 test 하시는분 계신가요? (1) | 달달한캔디 | 2024-05-28 |
2656332 | 도움이 될까해서 글을올립니다(avada 테마관련) (1) | 계획자 | 2024-05-27 |
2656271 | html5에서 div와 section의 용도차이가.. (2) | 한추렴 | 2024-05-27 |
2656239 | 자바에서 stack메모리와 heap메모리란 무엇입니까? (2) | 나봄 | 2024-05-27 |
2656131 | 문자열 출력;; (1) | 서향 | 2024-05-26 |