My Melody Kawaii

CSS

CSS 문자 관련 스타일은 무엇이 있을까?

younajeong 2023. 3. 1. 20:02

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- 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 사용법

  1. 글꼴을 다운로드하거나 구매한 뒤 업로드할 폴더를 정해 올립니다. (윈도우는 woff, 맥은 eot파일)
  2. css에서 다음과 같이 글꼴 이름, 파일경로, 파일유형을 설정합니다.
  3. 선택자에 글꼴 이름을 부여합니다.

 

여기까지 CSS font에 관하여 살펴보았습니다. 오늘 정리한 내용을 바탕으로 문자를 쓸 때 참고하며 사용할 수 있도록 해봅시다~