개발자도전
16. CSS - 레이아웃 - 글자 관련 스타일 본문
728x90
- color : 글자 색을 지정하는 속성
- 작성법 1 : 색상명(영문)
- 작성법 2 : 16진수 숫자 ( ex- #fff, #ffffff)
- 작성법 3 : rgb(255, 255, 255)
- 작성법 4 : rgba(255, 255, 255, 255)
- 작성법 5 : hsl(360, 100%, 100%)
- 작성법 6 : hsla(360, 100%, 100%, 100%, 1)
- 16진수 ( 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f)
- rgb(빛의 3원색), hsl(색조, 채도, 밝기)
- rgba, hsla에서 a는 투명도( 0(투명) ~ 1(불투명) )
- 6가지의 색 지정 방식은 모든 색상 관련 속성에서 사용 가능
| HTML 작성 화면 | ![]() |
| CSS 작성 화면 1. - 글씨 크기와 굵기 지정 |
![]() |
| CSS 작성 화면 2. - 각각 다른 방법으로 글자색 지정 |
![]() |
| 웹에서 출력된 화면 | ![]() |
- 텍스트에 줄을 긋는 속성
- 아랫줄 긋기, 중간줄 긋기, 윗줄 긋기, 밑줄 없애기
| HTML 작성 화면 | ![]() |
| CSS 작성 화면 | ![]() |
| 웹에서 출력된 화면 | ![]() |
- text-align
- 내부에 작성된 글 또는 inline요소를 정렬하는 속성
- text-align은 display가 inline인 경우 적용되지 않음.
| HTML 작성 화면 | ![]() |
| CSS 작성 화면 | ![]() |
| 웹에서 출력된 화면 | ![]() |
- line-height
- 줄 간격(장평)을 지정하는 속성
- 한 줄의 높이를 지정하는 속성(줄 사이의 간격 지정 X)
- 줄 높이가 글자의 크기보다 큰 경우 글자는 해당 줄 세로 가운데 배치된다.
| HTML 작성 화면 | ![]() |
| CSS 작성 화면 | ![]() |
| 웹에서 출력된 화면 | ![]() |
- letter-spacing
- 글자 사이 간격(자간) 지정 속성
- 음수 값을 지정해서 글자 사이의 간격을 줄일 때 많이 사용
| HTML 작성 화면 | ![]() |
| CSS 작성 화면 | ![]() |
| 웹에서 출력된 화면 | ![]() |
728x90
'CSS3' 카테고리의 다른 글
| 18. CSS - 레이아웃 - 변형 관련 스타일 (0) | 2022.10.11 |
|---|---|
| 17. CSS - 레이아웃 - 글꼴 관련 스타일 (0) | 2022.10.10 |
| 15. CSS - 레이아웃 - position (0) | 2022.10.10 |
| 14. CSS - 레이아웃 - float를 이용한 분할 (0) | 2022.10.10 |
| 13. CSS - 레이아웃 - 요소 정렬 스타일(float/clear) (0) | 2022.10.10 |
Comments















