[CSS] 텍스트 속성

텍스트 속성으로 텍스트 꾸미기

 
 

속성명	설명
font-family	글꼴 지정
font-size	텍스트 크기 (기본 16px)
font-weight	텍스트 굵기
font-style	글꼴 스타일
font-variant	영문 소문자를 크기가 작은 대문자로 변경
color	텍스트 색상
text-align	텍스트 정렬
text-decoration	텍스트 꾸밈
letter-spacing	자간을 지정
line-height	행간을 지정

 
 

---

1. font-family: 글꼴

 

 

• font-family:Batangche, "Times New Roman";

 

속성값으로는 글꼴명을 적으면 되는데 쉽표로 구분하고 1개 이상의 글꼴을 나열해 지정한다. 이때 한글로 된 글꼴이나 공백이 있는 글꼴명은 큰따옴표("")로 항상 감싸야 한다. 속성은 반드시 글꼴 유형을 작성하도록 권장한다.

 

글꼴 유형	설명
serif	삐침이 있는 명조 계열
sans-serif	삐침이 없고 굵기가 일정한 고딕 계열
monospace	텍스트 폭과 간격이 일정한 글꼴
fantasy	화려한 글꼴
cursive	손으로 쓴 것 같은 필기체 계열

 
 

---

2. font-size : 텍스트 크기

☑️ 16px 기본값

 
웹 브라우저의 기본 스타일 시트에 따로 텍스트가 지정된 경우(hn 태그)가 아니면 일반적인 텍스트 크기는 16px이다. 
 

---

3. font-weight : 텍스트 굵기

 

• 숫자 표기법: 100단위 (100~900)
• 키워드 표기법: light, normal(400), bold(700), bolder
• lighgter와 bolder는 상대적인 값으로 부모 요소의 굵기보다 얇게 지정되고, 굵게 지정된다.

 
☑️ 실무에서는 normal이나 bold를 주로 사용한다.

---

4. font-style : 글꼴 스타일

 
 

속성값	설명
normal	기본 형태
italic	이탤릭체
oblique	기울림꼴

 

*italic과 oblique는 웹 브라우저에서 크게 차이가 나지 않는다.
 

---

5. font-variant : 크기가 작은 대문자로 변경

 
 

속성값	설명
normal	텍스트 변환하지 않는다.
small-caps	텍스트를 크기가 작은 대문자로 변환

 
속성이 적용된 텍스트 크기는 줄어들고 소문자가 대문자로 변경된다.

 

(+ 추가)

text-transform

요소의 문자열을 대문자 또는 소문자로 표시하는 방법

[속성 값]

none
uppercase : 모든 텍스트를 대문자로 변경
lowercase : 모든 텍스트를 소문자로 변경
capitalize : 각 단어의 첫글자를 대문자로 변경

 

---

6. color : 텍스트 색상 지정

 
색상 표기법으로 색상 적용
 

---

7. text-align: 텍스트 정렬 ☑️

 
 

속성값	설명
left	왼쪽 정렬
center	중앙 정렬
right	오른쪽 정렬
justify	양쪽 정렬

 
⚠️ 단, 정렬 기준이 양쪽이다 보니 웹 브라우저 크기에 맞춰 텍스트와 텍스트 사이의 간격을 임의로 늘려서 표시한다. 웹 브라우저 크기를 바꿔 보면서 이 점을 확인해 보고 실제로 사용할 때 유의
 
 

---

8. text-decoration : 텍스트 꾸미기 ☑️

 

텍스트를 꾸며주기 위해서 사용한다. 여기서 꾸민다는 것은 텍스트에 선을 긋는 것을 말한다.

 

속성값	설명
none ✅	텍스트 장식을 모두 지운다.
line-through	텍스트 중간을 관통하는 선
overline	텍스트 위에 선
underline	텍스트 아래에 선

 
 

---

9. letter-spacing : 자간 조절

 

글자 사이의 간격을 조절할 때 사용한다. 속성값으로 normal 또는 크기를 넣을 수 있다. normal을 사용하면 웹 브라우저에서 정한 기본값을 적용한다. 크기를 너무 크게 잡으면 읽기 불편할 정도로 벌어질 수 있으니 적절히 사용해야 한다.
 
 

---

10. line-height : 행간  조절 ⭐✖️5

 

 
- 텍스트 한 줄의 높이를 지정할 때 사용하는 속성
- 속성값으로 normal이나 숫자, 퍼센트, 크기 등을 넣을 수 있다.
- 모든 텍스트는 웹 브라우저에 표시될 때 위쪽과 아래쪽으로 일정 크기의 여유 공간을 가진다.
- 이런 여유 공간을 전부 포함한 글줄 사이의 간격을 행간이라고 하며, 속성으로 제어 가능하다.
- line-height가 font-size보다 작으면 윗줄과 아랫줄의 텍스트가 겹쳐 보이면서 가독성이 떨어질 수 있으므로 항상 line-height가 font-size보다 큰 것이 좋다.
 

line-height:normal;	/*웹 브라우저에서 정한 기본값, 보통 1.2*/
line-height:1;		/*현재 font-size 값의 1배*/
line-height:1.5		/*1.5배*/
line-height:200%	/*현재 font-size의 2배*/
line-height:16px

 
💡CSS는 세로축 중앙 정렬을 맞출 수 없기 때문에 꼼수를 쓴다.
 
❓ 어떻게? 예들 들면 height: 50px; line-height: 50px;을 맞춰서 세로축 중앙 정렬 해준다.