본문 바로가기
CSS

[CSS] 글자 간격 조정

by Andro07 2019. 11. 27.
728x90
반응형

글자 간격 조정을 위한 CSS 프로퍼티 몇 가지를 소개해 보겠습니다. letter-spacing, line-height라는 프로퍼티들인데요. letter-spacing은 자간, line-height는 행간을 조정한다고 보시면 되겠습니다.

letter-spacing의 속성값으로는 기본 normal, initial부터 부모로부터 상속되는 inherit까지, 그리고 양수부터 음수까지의 값들이 올 수 있습니다.

line-height의 속성값도 위와 비슷한 유형의 값들이 오긴 하지만, 다양한 단위가 올 수 있다는 조금 다른 점이 있습니다. 

예시로,

line-height: normal; //디폴트값

line-height: initial; //초기값(디폴트값)

line-height: inherit; //부모요소로부터 상속된 값

위의 경우는 보편적인 속성값이라 할 수 있습니다.

line-height: 2px;

line-height: 100%;

line-height: 1.5;

위와 같이 px, %의 단위와 함께 쓰이기도 하고, 심지어는 그냥 속성값으로 숫자만 들어올 수도 있습니다.

 

+ 추가로, 문단 사이의 길이를 조정하고 싶은데 위의 방법이 먹히지 않는다면, height 속성을 이용해서라도 행간을 조정하는 방법도 있습니다.

(예시로는) height: 5vw; (가 있습니다.)


https://www.w3schools.com/cssref/pr_text_letter-spacing.asp

https://www.w3schools.com/cssref/pr_dim_line-height.asp

 

728x90
728x90

'CSS' 카테고리의 다른 글

[ CSS ] @keyframes 애니메이션 효과  (0) 2020.04.05
[CSS] display: inline-block;  (0) 2019.11.27
[CSS] CSS 단위(unit) : vw  (0) 2019.11.27
[CSS] vertical-align  (0) 2019.11.25
[CSS] ::after & ::before  (0) 2019.11.24

댓글