[CSS] 폰트와 텍스트

---

1.font-size

텍스트 사이즈

<a style="font-size: 30;">aa</a>

aa

 

 

 

 

 

 

 

2.font-family

폰트지정

<style>
    .times{
        font-family: "Times New Roman", Times, serif;
    }
</style>


<p class="times">times</p>

times

 

 

 

 

3. font-style 

이탤릭체(기울임)지정

<p style="font-style: italic;">기울어짐</p>

기울어짐

 

 

 

 

 

 

4.font-weight

폰트 굵기 지정

<p style="font-weight: lighter;">얇음</p>
<p style="font-weight: bolder;">두꺼움</p>
<p style="font-weight: 1000;">1000</p>

얇음

두꺼움

1000

 

 

 

 

5.line-height

텍스트 높이지정

<p style="line-height: 10%;">높이지정</p>
<p style="line-height: 3;">높이지정</p>

높이지정

높이지정

 

 

 

6.letter-spacing

글자 간격 지정

<p style="letter-spacing: 11;">글자사이간격?</p>

 

 

 

 

7.text-align

텍스트 수평 정렬

<p style="text-align: center;">가운데</p>
<p style="text-align: right;">오른쪽</p>
<p style="text-align: left;">왼쪽</p>
<p style="text-align: justify">양쪽 맞춤</p>

가운데

오른쪽

왼쪽

양쪽 맞춤

 

 

 

 

8.text-decoration

링크 underline 제거가능, 텍스트에 underline,overline,line-through 추가가능

<p style="text-decoration: underline;">밑줄</p>
<p style="text-decoration: overline;">윗줄</p>
<p style="text-decoration: line-through;"p>찍찍</p>

밑줄

윗줄

찍찍

 

 

 

 

9.white-space

공백,들여쓰기, 줄바꿈을 어떻게 반영할지 결정시킨다.

 

	line break	space/tab	자동줄바꿈
normal	무시	1번만 반영	O
nowrap	무시	1번만 반영	X
pre	반영	그대로 반영	X
pre-wrap	반영	그대로 반영	O
pre-line	반영	1번만 반영	O

 

 

 

10.text-overflow

부모영역을 벗어난 텍스트 처리방법

clip	표시X
ellipsis	텍스트를 잘라내고 (…)표시

 

 

 

 

11. word-wrap

단어 길이가 부모 영역을 벗어날때 처리방법

 

 

 

12. word-break

단어 길이가 부모 영역을 벗어날때 처리방법
단어를 고려하지 않고 부모 영역에 맞추어 강제 개행한다.

 

 

 

 

 

 

---

🎈참고자료

https://poiemaweb.com/css3-font-text#9-white-space-%ED%94%84%EB%A1%9C%ED%8D%BC%ED%8B%B0