폰트 굵기 바꾸기
- font-weight 속성을 사용해 간단하게 변경 가능
- 속성값으로는 normal,bold등이 있다.
See the Pen 폰트 굵기 바꾸기 by 신범식 (@ulqsqjpw-the-solid) on CodePen.
폰트 크기 바꾸기
- font-size 속성을 사용해 크기 변경 가능
- px: 픽셀 단위로 폰트 크기 설정
- rem: 최상위 부모인 <html>을 기준으로 폰트 크기 설정
- em: 부모 요소를 기준으로 폰트 크기를 설정
See the Pen Untitled by 신범식 (@ulqsqjpw-the-solid) on CodePen.
폰트 모양 바꾸기
- font-family 속성을 사용해 폰트 모양 변경 가능
- 한글 폰트는 큰 따옴표로 감싸서 표기
- 영어 폰트는 큰 따옴표로 감싸지 않아도됨
See the Pen 폰트 모양 바꾸기 by 신범식 (@ulqsqjpw-the-solid) on CodePen.
폰트 색상 바꾸기
- color 속성을 사용해 폰트 색상 변경 가능
See the Pen 폰트 색상 바꾸기 by 신범식 (@ulqsqjpw-the-solid) on CodePen.
텍스트 줄 간격 바꾸기
- line-height 속성을 사용해 텍스트 줄 간격 변경 가능
- font-size는 텍스트 자체의 높잇값을 의미
- line-height는 줄 간격 전체 높잇값을 나타냄
See the Pen 텍스트 줄 간격 바꾸기 by 신범식 (@ulqsqjpw-the-solid) on CodePen.
텍스트 정렬 방향 지정하기
- text-align 속성을 사용하여 텍스트 정렬 방향 변경 가능
See the Pen 텍스트 정렬 방향 지정하기 by 신범식 (@ulqsqjpw-the-solid) on CodePen.
텍스트 자간 지정하기
- letter-spacing 속성을 사용해 텍스트의 자간 변경 가능
See the Pen 텍스트 자간 지정하기 by 신범식 (@ulqsqjpw-the-solid) on CodePen.
'FE > 인터렉티브 웹' 카테고리의 다른 글
| 웹 페이지의 배경 꾸미기 (0) | 2023.09.27 |
|---|---|
| 웹 페이지에서 영역별 크기 정하기 (0) | 2023.09.25 |
| CSS로 HTML 요소 다양하게 선택하기 (0) | 2023.09.23 |
| HTML에 CSS 연결하기 (0) | 2023.09.20 |
| 비디오 ·오디오 태그 - 멀티미디어 콘텐츠 삽입하기 (0) | 2023.09.19 |