[HTML/CSS] 글자 간격(자간), 줄 간격(행간) 조정하기
- Web/HTML, CSS
- 2023. 1. 10.
웹 문서에서 장문의 텍스트를 작성하다 보면 자간과 행간이 적절하지 않아 문장의 가독성에 악영향을 미치는 경우가 종종 있는데요. 이럴 때는 HTML과 CSS를 활용하여 글자와 행의 간격을 조절해줄 수 있습니다. 이번 포스팅에서는 웹 문서에서 자간과 행간을 조절하는 방법에 대해 알아보도록 하겠습니다.
자주 쓰는 크기 단위
- em : font_size, 해당폰트의 대문자 M의 너비를 기준으로 함.
- rem : root em, HTML 문서의 root 요소인 <html>에 지정된 크기를 기준으로 상대적인 값을 가지게 됨
- ex : x-height, 해당폰트의 소문자 x의 높이를 기준으로 함.
- px : pixel, 표시장치(모니터)에 따라서 상대적인 크기를 가짐.
- % : percent, 기본글꼴의 크기에 대하여 상대적인 값을 가짐.
- pt : point, 일반 문서(워드 등)에서 많이 사용하는 단위
자간 설정하기
- letter-spacing : 글자 사이의 간격 (자간)
- letter-spacing : normal;
- letter-spacing : 1px;
- letter-spacing : -1px;
- letter-spacing : 2em;
- letter-spacing : .2rem;
※ 단위는 가능하면 em으로 지정하는것이 좋습니다. 그래야만 바뀌는 글꼴에 맞추어 자간이 유지되기 때문입니다.
Html
See the Pen 자간 설정하기 1 by wjdxo513 (@wjdxo513) on CodePen.
CSS
See the Pen 자간 설정하기2 by wjdxo513 (@wjdxo513) on CodePen.
어간 설정하기
- word-spacing : 단어 사이의 간격(어간)
- word-spacing : normal;
- word-spacing : 1px;
- word-spacing : -1px;
- word-spacing : 2em;
- word-spacing : .2rem;
Html
See the Pen 어간 설정하기 1 by wjdxo513 (@wjdxo513) on CodePen.
CSS
See the Pen 어간설정하기 2 by wjdxo513 (@wjdxo513) on CodePen.
행간 설정하기
- line-height : 행 사이의 간격 (행간)
- line-height : normal;
- line-height : 2.5;
- line-height : 30px;
- line-height : 3em;
- line-height : 150%;
Html
See the Pen 행간 설정하기1 by wjdxo513 (@wjdxo513) on CodePen.
CSS
See the Pen 행간설정하기2 by wjdxo513 (@wjdxo513) on CodePen.
'Web > HTML, CSS' 카테고리의 다른 글
| [HTML/CSS] 글자색 변경하기 (font-color) (1) | 2023.01.13 |
|---|---|
| [HTML/CSS] 글자 크기 조절하기 (font-size) (1) | 2023.01.12 |
| [CSS] 가상 클래스 선택자에 대하여(+가상요소 선택자) (2) | 2023.01.09 |
| [CSS] 복합 선택자(Combinators)에 대하여 (일치, 자식, 후손, 인접형제, 일반형제) (3) | 2023.01.07 |