텍스트 스타일은 사용하는 글자의 모양새를 지정하는 글꼴 스타일과 웹 문서에 표시되는 텍스트를 지정하는 문단 스타일이 있다.
2. line-height 프로퍼티
텍스트의 높이를 지정한다. 한 문단이 두 줄이 넘으면 줄 간격이 생긴다. 줄 간격이 너무 좁거나 넓으면 가독성이 떨어진다. 이때 line-height 속성을 이용하면 줄 간격을 원하는 만큼 조절할 수 있다.
<!DOCTYPE html>
<html>
<head>
<style>
.small {
line-height: 70%;
}
.large {
line-height: 1.5;
}
.x-large {
line-height: 3;
}
</style>
</head>
<body>
<p>
기본 줄 간격<br />
기본 줄 간격<br />
</p>
<p class="small">
좁은 줄 간격<br />
좁은 줄 간격<br />
line-height: 70%
</p>
<p class="large">
큰 줄 간격<br />
큰 줄 간격<br />
line-height: 1.5
</p>
<p class="x-large">
매우 큰 줄 간격<br />
매우 큰 줄 간격<br />
line-height: 3
</p>
</body>
</html>
다음은 수직 중양 정렬 예제이다. a요소의 line-height 값과 a요소를 감싸는 div 요소의 height 값을 일치시킨다.
white space는 공백(space), 들여쓰기(tab), 줄바꿈(line break)을 의미한다. html은 기본적으로 연속된 공백, 들여쓰기는 1번만 실행되며 줄바꿈은 무시된다. 또한 텍스트는 부모의 가로 영역을 벗어나지 않고 자동 줄바꿈(wrap)된다. white-space 프로퍼티는 이러한 기본 동작을 제어하기 위한 프로퍼티다.
프로퍼티
line break
space/tab
wrapping(자동줄바꿈)
normal
무시
1번만 반영
O
nowrap
무시
1번만 반영
X
pre
반영
그대로 반영
X
pre-wrap
반영
그대로 반영
O
pre-line
반영
1번만 반영
O
<!DOCTYPE html>
<html>
<head>
<style>
body {
display: grid;
grid-template-columns: 1fr 1fr;
}
div {
width: 150px;
height: 150px;
border: 1px solid blueviolet;
margin-bottom: 120px;
}
h3 {
margin: 0;
}
.nomal {
white-space: normal;
}
.nowrap {
white-space: nowrap;
}
.pre {
white-space: pre;
}
.pre-wrap {
white-space: pre-wrap;
}
.pre-line {
white-space: pre-line;
}
</style>
</head>
<body>
<div class="nomal">
<h3>normal</h3>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore quo hic
aspernatur deserunt veritatis nemo, facilis totam autem laborum tempora
distinctio quae cum ut maxime obcaecati eligendi porro vitae praesentium.
</div>
<div class="nowrap">
<h3>nowrap</h3>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore quo hic
aspernatur deserunt veritatis nemo, facilis totam autem laborum tempora
distinctio quae cum ut maxime obcaecati eligendi porro vitae praesentium.
</div>
<div class="pre">
<h3>pre</h3>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore quo hic
aspernatur deserunt veritatis nemo, facilis totam autem laborum tempora
distinctio quae cum ut maxime obcaecati eligendi porro vitae praesentium.
</div>
<div class="pre-wrap">
<h3>pre-wrap</h3>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore quo hic
aspernatur deserunt veritatis nemo, facilis totam autem laborum tempora
distinctio quae cum ut maxime obcaecati eligendi porro vitae praesentium.
</div>
<div class="pre-line">
<h3>pre-line</h3>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore quo hic
aspernatur deserunt veritatis nemo, facilis totam autem laborum tempora
distinctio quae cum ut maxime obcaecati eligendi porro vitae praesentium.
</div>
</body>
</html>
7. text-overflow 프로퍼티
부모 영여긍ㄹ 벗어난 wrapping(자동줄바꿈)이 되지 않은 텍스트의 처리 방법을 정의한다.
조건
width 프로퍼티가 지정되어 있어야 한다. 이를 위해 필요한 경우 block레벨 요소로 변경해야 한다.
word-wrap 프로퍼티와 같이 한 단어의 길이가 길어서 부모 영역을 벗어난 텍스트의 처리 방법을 정의한다. word-wrap 프로퍼티 경우 단어를 어느 정도는 고려하여 개행하지만 word-break: break-all;는 단어를 고려하지 않고 부모 영역에 맞추어 강제 개행한다.
text관련 프로퍼티도 많이 사용을 했지만 white-space, text-overflow, word-wrap, word-break 프로퍼티는 티처캔을 만들 때만 사용하여 익숙하지 않는 프로퍼티이다. 그만큼 다른 프로퍼터에 비해 비중이 떨어지는 거 같다. 하지만 웹 페이지를 만들면서 필요한 상황이 올 수 있기에 해당 프로퍼티의 특징을 잘 알아두고 있자.
