티스토리 뷰

반응형

텍스트 관련 CSS - font-size

font-size속성으로는 글자 크기를 조절할 수 있습니다. 픽셀이나 포인트를 비롯해 크기를 여러 단위로 지정할 수 있고 백분율을 사용할 수도 있습니다.

글자 크기값을 직접 지정하는 단위

단위

설명

특징

em 해당 글꼴의 대문자 M의 너비를 기준으로 크기를 조절합니다. 부모 요소에서 지정한 폰트의 대문자 M의 너비
1em으로 놓고 상대적 값을 계산해
다른 요소들의 글자 크기를 조절합니다.
만약 지정한 크기가 없다면 <body> 요소의 크기 16px이 기본값 1em으로 지정됩니다.
ex x-height(엑스 하이트). 해당 글꼴의 소문자 x의 높이를 기준으로 크기를 조절합니다.  
px 픽셀. 모니터에 따라 상대적 크기가 됩니다. 웹에서 폰트 크기를 지정할 때는 주로 px 단위를 많이 사용합니다. 하지만 px 단위를 사용하면 폰트 크기가 고정되기 때문에 크기가 다른 브라우저에서도 지정한 크기 그대로 화면에 표시됩니다. 따라서 모바일 기기에서 접속할 경우까지 고려한다면(반응형) em단위를 사용하는 것이 좋습니다.
pt 포인트. 일반문서에서 많이 사용하는 단위입니다.  





텍스트 관련 CSS - font-weight

font-weight 속성은 글자 굵기를 지정합니다.
\ 기본형은 normal / bold / bolder / lighter / 100 / 200/ 300/ 400/ 500/ 600/ 700/ 800/ 900 이 있습니다.

font-weight 속성값

속성 값 설명
normal 일반적인 형태로 기본 값입니다.
bold / bolder / lighter 굵게 / 원래 굵기보다 더 굵게 / 원래 굵기보다 더 가늘게 /
100~900 사이의 수치 400은 normal, 700은 bold에 해당하며 숫자 값을 조절해 좀더 세밀히 글꼴 두께를 조절할 수 있습니다.

 

반응형
댓글
© 2019 Eun's