티스토리 뷰

잉고래의 티스토리

css font 속성

잉고래 2017. 9. 26. 00:04

css 폰트 속성에 대해 함께 공부해 봅시다. css font 속성은 폰트 패밀리, 굵기, 사이즈,  텍스트 스타일을 정의하는데 사용합니다. 한 마디로 폰트 꾸미는데 사용하는 속성이죠. 


css에는 2가지 폰트 패밀리가 있는데요, 비슷한 모양의 폰트 패밀리들을 묶은 generic family와 특정 폰트 패밀리를 뜻하는 걍~ font family 입니다. 


generic family에는 serif, sans-serif, monospace 가 있어요. 궁서체 처럼 끝이 휘어지는 모양의 글자 폰트가 세리프, 세리프가 없는건 산세리프, 글자 간격이 동일한게 모노스페이스로 알면 됩니다.


자 이제 폰트패밀리를 알았으니 이걸 적용해야 할텐데요. 


텍스트의 폰트 패밀리를 설정하는 css 속성은 font-family 속성입니다.

재밌는 점은 이 font-family 속성은 해당하는 폰트가 없는 것을 가정해서 이 속성에 여러 글꼴 이름들을 포함해야하는 겁니다. 브라우저가 첫 번째 글꼴을 지원하지 않으면 다음 글꼴을 시도하는 식으로 진행되는거죠.


다른 글꼴을 사용할 수없는 경우 브라우저에서 일반 글꼴로 비슷한 글꼴을 선택하도록 제일먼저 원하는 글꼴로 시작해서 뒤로 갈수록 일반 글꼴로 끝냅니다.


참고 : 글꼴 패밀리의 이름이 두 단어 이상인 경우 "Times New Roman"과 같이 따옴표로 묶어야합니다.


하나 이상의 글꼴 군이 쉼표로 구분 된 목록으로 지정됩니다.


p { font-family: "lucida console", verdana, times, serif; }


다음으로 font-style 속성은 주로 기울임 꼴 텍스트를 지정하는데 주로 사용됩니다.


이 속성에는 세 가지 값이 있습니다.


normal - 텍스트가 정상적으로 표시됩니다.

italic - 텍스트는 기울임 꼴로 표시됩니다.

oblique - 텍스트가 기울어집니다 (비스듬한 기울임 꼴과 유사하지만 덜 지원됩니다)


p.normal {

    font-style: normal;

}


p.italic {

    font-style: italic;

}


p.oblique {

    font-style: oblique;

}


폰트 사이즈


font-size 속성은 텍스트의 크기를 설정합니다.


텍스트 크기를 관리 할 수 있다는 것은 웹 디자인에서 중요합니다. 그러나 단락을 표제처럼 보이게하거나 머리글을 단락처럼 보이게하려면 글꼴 크기 조정을 사용하면 안됩니다.


제목에는 <h1> - <h6>, 단락에는 <p>과 같은 적절한 HTML 태그를 사용해야 합니다.


font-size 값은 절대 또는 상대 크기 일 수 있습니다. 절대? 상대? 뭘까요?


절대 크기 :


텍스트를 지정된 크기로 설정합니다.

사용자가 모든 브라우저에서 텍스트 크기를 변경할 수 없도록합니다 (접근성상의 이유로 나쁨).

절대 크기는 출력의 물리적 크기가 알려진 경우 유용합니다.


상대 크기 :


주변 요소를 기준으로 크기를 설정합니다.

사용자가 브라우저에서 텍스트 크기를 변경할 수 있습니다.


참고 : 글꼴 크기를 지정하지 않으면 단락과 같은 일반 텍스트의 기본 크기는 16px (16px = 1em)입니다.


폰트 크기 조절하기는 법


픽셀로 조절하기


p { font-size: 32px; }

em으로 조절하기

사용자가 브라우저 메뉴에서 텍스트의 크기를 조정할 수 있도록 많은 개발자가 픽셀 대신에 em을 사용합니다.


또한 em 크기 단위는 W3C에서 권장합니다.


1em은 현재 글꼴 크기와 같습니다. 브라우저의 기본 텍스트 크기는 16 픽셀입니다. 따라서 1em의 기본 크기는 16px입니다.


크기는 다음 수식을 사용하여 픽셀에서 em까지 계산할 수 있습니다. pixels / 16 = em


p { font-size: 2em; }


위의 예제에서 em의 텍스트 크기는 이전 예와 픽셀 단위로 동일합니다. 그러나 em 크기를 사용하면 모든 브라우저에서 텍스트 크기를 조정할 수 있습니다.


백분율과 em의 조합 사용

모든 브라우저에서 작동하는 솔루션은 <body> 요소의 기본 글꼴 크기를 백분율로 설정하는 것입니다.


body { font-size: 100%; }

p { font-size: 2em; }


이제 코드가 훌륭하게 작동합니다! 모든 브라우저에서 동일한 텍스트 크기를 보여 주며, 모든 브라우저가 텍스트를 확대하거나 크기를 조정할 수 있습니다!


font-weight는 폰트 굵기를 조절합니다. 

p { font-weight: bold; }


Font Variant

font-variant 속성은 텍스트를 작은 대문자 글꼴로 표시할지 여부를 지정합니다.


작은 대문자 글꼴에서는 모두 소문자가 대문자로 변환됩니다. 그러나 변환 된 대문자는 텍스트의 원래 대문자보다 작은 글꼴 크기로 나타납니다.

p { font-variant: small-caps; }


여기까지 폰트 속성에 대해 알아 보았습니다~

'잉고래의 티스토리' 카테고리의 다른 글

티스토리에서 마크다운 글쓰기  (2) 2017.11.23
반응형 스킨과 저품질의 상관성  (0) 2017.10.12
css text  (0) 2017.09.18
css outline 속성 강좌  (0) 2017.04.04
box model의 이해  (0) 2017.04.03