“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”
- Frederick Philips Brooks
Mythical Man-Month 저자
728x90
CSS 문자 관련 스타일
우리가 사이트나 화면을 볼 때 그림과 사진도 눈에 들어오지만 절대적으로 빼먹을 수 없는 것이 있습니다. 바로 폰트! 글인데요 요즘 트랜드로도 강조형 타이포그래피 같은 글자 스타일과 크기로 강조하는 디자인이 떠오르는 만큼 글자에 대해서 잘 알고 활용하는 것이 중요하다고 생각합니다. 그러므로 오늘은 CSS 속성 중 문자 관련한 속성들을 알아보는 시간을 가지도록 하겠습니다.
01. font-family
문자의 글꼴을 지정하는 속성입니다. 여러 단어거나 한글 글꼴인 경우는 따옴표로 감싸고 여러 개의 글꼴을 쉼표로 구분하여, 지정한 글꼴이 없을 경우 그 다음 글꼴로 지정할 수 있습니다.
font-family: "돋움", Dotum, Arial, Helvetica, sans-serif ;
02. font-size, 단위
문자의 글자 크기를 지정하는 속성입니다. 글자 크기는 명시하지 않을 경우 16px이 기본값입니다. css에서 유용하게 사용하는 단위는 다음과 같은 것들이 있습니다.
▶ px
해상도에 따라 상대적으로 달라지는 기본 단위입니다.
font-size: 12px
▶ %
부모 요소의 글자 크기를 100% 기준으로 계산한 % 단위로서 특별한 설정이 없다면 16px이 100%가 되므로, 150%는 24px이 됩니다. 만약 부모 요소가 10px이었다면 150%는 15px이 될 것입니다.
font-size : 150%
▶ em
부모 요소의 글자 크기를 100%기준으로 계산하는 100분의 1 단위로서 특별한 설정이 없다면 16px이 1em이 되며 1.5em은 24px(16px x 1.5= 24px)이 됩니다. 만약 부모 요소가 10px이었다면 1.5em은 15px이 될 것입니다.
font-size : 1.5em;
▶ rem
rem은 em과 비슷하지만 부모 요소가 아닌 최상위 요소의 크기를 100%기준으로 계산합니다. rem의 r은 root 즉, html 요소를 뜻하므로, html 요소에서 지정한 글자 크기가 1rem이 됩니다.
font-size : 1.5rem
▶ vw,vh
vw는 뷰포트 너비값의 100분의 1단위, vh는 뷰포트 높이값의 100분의 1단위 입니다.
font-size: 10vw;
03. font-weight
문자를 굵게 하거나 굵은 문자를 보통으로 재설정하는 속성입니다.
| 굵은 문자로 설정 | 보통 문자로 설정 |
| font-weight : bold; | font-weight : normal ; |
04. font-style
문자를 기울어지게 하거나 기울어지지 않게 재설정 하는 속성입니다.
| 기울어지게 설정 | 기울어지지 않게 설정 |
| font-style : italic; | font-style : normal; |
05. font-variant
문자를 작은 대문자로 설정하거나 원래 문자로 재설정하는 속성입니다.
| 작은 대문자로 설정 | 원래대로 설정 |
| font-variant : small-caps; | font-variant : nomal; |
06. line-height
줄간격을 px,%,em 등의 단위로 지정할 수 있습니다.
line-height : 1.4;단위를 생략하면 em으로 처리되는데 1.4em은 140%입니다 줄간격 없이 딱 붙이고자 할 경우에 100% 또는 1em값을 지정하면 됩니다.
07. font
'font-'로 시작하는 속성들은 line-height와 함께 'font:~'한 줄로 붙여 쓸 수 있는데 그럴 경우 반드시 세가지 순서에 맞추어 써야 합니다. 글자 크기와 글꼴은 결코 생략할 수 없습니다.
body (font; 12px/1.4 '굴림',Gulim;)
08. 웹폰트
기본 끌골이 아닌 경우 글꼴 파일이 없는 사용자의 화면에는 페이지에 사용한 글꼴이 제대로 표시되지 않을 수 있으므로,언제 어디서나 원하는 글꼴로 페이지가 표시되도록 하려면 웹폰트를 사용하는 것이 좋습니다. 웹폰트는 라이센스가 필요한 유로 폰트도 많이 있으므로 반드시 확인하고 사용해야 합니다.
▶ @font-face
CSS3에서는 글꼴 파일을 업로드하여 사용하는 @font-face를 사용할 수 있습니다. 글꼴 파일이 용량이 크면 로딩이 되는 속도가 느리고, 용량이 적으면 글자가 약간 뭉개져 보일 수 있습니다.
font-face 사용법
- 글꼴을 다운로드하거나 구매한 뒤 업로드할 폴더를 정해 올립니다. (윈도우는 woff, 맥은 eot파일)
- css에서 다음과 같이 글꼴 이름, 파일경로, 파일유형을 설정합니다.
- 선택자에 글꼴 이름을 부여합니다.
여기까지 CSS font에 관하여 살펴보았습니다. 오늘 정리한 내용을 바탕으로 문자를 쓸 때 참고하며 사용할 수 있도록 해봅시다~