Web/CSS
[CSS] 속성 - 글꼴, 문자
UL :)
2020. 1. 28. 16:39
font : 글자 관련 속성들을 지정. 단축 속성
| 값 | 의미 | 기본값 |
| font-sytle | 글자 기울기 지정 | normal |
| font-weight | 글자 두께 지정 | normal |
| font-size | 글자 크기 지정 | medium(16px) |
| line-height | 줄 높이(줄 간격) 지정 | normal(Reset.css 적용시 약 1) |
| font-family | 글꼴 지정 | 운영체제(브라우저)에 따라 달라짐 |
사용법 * 단축 속성을 사용하려면 font-size와 font-family를 필수로 입력해야 함
font: 기울기 두께 크기 / 줄높이 글꼴; /* 크기와 줄높이는 슬래쉬로 구분! */
.box{
font: italic bold 20px / 1.5 "Arial", sans-serif;
}
font-sytle 의 개별속성
| 값 | 의미 | 기본값 |
| normal | 스타일 없음 | normal |
| italic | 이텔릭체(활자) | |
| oblique | 기울어진 글자 |
oblique보단 italic 사용
font-size 의 개별속성
| 값 | 의미 | 기본값 |
| 단위 | px,em,cm | 16px |
| % | 부모요소의 비율로 지정 | |
| xx-small | 가장 작은 크기 | |
| x-small | 더 작은 크기 | |
| small | 작은 크기 | |
| medium | 중간 크기 | medium |
| large | 큰 크기 | |
| x-large | 더 큰 크기 | |
| xx-large | 가장 큰 크기 | |
| smaller | 부모요소보다 작은 크기 | |
| larger | 부모요소보다 큰 크기 |
%는 대체로 em으로 대체해서 쓰는 것을 추천. 웬만하면 불명확한 단위보다는 px 사용하기를 권고
line-height 의 개별속성
| 값 | 의미 | 기본값 |
| normal | 브라우저의 기본 정의 사용 | normal |
| 숫자 | 요소 자체 글꼴 크기의 배수로 지정 | |
| 단위 | px,em,cm | |
| % | 요소 자체 글꼴 크기의 비율로 지정 |
숫자(1.4~1.7배를 권고)와 단위 가장 많이 사용.
line-height = 폰트사이즈 + 2x
font-family의 개별속성
| 값 | 의미 | 기본값 |
| 글꼴이름 | 글꼴 후보 목록 지정 | |
|
serif (바탕체) sans-serif(고딕체) monospace cursive(필기체) fantasy(장식) |
후보목록 실패할경우 글꼴 계열 이름 지정 | |
사용법 * 글꼴 계열 필수 입력
font-family: [글꼴후보1, 글꼴후보2...], 글꼴계열;
.box{
font-family: Arial, "Open Sans", "돋움", dotum, snas-serif;
}웹에서 사용하기엔 폰트 용량이 크므로, 폰트 후보들을 지정해주면 그 중 사용자 브라우저에 있는 글꼴로 지정이 되어서 보여짐
웹폰트(웹에 맞게 경량화된 폰트)를 제공하면 사용자게에 무조건 그 폰트를 보여줄 수도 있다.
color : 문자의 색상을 지정
| 속성 값 | 의미 | 기본값 |
| 색상 | 문자의 색상을 지정 | rgb(0,0,0) |
색상 표현
| 표현 | 의미 | 예시 |
| 색상이름 | 브라우저에서 제공하는 색상이름 | red, blue |
| Hex 색상코드 | 16진수 색상 | #000000 |
| RGB | 빛의 삼원색 | rgb(255,255,255) |
| RGBA | 빛의 삼원색, 투명도 | rgba(255,0,0, .5) |
| HSL | 색상,채도,명도 | hsl(120,100%, 50%) |
| HSLA | 색상,채도,명도,투명도 | hsla(120,100%, 50%, .3) |
*RGBA(Red, Green, Blue, Alpha channel) *HSLA(Hue, Saturation, Lightness, Alpha Channel)
실무에서는 Hex 색상코드,RGB,RGBA를 굉장히 많이 사용
text-align : 문자 정렬 방식 지정
| 속성 값 | 의미 | 기본값 |
| left | 왼쪽 정렬 | |
| right | 오른쪽 정렬 | |
| center | 가운데 정렬 | |
| justify | 양쪽 맞춤(2줄 이상에서 동작) |
left가 기본값, direction 속성으로 기본값 변경가능
text-decoration : 문자의 장식(선) 설정
| 속성 값 | 의미 | 기본값 |
| none | 선 없음 | none |
| underline | 밑줄을 지정 | |
| overline | 윗줄을 지정 | |
| line-through | 중앙 선(가로지르는)을 지정 |
text-indent : (첫번째 줄)의 들여쓰기를 지정
음수 값 사용하면 첫번째 줄이 내어쓰기 됨
| 속성 값 | 의미 | 기본값 |
| none | 선 없음 | none |
| underline | 밑줄을 지정 | |
| overline | 윗줄을 지정 | |
| line-through | 중앙 선(가로지르는)을 지정 |
문자를 화면 밖으로 밀어내는 역할도 함
letter-spacing : 문자의 자간(글자 사이 간격) 지정
음수 값 사용 가능
| 속성 값 | 의미 | 기본값 |
| normal | 단어 사이의 일반 간격 | normal (거의 0) |
| 단위 | px,em,cm |
word-spacing : 단어 사이(띠워쓰기)의 간격 지정
기본적인 띄워쓰기 + 값 설정. 띄워쓰기 없애기 불가능
| 속성 값 | 의미 | 기본값 |
| normal | 단어 사이의 일반 간격 | normal |
| 단위 | px,em,cm |