728x90
문자 관련 스타일
✨01. font-family
문자의 글골을 지정하는 속성이다.
여러 단어이거나 한글 글꼴인 경우는 따옴표로 감싸고 여러 개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있다.
font-famliy: '돋음', Dotum, Arial, Helvetica, sans-serif;
✨02. font-size
▲px
해상도에 따라 상대적으로 달라지는 기본 단위
font-size; 12px;
▲ %
부모 요소의 글자 크기를 100% 기준으로 계산한 %단위
font-size:150%;
특별한 설정이 없다면 16px이 100%가 되므로, 150%는 24px가 된다. 만약 부모 요소가 10px이었다면 150%는 15px가 될것이다.
▲vw, vh
vw는 뷰포트 너비값의 100분의 1 단위, vh는 뷰포트 높이 값으 100분의1 단위
font-size:10vw;
예문은 글자 크기가 뷰포트 너비의 10% 크기라는 의미이다.
✨font-weight
| 굵은 문자로 설정 | 보통 문자로 설정 |
| font-weight:bold; | font-weight:normal; |
✨font-style
| 기울어지게 설정 | 기울어지지 않게 설정 |
| font-style: italic; | font-style: normal; |
✨line-height
줄간격을 px, %, em등의 단위로 지정할 수 있다.
line-height: 1.4;
부모 요소의 font-size를 기준으로 계산되며, height와 같은 수치를 주면 세로 중앙정렬을 할 수 있다.
height: 50px;
line-height:50px;
✨font
'font-'로 시작하는 속성들은 line-heigth와 함게 'font:~'한 줄로 붙여 쓸 수 있는데 그럴 경우 반드시 다음 세 가지 순서에 맞추어 써야 하며, 글자 크기와 글꼴은 결코 생략할 수 없다.
body { font: 12px/1.4 '굴림', Gulim;}
✨글자 간격, 단어간격
letter-spacing는 글자간격, word-spacing은 단어간격의 속성으로 값을 부여한다.
letter-spacing: -1px
word-spacing: 2em