CSS - 글꼴,문자

1. font, font-style

: 글자 관련 속성들을 지정(단축속성)

값	의미	기본값
font-style	글자 기울기 지정	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;
}

.box{
    font: 30px / 1.5; /*ERROR*/
    font: bold;
    font: bold sans-serif; /ERROR*/
    font: 30px / 1.5 sans-serif;
    font: bold 30px sans-serif;
    font: italic 30px / 1.5 "Arial", sans-serif;
}

 

-1) font-style : 글자 기울기를 지정

값	의미	기본값
normal	스타일 없음	normal
italic	이테릭체(활자)
obique	기울어진 글자

<p>방가방가</p>

p {
  font-size: 40px;
  font-style: italic;
}

 

 

---

2. font-weight

: 글자 두께(가중치) 지정

값	의미	기본 값
normal	기본 글자 두께, 400과 동일	normal(400)
bold	글자 두껍게, 700과 동일
bolder	부모 요소보다 더 두껍게
lighter	부모요소보다 더 얇게
숫자	100부터 900까지 100단위 숫자 9개, normal과 bold이외의 두께를 제공하는 글꼴을 위한 설정

 

- 일반적인 두께의 이름 

값	일반적인 두께의 이름
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)

 

- 상대적 두께

상속 값	bolder	lighter
100,200,300	400	100
400,500	700	100
600,700	900	400
800,900	900	700

 

- 숫자 값과 두께의 불일치(normal, bold만 지원하는 글꼴일 경우, 100~500은 normal, 600~900은 bold의미)

1. 400이 주어지면 500을 사용하고, 500이 불가하면 500미만의 다른 두께 사용
2. 500이 주어지면 400을 사용하고, 400이 불가하면 400미만의 다른 두께 사용
3. 400미만 값이 주어지면, 가장 가까운 숫자의 얇은 두께 사용
4. 500초과 값이 주어지면, 가장 가까운 숫자의 두꺼운 두께 사용

 

---

3. font-size

: 글자 크기 지정

값	의미	기본값
단위	px, em, cm 등 단위로 지정	16px
%	부모 요소의 비율 로 지정

 

---

4. line-height

: 줄 높이(간격) 지정, (텍스트들 사이의 간격이 아니라, 첫번째 줄의 높이, 두번째 줄의 높이를 지정)

값	의미	기본값
normal	브라우저의 기본 정의를 사용	normal
숫자	요소 자체 글꼴 크기의 배수로 지정
단위	px,em,cm 등 단위로 지정
%	요소 자체 글꼴 크기의 비율로 지정

 

- line height 크기 계산

line-height 크기

 

---

5. font-family

: 글꼴 지정

 

- 사용법

font-family { 글꼴후보1, 글꼴후보2, 글꼴계열}; /*글꼴 계열을 필수로 입력*/

.box {
	font-family: Arial, "Open Sans", "돋움", dotum, sans-serif;
}   			/*후보1, 후보2, 후보3, 후보4, 글꼴계열*/

 

- 글꼴 계열

계열	의미
serif	바탕체 계열
sans-serif	고딕체 계열
monospace	고정너비(가로폭이 동등한) 글꼴 계열
cursive	필기체 계열
fantasy	장식(재밌는) 글꼴 계열

 

---

6. color, 색상 표현법

-1) color : 문자의 색상을 지정

표현	의미	예시
색상이름	브라우저에서 제공하는 색상의 이름	red, blue
Hex 색상코드	16진수 색상	#000000 ~ #ffffff
RGB	빛의 삼원색	rgb(255, 255, 255)
RGBA	빛의 삼원색, 투명도	rgba(255, 0, 0, .5)
HSL	색상, 채도, 명도	hsl(120, 1005, 50%)
HSLA	색상, 채도, 명도, 투명도	hsla(120, 100%, 50%, .3)

 

---

7. text-align

: 문자 정렬 방식을 지정

값	의미
left	왼쪽 정렬
right	오른쪽 정렬
center	가운데 정렬
justify	양쪽 맞춤(두줄 이상 일때)

- direction 속성(텍스트 방향 및 쓰기 방향 지정/ ltr, rtl)의 값에 의해서 text-align 속성의 '기본 값'이 변경될 수 있다. 일반적으로 left가 기본 값으로 사용된다.

 

---

8. text-decoration

: 문자의 장식(line)을 설정

값	의미	기본값
none	선 없음	none
underline	밑 줄을 지정
overline	윗줄을 지정
line-through	중앙선(가로지르는)을 지정

 

 

9. text-indent

: (첫번째 줄의) 들여쓰기를 지정 : 음수값을 사용하면 첫째 줄은 왼쪽에서 들여쓰기 된다.

- 글자를 밀어내는 용도로 사용(-9999px)

 

---

10. letter-spacing, word-spacing

-1) letter-spacing : 문자의 자간(글자 사이 간격)을 설정

값	의미	기본 값
normal	단어 사이의 일반 간격	normal(0)
단위	pz,em,cm 등 단위로 지정

 

-2) word-spacing: 단어 사이(띄어쓰기)의 간격을 설정

값	의미	기본 값
normal	단어 사이의 일반 간격	normal(0)
단위	pz,em,cm 등 단위로 지정

 

 

---

line - height 사진 출처 webclub.tistory.com/475