한눈에 보는 정의
글자 줄과 줄 사이의 세로 간격. CSS에서는 line-height 속성으로 정한다.
이런 말로 들어요
- 본문 행간을 조금 더 띄우면 모바일에서 훨씬 편하게 읽혀요.
- 제목은 두 줄이 돼서 행간을 좁혔습니다.
그림으로 보기
같은 문장도 행간에 따라 읽기 편한 정도가 달라집니다. 본문은 글자 크기의 1.5배 안팎을 많이 쓰고, 단위 없는 숫자로 지정합니다.
하캄솔루션 자체 제작 설명도식자세히 알아보기
행간이 좁으면 줄이 붙어 보여 긴 글을 읽기 어렵고, 너무 넓으면 문단이 흩어져 보입니다. 본문은 글자 크기의 1.5배 안팎을 많이 쓰고, 큰 제목은 그보다 좁게 잡습니다. CSS에서는 단위 없이 1.6처럼 숫자로 적으면 글자 크기가 바뀌어도 비율이 유지됩니다. 웹 접근성 지침은 사용자가 행간을 글자 크기의 1.5배 이상으로 늘려도 내용이 잘리거나 겹치지 않아야 한다고 봅니다.
실무 예시
예를 들어 칼럼 본문이 빽빽해 보인다면 line-height를 1.4에서 1.7로 늘리고, 같은 페이지의 큰 제목은 1.25 정도로 줄여 위계를 맞춥니다.
함께 살펴볼 점
행간을 고정 높이(px)로 정한 상자에 글을 넣으면 사용자가 글자를 키웠을 때 잘릴 수 있습니다. 숫자 비율로 지정하고 상자 높이는 내용에 맞게 늘어나게 둡니다.
AI에게 이렇게 요청해 보세요
칼럼 본문의 line-height를 단위 없는 1.7로, h1·h2 제목은 1.25로 맞추고 모바일에서도 같은 비율이 유지되게 CSS를 고쳐 줘.
코딩·작성 도구에 붙여 쓰기 전에 내 상황에 맞게 바꾸고, 결과는 직접 확인하세요.출처와 검토 정보
- line-height - MDN Web Docs 새 창
line-height 속성의 쓰임과 단위 없는 숫자 값을 확인했습니다.
자료 확인 - Understanding SC 1.4.12: Text Spacing (WCAG 2.2) 새 창
행간을 글자 크기의 1.5배 이상으로 바꿔도 내용·기능이 사라지지 않아야 한다는 기준을 확인했습니다.
자료 확인
내용 검토
최초 발행 · 내용 수정