HTML 초보 템플릿 작성 방법 : 행간격, 줄간격, 행간 너비 조정, 넓히는 방법

html로 템플릿을 제작할 때, 쉽게 놓치는 부분이 행간이다. 행간격, 줄과 줄 사이의 간격이라고 이해하면 되는 행간은 가시성에 큰 영향을 미치므로 반드시 한번 체크하고 작업을 완료하는 게 좋다.

 

오늘은 html 행간 너비 넓히는 방법을 알아보려고 한다.

행간 조절 : line-height

line-height 입력하지 않은 경우

먼저 입력하지 않은 경우에는 아래 이미지에서 확인 가능하듯 다소 좁은 행간으로 표시된다. 브라우저 환경에 따라 조금씩 다를 수 있어 더 좁게 보이는 경우는 가시성이 떨어져 정보 전달이 약해지므로 line-height를 넣어주는 것이 좋다.

html 행간격 따로 설정 안하는 경우

 

line-height 입력하는 경우

브라우저별 관계없이 일정한 행간을 지정해 주기 때문에 더 정확한 안내를 할 수 있다. style에 넣으면 되고, 해당하는 구간 상하에 적용된다.

 

눈에 띄는 차이점을 보여주기 위해 line-height을 50으로 잡아 좀 어색할 수 있지만, 실무에서는 보통 25px로 사용한다.

 

삽입 예시 : line-height = 50px

html 행간격 따로 설정(50px)

작은 차이지만, 행간을 지정해 주면 좀 더 깔끔하게 템플릿을 정리할 수 있어 html 제작할 때 잊지 않고 삽입하는 편이다.