font-style : 글자 기울기 지정
font-weight : 글자 두께 지정
font-weight: normal
: 기본 글자 두께, 400과 동일 (기본 값)
font-weight: bold
: 글자 두껍게, 700과 동일
font-weight: bolder
: 부모 요소보다 더 두껍게(bold 보다 두껍다는 개념이 아님)
font-weight: lighter
: 부모 요소보다 더 얇게
font-weight: 100
: 100부터 900까지의 100단위의 숫자 9개
font-size : 글자 크기 지정
line-height : 줄 높이 지정
line-height: normal
: 브라우저의 기본 정의를 사용(1 ~ 1.4) (기본 값)
line-height: 2
: 요소 자체 글꼴 크기의 배수로 지정 (추천: 1.4 ~ 1.7)
line-height: 32px
: px, em, cm 등 단위로 지정
font-family : 글꼴 지정 (운영체제 또는 브라우저에 따라 달라짐)
font-family: Arial, "Open Sans", "돋움", dotum, sans-serif
(쉽표로 구분 주의)
font-family: [글꼴후보1, 글꼴후보2, 글꼴후보3, ...], 글꼴계열
⚠️ 글꼴 계열은 필수로 입력해야 합니다.
사용자 브라우저 환경에 글꼴후보가 모두 없으면 마지막으로 글꼴계열을 사용하게 됩니다.
[단축 속성]
font: italic bold 20px / 1.5 "Arial", sans-serif;
font: 기울기, 두께, 크기 / 줄높이 글꼴
⚠️ 단축 속성을 사용하려면 font-size(크기)와 font-family(글꼴) 를 필수로 입력해야 합니다.
→ 색상이름으로 지정하는 것은 지양, Hex 색상코드를 사용하는 것을 추천
문자의 정렬 방식을 지정
text-align: left
: 왼쪽 정렬
text-align: right
: 오른쪽 정렬
text-align: center
: 가운데 맞춤
text-align: justify
: 양쪽 맞춤 (줄 바꿈 없이 작성된 문장이어야 적용)
💡*text-align: center
적용 전*
💡*text-align: center
적용 후*