(CSS코딩일기) 텍스트 스타일링

앞에서 학습한 텍스트 관련 CSS 속성이외의 텍스트 스타일링에 대해 알아보겠습니다. 

1. 줄 높이 line-height

줄과 줄 사이의 간격을 조절할 때 CSS 에서는 줄의 높이로 조절합니다. 줄 높이의 값인 line-height 는 단위 없이 쓰는 글자 크기에 상대적인 값입니다. 예를 들어서 font-size 가 16px 이라면 line-height: 1 은 16px*1=16px이 되고, line-height: 1.5는 16px*1.5=24px이 됩니다. 

<p class="loose">
넓게<br>
넓게<br>
넓게
</p>

<p class="regular">
보통<br>
보통<br>
보통 
</p>

<p class="tight">
좁게<br>
좁게<br>
좁게
</p>

.loose {
 font-size: 16px;
 line-height: 1.7; /* 16px * 1.7 = 27.2px */
}

.regular {
 font-size: 16px;
 line-height: 1.5; /* 16px * 1.5 = 24px */
}

.tight {
 font-size: 16px;
 line-height: 1; /* 16px * 1 = 16px */
}

위와 같이 적용하면 나타나는 화면은 다음과 같습니다.

2. 텍스트 꾸미기 text-decoration

텍스츠에 밑줄을 넣거나, 취소선을 넣거나 하는 데 사용하는 속성입니다. 속성 값으로는 none, underline, line-through 등이 있습니다. 이 중에서도 none 은 <a> 태그에 기본으로 들어 간 밑줄을 없애는 데 많이 사용합니다.

<a href="https://codeit.kr">
링크
</a>
<br>
<a class="none" href="https://codeit.kr">
밑줄 없는 링크
</a>
<br>
<span class="underline">
밑줄
</span>
<br>
<span class="line-through">
취소선
</span>

.none {
text-decoration: none;
}

.underline {
text-decoration: underline;
}

.line-through {
text-decoration: line-through;
}

위와 같이 설정하면 나오는 화면은 다음과 같습니다.