[HTML/CSS] 📚 폰트 관련 속성

📋 기억하고 싶은 내용

📌 font-size, font-style, font-weight

• 웹 브라우저 기본 fount-size는 16px이다.
• font-style은 보통 이탤릭체를 만들기 위해 사용한다.

📌 font-family

• Sans-serif는 고딕체와 유사하고, Serif는 명조체와 유사하다.
• 여러 개의 폰트 이름을 콤마로 구분하여 작성하고, 폰트 이름에 스페이싱이 있다면 따옴표로 감싸준다.

📌 line-height

• 폰트에 따라 line-height 값이 다르기 때문에 일관성있게 작성하려면 line-height 값을 지정해주는 것이 좋다.
• 값은 숫자로도 사용 가능하고, 단위 표현으로도 사용 가능하다.

📌 font

.text {
    font: 100 20px/1.7 'Times New Roman', Times, serif;
}

• font-size 속성과 font-family 속성은 필수다.
• font 단축 속성에 특정 속성 값을 작성하지 않으면 initial 값이 된다.

📌 letter-spacing, word-spacing

• 폰트의 기본 간격은 디자인한 사람이 정의했다.
• 가능한 건드리지 않는 것이 가독성에 좋다.

📌 text-align

• 블록 요소의 가로 정렬을 할 수 있다.
• 인라인 요소를 가로 정렬하고 싶다면 블록 요소로 감싸준 뒤 블록 요소에 text-align 속성을 지정하면 된다.

📌 text-indent

• 문단의 들여쓰기를 하기 위해 사용한다.
• 인라인 요소에는 적용되지 않는다.

📌 text-decoration

span {
	text-decoration: black line-through underline wavy 2px;
}

• font 단축 속성은 자주 사용되지 않지만, text-decoration 단축 속성은 자주 사용된다.
• text-decoration 단축 속성은 작성 순서는 따로 없지만, Mutiple text-decoration-line 속성을 지정할 때는 연결해 작성해야 적용된다.

📌 word-break

• break-all 속성은 오버플로가 발생하지 않는다.
• keep-all 속성은 스페이싱이 있는 지점에 줄 바꿈이 발생한다.

📌 text-transform

• 한국어는 적용되지 않는다.
• HTML 문서에 작성되어 있는 실제 텍스트는 변경되지 않고, UI 상에서 보이는 형태만 변경된다.

🔗 참고 래퍼런스

• font-size - MDN
• font-style - MDN
• font-weight - MDN
• font-family - MDN
• line-height - MDN
• font - MDN
• letter-spacing - MDN
• text-align - MDN
• text-indent - MDN
• text-decoration - MDN
• word-break - MDN
• text-transform - MDN