✅폰트관련속성

1. font-size

• 글자의 크기를 지정한다.

font-size : 20px

2. font-style

• 글자의 기울임을 지정한다.
• font-style 경우 기본값이 normal이다.
• font-style은 부모의 값을 상속을 받는다. 만약에 부모에 상속받은 것을 사용하지 않을 경우에는
  font-style : normal 로 적용하면 된다.

font-style : normal
font-style : italic

3. font-weight

• 글자 굵기를 지정한다.
• 글자 굵기는 100 ~ 900으로 지정할 수 있다.
• 또는, normal, bold, lighter로 지정할 수도 있다.

font-weight : normal // 보통 폰트 가중치. 400과 같다.
font-weight : bold // 굵은 폰트 가중치. 700과 같다.

4. font-family

• 글꼴을 지정한다.
• 윈도우에서는 기본적으로 맑은 고딕이다.
• 여러개의 콤마를 사용해서 나열 가능하다. 여러개의 콤마를 사용할 경우 첫번째 글꼴부터 사용자 컴퓨터에 설치되어 있으면 적용하고 설치되어 있지 않으면 그 다음 폰트를 확인하여 설치되어있으면 적용하는 방법으로 적용이 된다.

font-family : 'Noto-Sans', 'Gill Sans', sans-serif, cursive

5. line-height

• 줄의 높이를 의미한다.
• 만약 폰트의 높이와 줄간격이 같으면 가독성이 떨어진다.
• 보통 1.0 ~ 1.2로 적용을 한다.
• line-height를 지정해주지 않으면 글꼴에 따라 높이가 다르기 때문에 만약 inline 요소를 높이 지정을 해주지 않으면 글꼴에 따라서 높이가 중구난방하기 때문에 line-height를 지정해줘야한다.

line-height : 1.2
line-height : 1.6
line-height : 3em
line-height : 150%
line-height : 32px

6. font 단축속성(shorthand)

• 총 6가지 속성을 단축해서 사용할 수 있다.

• font 단축속성에는 아래와 같은 규칙이 있다.

  1) 공식구문 :
  font-style font-variant font-weight font-stretch font-size weight size/line-height family

  2) 필수 입력: font-size, font-family

  3) 선택 입력: font-style, font-variant, font-weight, line-height

  4) font-style과 font-weight는 size앞에 있어야 한다.

font: small-caps bold 24px/1 sans-serif;

7. letter-spacing, word-spacing

• letter-spaing은 글자간의 간격을 지정한다.
• word-spacing은 단어간의 간격을 지정한다.
• 글꼴에 따라서 적합한 간격이 정해져있다.
• 기본값은 normal이다.
• em, rem 단위도 사용가능하다.

letter-spacing: 5px // normal값에 5px을 더한다는 뜻. 
word-spacing : 5px // normal값에 5px을 더한다는 뜻. word-spacing은 %도 가능하다.

8. text-align

• 텍스트의 정렬 방법을 지정한다.
• text-align은 inline 요소에는 사용이 불가능하다. 그 이유는 inline요소는 너비를 지정할 수 없기 때문이다.
• 만약, 구조가 아래와 같은 구조라면 텍스트 중앙정렬을 하고 싶다면 부모요소인 div태그에 text-align : center를 적용하면 된다.

<div style="width:100px;">
	<span>inline요소인 span태그</span>
</div>

text-align : center // 중앙정렬
text-align : right // 오른쪽 정렬
text-align : left // 왼쪽 정렬

9. text-indent

• 첫번째 문장에 첫 단어 앞에 공간이 생긴다.
• text-indent는 음수값도 적용 가능하다.
• text-indent는 inline 요소에는 사용이 불가능하다. 그 이유는 inline요소는 너비를 지정할 수 없기 때문이다.

text-indent : 0;
text-indent : 30%;
text-indent : -3em;

10. text-decoration

• text-decoration도 단축속성이다. multiple로 여러가지 속성값을 사용할 수 있다.

공식구문 : text-decoration-line text-decoration-style text-decoration-color
1) text-decoration-line : 사용되는 장식의 종류를 설정한다.
2) text-decoration-style : 장식에 사용되는 선의 스타일을 설정한다.
3) text-decoration-color : 장식의 색상을 설정한다.

text-decoration : underline dotted red;
text-decoration : underline overline #FF3028

11. word-break

• word-break는 텍스트가 자신의 콘텐츠 박스 밖으로 overflow할 때 줄을 바꿀지 지정한다.
• 영어는 텍스트가 width값을 넘을 경우 줄바꿈이 자동으로 되지 않고. 한글은 자동으로 줄바꿈이 된다.

word-break : break-all // overflow 됐을 시 줄바꿈이 되게.
word-break : keep-all // overflow가 됐을 시 줄바꿈이 되지 않고 width를 뚫고 쭉 연결된다.

12. text-transform

• 텍스트에 단어의 대소문자 변경을 적용한다.
• 한글에는 적용이 되지 않는다. 사용할 수 있는 언어가 한정적이다.

text-transform : capitalize // 문장들의 단어들 앞글자가 대문자로 변경된다.
text-transform : uppercase // 문장들의 단어들을 대문자로 변경한다.
text-transform : lowercase // 문장들의 단어들을 소문자로 변경한다.