CSS는 웹 페이지의 글꼴 스타일을 결정하는 데 핵심적인 역할을 합니다. CSS 글꼴(font) 속성을 활용하면 font-family, font-size, font-weight, font-kerning 등 다양한 요소를 자유롭게 조절할 수 있습니다.
특히 font 속성은 font-style, font-variant, font-weight, font-size/line-height, font-family를 한 번에 지정할 수 있는 축약형(shorthand)입니다. 여기에 더해 text-decoration, text-shadow, text-stroke, text-fill-color, color 등의 텍스트 속성을 함께 사용하면 훨씬 풍부한 타이포그래피 연출이 가능합니다.
주요 CSS 글꼴 속성 한눈에 보기
color
텍스트의 색상을 변경하는 속성입니다.
font-family
요소에 적용할 서체(글꼴)를 지정합니다.
font-kerning
글자 간격을 균일하게 맞춰 가독성을 높이는 속성입니다. 다만 이 속성의 적용 여부는 사용된 글꼴에 따라 달라질 수 있습니다.
font-size
글꼴의 크기를 설정합니다.
font-stretch
일부 글꼴은 condensed(좁게)처럼 추가적인 서체 형태를 제공합니다. 이 속성으로 그중 어떤 형태를 사용할지 지정할 수 있습니다.
font-style
텍스트를 일정 각도로 기울임(이탤릭) 처리할 때 사용합니다.
font-variant
요소를 small-caps(작은 대문자) 형태로 표시할지 여부를 지정합니다.
font-weight
글자의 굵기를 지정합니다.
line-height
두 줄 사이의 간격(행간)을 설정합니다.
text-decoration
밑줄이나 윗줄을 추가하고 그 스타일을 꾸밀 때 사용합니다.
text-shadow
box-shadow와 유사하게, 글자에 원하는 모양의 그림자 효과를 부여합니다.
이 외에도 text-indent, text-overflow, white-space, word-break, direction, hyphens, text-orientation, word-wrap 같은 텍스트 레이아웃 속성들을 활용하면 더욱 정교한 텍스트 배치가 가능합니다.
기본 문법
font 속성의 기본 작성 형식은 다음과 같습니다.
선택자 {
font-property: /*값*/
}예제 1: font 축약형과 text-shadow 활용
다음 예제는 CSS 글꼴 속성의 다양한 활용법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
font: 1.6em arial;
text-shadow: -3px -12px lightblue;
}
p + p {
font: italic bold 12px/30px menu;
text-shadow: unset;
box-shadow: 0 0 5px 1px black;
}
div {
width: 30%;
font-size: 1.4em;
font-family: cursive;
background-color: tomato;
}
</style>
</head>
<body>
<h2>Demo Heading</h2>
<p>This is demo text</p>
<p>This text is for demo and included here to display different font styles in CSS.</p>
<div>Another text with different font style.</div>
</body>
</html>
실행 결과
위 코드를 실행하면 아래와 같은 결과가 출력됩니다.
예제 2: oblique와 small-caps 조합하기
다음 예제는 기울임 각도와 small-caps를 함께 지정하는 방법을 보여줍니다.
<!DOCTYPE html>
<html>
<head>
<style>
p {
font: oblique 5deg small-caps bold 1.3em/0.5px cursive;
border: 3px solid lightcyan;
}
</style>
</head>
<body>
<p>This is demo text</p>
<p>This is another demo text</p>
</body>
</html>
실행 결과
위 코드를 실행하면 아래와 같은 결과가 출력됩니다.
