[CSS] 글씨 관련 속성

글씨 관련 속성

1. font-family

• 폰트를 지정합니다.
• 여러개의 폰트를 , 를 통해 지정할 수 합니다.
  => 우선순위에 따라 앞의 폰트가 지원되지 않을 때 다음 폰트를 적용합니다.
• 폰트의 이름에 공백이 있을 경우 "폰트 이름"의 형식으로 작성합니다.

html {
	font-family : 'Courier New', Courier, monospace;
}

---

2. font-size

• 폰트의 크기를 지정합니다.
• px, %, rem, em 등의 단위를 사용합니다.

p {
	/* 루트 요소의 폰트 크기에 대해서 1배 지정. */
	font-size : 1rem;
}

---

3. font-weight

• 폰트의 가중도(굵기)를 지정합니다.
• 100~900 사이의 숫자 혹은 bold, lighter 등의 키워드를 사용합니다.
  => 해당 가중도의 폰트를 지원해야합니다.

h1 {
	/* 가중도를 보통으로 지정합니다. */
	font-weight : 400;
}

---

4. text-align

• 글자의 정렬 방향을 지정합니다.
• 정렬하고자 하는 영역(블록 레벨 요소)에 지정합니다.
  => text-align이 지정된 요소 내의 인라인 요소(텍스트, 이미지 등)가 정렬됩니다.

속성 표

값	설명
left	글씨를 왼쪽으로 정렬합니다.
center	글씨를 가운데로 정렬합니다.
right	글씨를 오른쪽으로 정렬합니다.
justify	글씨를 양쪽으로 정렬합니다.

p {
	/* p태그 안의 인라인 요소가 가운데 정렬됩니다. */
	text-align : center;
}

---

5. line-height

• 줄의 간격을 조절합니다.
• px, %, rem, em 등의 단위를 사용합니다.

p {
	/* 줄 간격을 부모 요소의 글씨 크기의 1.4배로 지정한다.  */
	line-height : 1.4em;
}

---

6. word-spacing, letter-spacing

• 각각 어간(단어 간격), 자간(글자 간격)을 지정합니다.
• px, %, rem, em 등의 단위를 사용합니다.

p {
	/* 자간과 어간을 각각 부모 요소 글씨 크기의 0.2배, 0.15배씩 지정합니다. */
    word-spacing : 0.2em;
	letter-spacing : 0.15em;

}

---

7. text-transform

• 글자를 대문자 혹은 소문자로 변환합니다.

속성 표

값	설명
capitalize	첫번째 글자를 대문자로 변환합니다.
uppercase	모든 글자를 대문자로 변환합니다.
lowercase	모든 글자를 소문자로 변환합니다.

h2 {
	/* 모든 글자를 대문자로 변환합니다. */
	text-transform : cpitalize;
}

8. text-decoration

• 글자를 꾸미는 선을 그립니다.
• 선의 종류, 색상, 선의 위치, 선의 두께를 지정할 수 있습니다.
  => 각각 text-decoration-style, text-decoration-color, text-decoration-line, text-decoration-thickness(표준아님)의 개별속성으로 지정할 수 있습니다.

text-decoration-style 속성표

값	설명
solid	글자를 실선으로 꾸밉니다.
dotted	글자를 점선으로 꾸밉니다.
dashed	글자를 끊어진 직사각형으로 꾸밉니다.
wavy	글자를 구불구불한 선으로 꾸밉니다.

text-decoration-line 속성표

값	설명
overline	윗줄을 그립니다.
underline	밑줄을 그립니다.
line-through	취소선을 그립니다.