html & css/개념
글꼴 스타일링
Doo Hee
2023. 7. 4. 22:53
<!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>
.font1 {
font-family: "Courier New", Courier, monospace;
}
.font2 {
font-family: Arial, Helvetica, sans-serif;
}
/* 이탤릭체 */
.italic {
font-style: italic;
}
/* 기본 글씨체를 살짝 기울임 */
.oblique {
font-style: oblique;
}
</style>
</head>
<body>
<!-- 글꼴 스타일링 -->
<h1 style="font-family: verdana">verdana 폰트</h1>
<h1 style="font-family: courier">courier 폰트</h1>
<h1 class="font1">
현재 브라우저에 Courier New 폰트가 있다면, Courier New가 적용되고, 없다면,
Courier가 적용되고, 이것도 없다면 각 브라우저가 가지고 있는 monospace
폰트가 적용
</h1>
<!-- 폰트 스타일 -->
<h1 class="font2">Arial > Helvetica > sans-serif</h1>
<h1 class="italic">이탤릭체로 보여집니다.</h1>
<h1 class="oblique">기본 글씨가 기울어져 보여집니다.</h1>
<!-- 폰트 굵기 -->
<!-- normal, bold, bolder, ligter 100-900까지의 숫자를 사용할 수 있다. -->
<!-- normal: 보통 폰트, 숫자값 400과 동일 -->
<h1 style="font-weight: 400">font-weight: 400</h1>
<h1 style="font-weight: normal">font-weight: normal</h1>
<!-- bold: 굵은 폰트, 숫자값 700과 동일 -->
<h1 style="font-weight: 700">font-weight: 700</h1>
<h1 style="font-weight: bold">font-weight: bold</h1>
<!-- bolder: 상대적인 값 -->
<div style="font-weight: 100">
<p style="font-weight: bolder">부모가 100일때, bolder는 400</p>
</div>
<div style="font-weight: 200">
<p style="font-weight: bolder">부모가 100일때, bolder는 400</p>
</div>
<div style="font-weight: 300">
<p style="font-weight: bolder">부모가 300일때, bolder는 400</p>
</div>
<div style="font-weight: 400">
<p style="font-weight: bolder">부모가 400일때, bolder는 700</p>
</div>
<div style="font-weight: 500">
<p style="font-weight: bolder">부모가 500일때, bolder는 700</p>
</div>
<div style="font-weight: 600">
<p style="font-weight: bolder">
부모가 600이상 일때, bolder는 무조건 900
</p>
</div>
<!-- ligter : 부모를 기준으로 상대적인 값 -->
<div style="font-weight: 100">
<p style="font-weight: lighter">부모가 100일때, lighter는 100</p>
</div>
<div style="font-weight: 200">
<p style="font-weight: lighter">부모가 200일때, lighter는 100</p>
</div>
<div style="font-weight: 300">
<p style="font-weight: lighter">부모가 300일때, lighter는 100</p>
</div>
<div style="font-weight: 400">
<p style="font-weight: lighter">부모가 400일때, lighter는 100</p>
</div>
<div style="font-weight: 500">
<p style="font-weight: lighter">부모가 500일때, lighter는 100</p>
</div>
<div style="font-weight: 600">
<p style="font-weight: lighter">부모가 600일때, lighter는 400</p>
</div>
<div style="font-weight: 700">
<p style="font-weight: lighter">부모가 700일때, lighter는 400</p>
</div>
<div style="font-weight: 800">
<p style="font-weight: lighter">부모가 800일때, lighter는 700</p>
</div>
<div style="font-weight: 900">
<p style="font-weight: lighter">부모가 900일때, lighter는 700</p>
</div>
<!-- 폰트 크기 -->
<!-- 절대 값 : xx-small, x-small, small, medium, large, x-large, xx-large -->
<!-- 절대 값의 경우, 브라우저별로 정해논 값에 따라 지정된다. -->
<!-- 상대 값: larger, smaller -->
<!-- 길이 값 : em(부모 요소의 폰트 크기를 기준), rem(루트(여기서는 html) 요소의 폰트 크기 기준), px, pt(1pt = 0.72인치) -->
<!-- 퍼센트(백분율) 값 -->
<!-- 대부분의 브라우저는 폰트 크기의 기본값으로 12pt=16px=1em=100% -->
<!-- 부모는 18px -->
<!-- 자식은 0.5em => 9px -->
<p style="font-size: 10px">font-size: 10px</p>
<p style="font-size: 8pt">font-size: 8pt</p>
<p style="font-size: 1em">font-size: 16px</p>
<div style="font-size: 20px">
<p style="font-size: 1em">20px</p>
<p style="font-size: 0.5em">10px</p>
<!-- 부모가 없을 경우 1em은 16px이지만, 부모가 존재할 경우 1em은 16px이 아니다. -->
<!-- 부모의 크기에 따라 달라짐 -->
<p style="font-size: 1rem">16px</p>
<!-- em, rem은 pc뿐만 아니라 화면 크기가 작은 모바일에서도 사용시 유용하다. -->
</div>
</body>
</html>
