반응형
폰트(Fonts)의 중요성
올바른 폰트 선택이 독자가 웹사이트를 경험하는 방식에 큰 영향을 준다.
좋은 폰트는 브랜드에 대한 강력한 아이덴티티를 만들 수 있다.
폰트는 텍스트에 가치를 더한다.
그렇기때문에 올바른 폰트를 사용하는 것이 중요하다.
Generic Font Familes
CSS는 다섯게의 geneeric font familes이 있다.
Serif; Serif 폰트는 각 글자의 가장자리에 작은획이 있다. 격식과 우아함을 만들어낸다.
Sans-serif: Sans-serif 폰트는 깔끔한 선이 있다. 모던하고 미니멀한 룩을 연출한다.
Monospace(고정 폭): 모든 문자가 동일한 고정 폭을 갖는다. 기계적인 느낌을 준다.
Cursive(필기체): 사람의 손글시를 모방한다.
Fantasy(판타지): 장식적이고 재미있는 폰트이다.
<!DOCTYPE html>
<html>
<head>
<style>
.p1 {
font-family: "Times New Roman", Times, serif;
}
.p2 {
font-family: Arial, Helvetica, sans-serif;
}
.p3 {
font-family: "Lucida Console", "Courier New", monospace;
}
.p4{
font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', fantasy;
}
.p5{
font-family:'Lucida Handwriting',cursive;
}
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="p1">This is a paragraph, shown in the Times New Roman font.</p>
<p class="p2">This is a paragraph, shown in the Arial font.</p>
<p class="p3">This is a paragraph, shown in the Lucida Console font.</p>
<p class="p4">This is a paragraph, shown in the Impact fantasy. </p>
<p class="p5">This is a paragraph, shown in the Lucida Handwriting cursive. </p>
</body>
</html>
개발자 필요할 땐? 필요할 때 필요한 만큼 쓰는 프리랜서 개발자 채용으로
deg.kr
Font Style
font-style 특성은 세가지 값을 가진다.
normal: 평상시 글자
italic: 기울어진 글꼴
oblique: italic하고 비슷한 글꼴이지 지원 수준이 낮다.
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<h1>The font-style </h1>
<p class="normal">This is a paragraph in normal style.</p>
<p class="italic">This is a paragraph in italic style.</p>
<p class="oblique">This is a paragraph in oblique style.</p>
</body>
</html>
Font weight
다음 예제를 보면서 확인하자.
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-weight: normal;
}
p.light {
font-weight: lighter;
}
p.bold {
font-weight: bold;
}
p.thicker {
font-weight: 900;
}
</style>
</head>
<body>
<h1>The font-weight property </h1>
<p class="normal">이 단락은 normal</p>
<p class="light">이 단락은 lighter</p>
<p class="bold">이 단락은 bold</p>
<p class="thicker">이 단락은 thicker</p>
</body>
</html>
Font Variant
font variant 속성 작은 대문자 폰트로 표시할지 여부를 지정한다.
small-caps 폰트의 경우 모든 소문자가 대문자로 변환된다.
변환된 대문자는원래 텍스트보다는 작은 폰트 크기로 나타난다.
<!DOCTYPE html>
<html>
<head>
<style>
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
}
</style>
</head>
<body>
<h1>The font-variant property</h1>
<p class="normal">My name is Jordan belfort</p>
<p class="small">My name is Jordan belfort</p>
</body>
</html>
Font size percent and Em
1em의 크기는 기본적으로 16px이 된다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}
h1 {
font-size: 1.5em;
}
h2 {
font-size:0.875em;
}
.p1{
font-size: 2.5em;
}
.p2{
font-size: 0.875em;
}
</style>
</head>
<body>
<h1>첫번째 제목</h1>
<h2>두번째 제목</h2>
<p class="p1">첫번째 단락</p>
<p class="p2">두번째 단락</p>
</body>
</html>
반응형 Font size
text-size를 vw단위로 사용할 수 있다.
vw 은 viewport width의 줄임말이다.
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h1 style="font-size:10vw;">Responsive Text</h1>
<p style="font-size:5vw;">브라우저 창 크기를 조절하여 텍스트 크기가 어떻게 변하는지 확인해보세요</p>
<p style="font-size:5vw;">텍스트 크기를 조절할 때 vw를 사용해보세요.
10vw는 뷰포트의 너비 10%로 설정합니다.</p>
<p>결국 1vw는 뷰포트의 너비 1%에 해당합니다.</p>
</body>
</html>위 코드를 직접 실행시키는것을 추천한다.
반응형
'웹프로그래밍 > CSS' 카테고리의 다른 글
| [CSS] 리스트(Lists) (0) | 2023.09.12 |
|---|---|
| [CSS] Links 링크 (0) | 2023.09.12 |
| [CSS] 텍스트에 관한 모든 것 (0) | 2023.09.11 |
| [CSS] 높이 너비 최대-너비(Height, Width, Max-width) (0) | 2023.09.11 |
| [CSS] 다양한 border 속성들 알아보기 (0) | 2023.09.10 |
댓글