[CSS] font(텍스트) 관련 스타일 총 정리

HTML 텍스트에 스타일을 적용하는 방법에 대해 알아보겠습니다.

텍스트의 용도, 쓰임새에 따라 스타일을 적용할 일이 생깁니다.

예를 들어 제목의 글씨 크기와 본문의 글씨 크기를 다르게 해야하는 경우가 있습니다.

아래 포스팅을 참고하여 폰트 스타일을 적용해보시기 바랍니다.

 

---

 

1. 폰트 적용하기

font-family: '맑은 고딕', '새바탕', sans-serif;

- 기본으로 제공하는 폰트가 있지만, 다른 폰트를 적용하기 위해서는 폰트 파일이 필요합니다.

- 폰트를 적용하는 css 코드는 위와 같습니다.

- 저는 맑은 고딕, 새바탕, sans-serif 폰트를 적용했습니다.

 

 

2. 글자 크기 바꾸기

font-size: 20px;

- 글씨 크기를 20 픽셀로 지정했습니다.

 

 

3. 글자 색깔 바꾸기

 

- 기본 제공 컬러 이용

color: blue;

 

- RGB 컬러 적용

color: #646464;

 

 

- RGBA 컬러 적용

color: rgba(100, 100, 100, 0.6);

 

 

 

4. 글자 배경 색깔 바꾸기

background-color: purple;

- 위 코드는 기본으로 제공되는 컬러를 적용한 것입니다.

- 3번처럼 RGB, RGBA 컬러를 적용할 수 있습니다.

 

 

5. 글자 굵기 지정

font-weight: bold;

- HTML 태그 중 <b> 태그와 동일하게 적용됩니다.

- 600, 700, 800 등의 숫자로 글자 굵기를 적용할 수도 있습니다.

 

 

6. 폰트 스타일 바꾸기

font-style: italic; 

- 기본적으로 normal이 적용된 상태이고, 위 코드는 italic을 적용한 코드입니다.

 

 

 

이상으로 CSS로 텍스트에 스타일을 넣는 방법에 대해 알아보았습니다.

 

---