[HTML] 요소 사이의 공백과 해결법
HTML의 요소 중 'inline-block' 태그에는 문제가 있다.
요소 사이에 공백이 발생한다는 것이다.
See the Pen Untitled by 양파 (@kdorigyj-the-sans) on CodePen.
코드의 문법에 따라 다른 결과가 나타난다.
'span1'과 'span2'는 붙어 있는 반면에 'span3'와 'span4' 사이에는 공백이 있다.
공백이 나타나는 현상은 <span> 태그뿐만 아니라 <img>, <video> 등에서도 나타난다.
요소 사이에 공백이 발생하는 현상은 CSS로 요소들의 속성을 선언할 때에 어려움을 줄 수 있다.
위 코드의 첫 번째 줄처럼 한 줄에 태그를 이어 붙이면 공백을 없앨 수 있지만 가독성이 떨어진다.
이 문제를 해결할 수 있는 방법은 다음과 같다.
한 줄처럼 만들기
- 다음 줄에서 태그 닫기
<span>span1</span
><span>span2</span
><span>span3</span>
- 태그 사이에 주석을 넣기
<span>span1</span><!--
--><span>span2</span><!--
--><span>span3</span>
두 경우 모두 줄바꿈을 이용하여 HTML이 한 줄처럼 인식할 수 있도록 만든 것이다.
하지만 이 방법을 사용하는 것을 권장하지 않는다고 한다.
부모 요소 글꼴 크기 0으로 만들기
부모 요소의 'font-size'를 0px로 설정한다.
<div>
<span>span1</span>
<span>span2</span>
</div>
div {
font-size: 0px;
}
span {
font-size: 1rem;
}
공백은 결과적으로 텍스트이기 때문에 글꼴 크기를 0으로 지정하면 없어진다.
하지만 하위 요소의 글꼴 크기를 다시 설정해야 한다는 번거로움이 생긴다.
직접적으로 공백 없애기
요소의 'margin'에 공백 크기만큼의 음수 값을 부여한다.
span {
margin-right: -4px;
}
공백을 정확하게 없애지는 않더라도 확실하게 없앨 수 있는 방법이다.
위치 관련 속성 사용하기
요소의 위치를 유연하게 설정할 수 있는 CSS 속성을 이용한다.
- 'float' 사용
span {
float: left;
}
- 'flex' 사용
body {
display: flex;
}
공백이 문제가 되는 것은 요소의 위치나 크기를 나타낼 때에 정확한 값을 계산하기 힘들기 때문이다.
하지만 위와 같이 요소의 위치를 유연하게 설정할 수 있는 속성을 사용할 때 자동적으로 공백을 고려할 필요가 없어진다.
'Web > HTML' 카테고리의 다른 글
[HTML] <button>이 <form> 안에 있는 경우 (1) | 2023.11.15 |
---|---|
[HTML] 특수문자 엔티티(Entity)와 예약어(Reserved Word) (0) | 2023.11.01 |
[HTML] HTML5와 <!DOCTYPE> 선언의 이유 (15) | 2023.10.31 |
[HTML] 기본 구조 (0) | 2023.10.30 |
[HTML] 파일 열기 (0) | 2023.10.30 |