폰트 지정
웹 문서에서 사용할 글꼴을 지정할 수 있다. 윈도우에서 기본적으로 제공하는 글꼴이 있지만 그것들로는 폰트를 설정하는 것에 한계가 있다. CSS3에서는 웹 폰트를 도입해서 웹에서 <link>태그 혹은 @import를 이용하여 받아 사용이 가능하다.
- font-family:"글꼴이름";
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');
#web{font-family: "Noto Sans KR", sans-serif;}
#font{font-family:"궁서";}
</style>
</head>
<body>
<p id="font">글꼴의 글씨체를 바꿔보자</p>
<p id="web">구글의 웹폰트를 사용해보자</p>
<p>(기본)구글의 웹폰트를 사용해보자</p>
</body>
</html>
- font-size
글자 크기를 지정하는 스타일로, px(픽셀) 등의 절대크기로 지정하거나 medium, xx-small등의 상대크기 혹은 백분율을 사용했으나 이런 방법은 반응형 웹에서 유동적이지 않아서 최근에는 em, rem(배수)을 많이 사용한다.
em의 경우 픽셀값으로 변환할 때에 사용된 요소의 폰트 크기에 따라 결정되며 상위 요소로부터 상속 영향을 받으며, rem의 경우 픽셀값으로 변환할 때 html요소의 폰트 크기에 따라 결정되기 때문에 브라우저에 설정된 폰트 크기를 상속받는다. - font-style
폰트 스타일을 나타내는 normal, italic, oblique 중 하나를 지정한다. - font-weight
100~900 사이의 숫자로 글자의 굵기를 지정한다. 정확한 수치가 필요 없을 경우 normal, bold, bolder, lighter에서 지정하면 된다. - font
'font: font-style font-weight font-size font-family'를 순서대로 지정하는 단축 프로퍼티이다. font-size와 font-family는 반드시 지정되어야 한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#italic{
font-family: "궁서";
font-style: italic;
}
.large{
font-size: 3em;
}
#bold{
font-weight: bold;
}
.allstyle{
font:normal lighter 1.5em "돋움";
}
</style>
</head>
<body>
<p id="italic">안녕하세요. 반갑습니다.</p>
<p>함께 <span id="bold">열심히</span> 공부해봅시다!</p>
<p class="large">폰트 사이즈를 좀 크게 만들어 볼게요</p>
<p class="allstyle">이렇게 한번에 설정도 가능합니다.</p>
</body>
</html>
알파벳 한정으로 설정되는 스타일도 있다.
- text-transform: capitalize|uppercase|lowercase;
시작하는 첫번째 글자를 모두 대문자로(capitalize), 모든 글자를 대문자로(uppercase), 모든 글자를 소문자(lowercase)로 변경한다. - font-variant: small-caps;
영어 소문자를 작은 대문자로 표시한다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#en1{
text-transform: capitalize;
}
#en2{
text-transform: uppercase;
}
#en3{
text-transform: lowercase;
}
#en4{
font-variant: small-caps;
}
</style>
</head>
<body>
<p id="en1">english font style</p>
<p id="en2">english font style</p>
<p id="en3">ENGLISH FONT STYLE</p>
<p id="en4">english font style</p>
<p>english font style(기본)</p>
</body>
</html>
폰트에 선 긋기
- text-decoration: underline|overline|line-through;
text-decoration의 기본값은 none이고, underline은 밑줄을 긋고 overline은 텍스트 위쪽에 선을 긋고, line-through는 텍스트를 관통하여 줄을 긋는다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#p1{text-decoration: underline;}
#p2{text-decoration: overline;}
#p3{text-decoration: line-through;}
</style>
</head>
<body>
<p id="p1">텍스트에 선 긋기</p>
<p id="p2">텍스트에 선 긋기</p>
<p id="p3">텍스트에 선 긋기</p>
<p id="p4">텍스트에 선 긋기(기본)</p>
</body>
</html>
'Frontend > CSS' 카테고리의 다른 글
| CSS3의 박스모델 (0) | 2024.07.07 |
|---|---|
| CSS에서 배경에 이미지를 넣어보자 (0) | 2024.07.04 |
| CSS에서 배경에 그라데이션을 넣어보자 (0) | 2024.07.03 |
| CSS로 list-style을 변경해보자 (0) | 2024.07.03 |
| CSS의 overflow 기능에 대해 알아보자 (0) | 2024.07.02 |
| CSS3에서 텍스트를 정렬하는 방법 (0) | 2024.07.02 |
| CSS에서 텍스트에 색과 그림자를 입혀보자 (0) | 2024.07.02 |
| CSS3의 기본 문법에 대하여 (0) | 2024.07.01 |