글씨가 짤리는 버그 - HTML 태그 제대로 알고 쓰자

폰트가 짤리는 버그가 발생하였다.

후배가 티스토리 블로그의 스킨을 편집하는데 미묘하게 폰트 윗 부분이 짤리는데 원인을 모르겠다고 말해주었다.

미묘하게 짤린다.

그래서 개발자 도구와 함께 분석한 결과, 폰트 크기는 13px인데, height가 12.8px인 것이 문제였다.

 

그런데 더 근본적인 원인은 <span> 태그로만 내용물을 작성한 것이 문제이다.

 

 

MDN에 의하면 <span> 태그는 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 지정할 때 사용한다.

 

<span> 태그뿐만이 아니라 <div> 태그도

 

사실 우리가 무지성 난사하는 <div> 태그도 별로 좋지 않다.

<div> 태그 또한, 본질적으로 아무것도 나타내지 않는 콘텐츠 영역을 지정하는데 사용한다.

 

<section>
  <h2>Title</h2>
  <div>Contents1</div>
  <div>Contents2</div>
</section>

 

이를 본질적으로 생각해보자.

 

<div> 태그는 분할한다는 느낌을 가지고 있다. 구역을 나눈다고 생각할 수 있는데, 구역을 나누는 이 <div> 태그가 구역 그 자체가 되어버리면 상당히 이상하다.(물론 <div>가 구역 그 자체가 되어도 버그가 발생하지는 않는다.)

 

잘 생각해보면 <div> 태그 안에 표현할 수 있는 콘텐츠에는 텍스트, 이미지 기타 등등이 있다.

그 안에 텍스트는 <p> 태그, 이미지는 <img> 태그 등등... 이런 방식으로 표현할 수 있는데, <div> 그 자체만을 사용하는 것은 SEO 최적화를 생각해봤을때 솔직히 좋지 않은 방향이다.

 

아무튼 결론은 이렇다.

 

 

<span> 태그를 <p> 태그로 바꿔주기만 한 것으로 버그를 해결하였다.

 

 

 

근본이 없네...

 

 

후배 블로그

 

https://be-senior-developer.tistory.com

주니어 개발자의 성장기

 

참고자료

HTML 주요 요소와 속성, 한눈에 보기