1. font, font-style
1. font
글자 관련 속성들을 지정(단축)
| 값 | 의미 | 기본값 |
|---|---|---|
| font-style | 글자 기울기 지정 | normal |
| font-weight | 글자 두께 지정 | normal |
| font-size | 글자 크기 지정 | medium(16px) |
| line-height | 줄 높이(줄 간격)지정 | normal(reset.css 적용시'1' |
| font-family | 글꼴(서체)지정 | 운영체제(브라우저)에 따라 달라짐 |
line-height에서 줄 간격으로 이해하면 약간 오해의 소지가 있으며 줄 높이로 이해하면 된다.
💡사용법
font: 기울기 두께 크기 /줄높이 글꼴;
.box{
font:italic bold 20px / 1.5 "Arial", sans-serif;
}에러에 대한 예제)
.box{
font: 30px / 1.5; /*Error*/
font: bold; /*Error*/
font: bold sans-serif; /*Error*/
font: 30px / 1.5 sans-serif;
font:bold 30px sans-serif;
font: italic 30px / 1.5 "Arial", sans-serif;
}
- '/'가 들어가는 간단한 이유는 크기, 줄높이는 단위가 들어갈 수 있는데 단축속성의 경우 어떤 것이 크기고 줄높이인지 알 수 없기 때문에 '/'로 구분해주는 것이다. 일반적으로 띄어쓰기로 하지만 font같은 경우 다르다.
- font라는 단축속성을 사용하기 위해서는 기본적으로
font-size와font-family를 필수로 입력해야 한다.
2. font-style
글자 스타일(기울기)을 지정(개별)
| 값 | 의미 | 기본값 |
|---|---|---|
| normal | 스타일 없음 | normal |
| italic | 이텔릭체(활자) | |
| oblique | 기울어진 글자 |
2. font-weight
글자의 두께(가중치)를 지정(개별)
| 값 | 의미 | 기본값 |
|---|---|---|
| normal | 기본 글자 두께, 400과 동일 | normal(400) |
| bold | 글자 두껍게, 700과 동일 | |
| border | 부모(상위)요소보다 더 두껍게(bold보다 두껍다는 개념이 아님) | |
| lighter | 부모(상위)요소보다 더 얇게 | |
| 숫자 | 100부터 900까지의 100단위의 숫자 9개, normal과 bold이외의 두께를 제공하는 글꼴(서체)을 위한 설정 |
💡일반적인 두께의 이름
font-weight의 각 값은 일반적으로 다음과 같은 글꼴의 이름으로 표현됨
| 값 | 의미 | - |
|---|---|---|
| 100 | Thin(Hairline) | |
| 200 | Extra Light(Ultra Light) | |
| 300 | Light | |
| 400 | Normal | |
| 500 | Medium | |
| 600 | Semi Bold(Demi Bold) | |
| 700 | Bold | |
| 800 | Extra Bold(Ultra Bold) | |
| 900 | Black(Heavy) |
숫자가 작을수록 얇아지고 숫자가 클수록 두꺼워진다
3. font-size
글자의 크기를 지정(개별)
| 값 | 의미 | 기본값 |
|---|---|---|
| % | 부모(상위)요소의 비율로 지정 | |
| xx-small | 가장 작은 크기 | |
| x-small | 더 작은 크기 | |
| small | 작은 크기 | |
| medium | 중간 크기 | |
| large | 큰 크기 | |
| x-large | 더 큰 크기 | |
| xx-large | 가장 큰 크기 | |
| smaller | 부모(상위)요소보다 작은 크기 | |
| larger | 부모(상위)요소보다 큰 크기 |
4. line-height
줄 높이 (줄 간격)지정(개별)
| 값 | 의미 | 기본값 |
|---|---|---|
| normal | 브라우저의 기본 정의를 사용(1~1.4) | normal |
| 숫자 | 요소 자체 글꼴 크기의 배수로 지정 | |
| 단위 | px,em,cm등 단위로 지정 | |
| % | 요소 자체 글꼴 크기의 비율로 지정 |
- 정확한 line-height에 대해서 이해하고자 한다면, 위아래 두 줄의 글에서 그 사이의 값이 아니라 기본적으로 한 줄에 들어간 16px의 값에서 그 위아래로 추가의 값이 들어간 것이 line-height의 영역이다.
- 만약 특별한 글꼴의 몇배정도 line-height의 값을 입력하고자 한다면 픽셀단위도 맞지만 숫자로써 배수를 표현할 수 있다.
ex)'line height:2;'로 입력하면 된다.- 2번의 경우 숫자의 크기를 조정하고자 할때 편하게 이용할 수 있다. 픽셀단위로 하면 또 계산을 해야하기 때문이다.
5. font-family
글꼴(서체)지정(개별)
| 값 | 의미 | 기본값 |
|---|---|---|
| 글꼴이름 | 글꼴(서체)후보 목록을 지정 | |
| serif | 글꼴 계열 이름을 지정 | |
| sans-serif | ||
| monospace | ||
| cursive | ||
| fantasy |
💡사용법
font-family:[글꼴후보1,글꼴후보2,....], 글꼴계열;
.box{
font-family: Arial, "Open Sans", "돋움", dotum, sans-serif;
}위의 경우 후보1,2,3,4입력 후 계열(sans-serif)을 입력한것이다.
글꼴 계열은 필수로 입력해야 한다.
💡글꼴계열
| 계열 | 의미 | - |
|---|---|---|
| serif | 바탕체계열 | |
| sans-serif | 고딕체계열 | |
| monospace | 고정너비(가로폭이 동등한)글꼴계열 | |
| cursive | 필기체 계열 | |
| fantasy | 장식(재미있는 문자 표현을 포함하는)글꼴 계열 |
6. color, 색상표현법
문자의 색상 지정
| 값 | 의미 | 기본값 |
|---|---|---|
| 색상 | 문자의 색상을 지정 | rgb(0,0,0) |
💡색상 표현
| 표현 | 의미 | 예시 |
|---|---|---|
| 색상이름 | 브라우저에서 제공하는 색상의 이름 | red,blue |
| HEX 색상코드 | 16 진수 색상 | #0000 |
| RGB | 빛의 삼원색 | rgb(255,255,255) |
| RGBA | 빛의 삼원색, 투명도 | rgba(255,0,0,.5) |
| HSL | 색상,채도,명도 | hsl(120,100%,50%) |
| HSLA | 색상,채도,명도,투명도 | hsla(120,100%,50%,.3) |
위 표는 색상을 이용하는 모든 속성(property)의 값으로 사용할 수 있다.
RGBA: Red,Green,Blue,Alpha channel
HSLA: Hue, Saturation, Lightness, Alpha Channel
7. text-align
문자의 정렬방식을 지정
| 값 | 의미 | 기본값 |
|---|---|---|
| left | 왼쪽 정렬 | |
| right | 오른쪽 정렬 | |
| center | 가운데 정렬 | |
| justify | 양쪽 맞춤 |
direction속성(텍스트 방향 및 쓰기 방향 지정/lrt,rtl)의 값에 의해서text-align속성의 '기본값'이 변경될 수 있다.
일반적으로left가 기본 값으로 사용된다.
justify는 한 줄에서는 안되고 두 줄 이상에서 사용가능하다.(강제적으로 줄을 쓴 것이 아니라)칸 띄우없이 두 줄 이상일 때 사용가능하다
8. text-decoration
문자의 장식(line)을 설정한다.
| 값 | 의미 | 기본값 |
|---|---|---|
| none | 선 없음 | none |
| underline | 밑줄을 지정 | |
| overline | 윗줄을 지정 | |
| line-through | 중앙 선(가로지르는)을 지정 |
9. text-indent
(첫 번째 줄의)들여쓰기를 지정
음수 값(negative values)을 사용할 수 있습니다.
음수 값을 사용하면 첫째 줄은 왼쪽으로 들여쓰기(내어쓰기)됩니다.
out-dent값이 없기 때문에 indent값으로 모든걸 처리한다(내어쓰기와 들여쓰기)
들여쓰기는 많이 쓸 일은 없지만 글자를 밀어낸다는 것에서 많이 이용된다.
화면 밖으로 밀어낼 때 명시적인 의미로 'text-indent:-9999px;'으로 입력해야한다.
-100px만 해도 밖으로 밀려나지만 명시적으로 알리기 위해 위와같이 써야한다.
10. letter-spacing, word-spacing
1. letter-spacing
문자의 자간(글자 사이 간격)을 설정
| 값 | 의미 | 기본값 |
|---|---|---|
| normal | 단어 사이의 일반 간격 | normal |
| 단위 | px,em,cm등 단위로 지정 |
letter-spacing의 기본값은 '0'이다.
letter-spacing은 word-spacing 다르게 글자 사이사이에 간격이 들어간다고 생각하면 된다.
음수의 값도 쓸 수 있다.
2. word-spacing
단어 사이(띄어쓰기)의 간격을 설정
| 값 | 의미 | 기본값 |
|---|---|---|
| normal | 단어 사이의 일반 간격 | normal |
| 단위 | px,em,cm등 단위로 지정 |
normal 이라는 것 또한 기본적인 띄어쓰기에 '+0'이 되어있다.(기본'0'으로 설정되어 있기 때문이다)
즉 띄어쓰기가 되어 있는 공간에 추가적으로 간격이 들어간다고 생각하면 된다.
마지막으로
다음에는 띄움(정렬), 위치에 대해서 배워볼게요😂
