20190502/cssFont1.html

<!doctype html> <!-- cssFont1.html -->
<html>
  <head>
    <meta charset="utf-8"/>
		<meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>CSS 글자체 실습</title>
    <style>
			.fontFamilyA {font-family:"Time New Roman", Garamond, serif;}
			.fontFamilyB {font-family:Helvetica, "MS Verdana", sans-serif;}
			.fontSizeA {font-size:100%;}
			.fontSizeB {font-size:200%;}
			.fontStyleA {font-style:normal;}
			.fontStyleB {font-style:italic;}
			.fontStyleC {font-style:oblique;}
			.fontWeightA {font-weight:100;}
			.fontWeightB {font-weight:400;}
			.fontWeightC {font-weight:600;}
			.fontWeightD {font-weight:800;}
    </style>
  </head>
  <body>
		<section class="fontFamilyA"><h3>애국가</h3>
		<p class="fontFamilyA">동해물과 백두산이 마르고 닳도록(serif)</p>
		<p class="fontFamilyB">하느님이 보우하사 우리나라 만세(serif-sans)</p>
		<p><span class="fontSizeA">무궁화 삼천리 화려강산(fontsize 100%)</span></p>
		<p><span class="fontSizeB">대한사람 대한으로 길이 보전하세(fontsize 200%)</span></p>
		<p class="fontStyleA">남산 위에 저 소나무 철갑을 두른 듯 바람서리 불변함은 우리 기상일세(normal)</p>
		<p class="fontStyleB">가을 하늘 공활한데(Bottom) 높고 구름 없이 밝은 달은 우리 가슴 일편단심일세(italic)</p>
		<p class="fontStyleC">무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세(oblique)</p>
		<p class="fontWeightA">무궁화 삼천리 화려강산(fontweight200)</p>
		<p class="fontWeightB">대한사람 대한으로 길이 보전하세(400)</p>
		<p class="fontWeightC">이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세(600)</p>
		<p class="fontWeightD">무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세(800)</p>
		</section>
  </body>
</html>