글자 간격 조정을 위한 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
'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 |
댓글