HTML 문서에서 자주 사용하는 글자 표현 방법에 관한 예제를 살펴보겠습니다.
Headings : h1 ~ h6을 기본 스타일로 사용하기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>브라우저 기본 제목 스타일</title>
</head>
<body>
<h1>Heading 1 (h1)</h1>
<h2>Heading 2 (h2)</h2>
<h3>Heading 3 (h3)</h3>
<h4>Heading 4 (h4)</h4>
<h5>Heading 5 (h5)</h5>
<h6>Heading 6 (h6)</h6>
</body>
</html>크기는 중요하지 않습니다 : CSS로 선택하는 모든 크기의 헤딩 만들기
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>제목에 스타일 적용</title>
<style>
h1 {
font-size: 0.67em;
margin: 2.33em 0;
}
h2 {
font-size: 0.83em;
margin: 1.67em 0;
}
h3 {
margin: 1.33em 0;
}
h4 {
font-size: 1.17em;
margin: 1em 0;
}
h5 {
font-size: 1.5em;
margin: .83em 0;
}
h6 {
font-size: 2em;
margin: .67em 0;
}
</style>
</head>
<body>
<h1>Heading 1 (h1)</h1>
<h2>Heading 2 (h2)</h2>
<h3>Heading 3 (h3)</h3>
<h4>Heading 4 (h4)</h4>
<h5>Heading 5 (h5)</h5>
<h6>Heading 6 (h6)</h6>
</body>
</html>Bold, italics, case 및 줄 간격(line-height) : font-weight, font-style, font-variant, text-transform, line-height
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bold, italics, case와 line-height</title>
<style>
body {
font-size: 25px;
}
p {
margin: 50px 0;
}
code {
color: #c00;
}
#p1 {
font-weight: bold;
}
#p2 {
font-style: italic;
}
#p3 {
font-variant: small-caps;
}
#p4 {
text-transform: uppercase;
}
#p5 {
line-height: 2;
}
</style>
</head>
<body>
<p id="p1"><code>font-weight</code>: Bold or light text. Eg. <code>font-weight: bold;</code></p>
<p id="p2"><code>font-style</code>: Italic or oblique text. Eg. <code>font-style: italic;</code></p>
<p id="p3"><code>font-variant</code>: Small capitals. Replaces lowercase letters with uppercase letters that are a similar height to the original lowercase ones. Eg. <code>font-variant: small-caps;</code></p>
<p id="p4"><code>text-transform</code>: Converts the case of letters, to uppercase, lowercase, or capitalized. Eg. <code>text-transform: uppercase;</code></p>
<p id="p5"><code>line-height</code>: The minimal height for a line of text. Apparnet in longer lines, such as "The green seed of the white-flowering climbing leguminous papilionaceous plant, <em>Pisum sativum</em>, has become a dining-table favourite for good reason. The <strong>perfect</strong> accompaniment to any meal, the diminutive spherical vegetables brings joy to billions worldwide, be they fresh, frozen, canned or dried." Eg. <code>line-height: 2;</code></p>
</body>
</html>Font families : 글꼴 패밀리(font-family) 목록 및 일반 대체 글꼴 패밀리(generic fallback font families)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Font families</title>
<style>
h2 { color: green; }
#p1 { font-family: Times, "Times New Roman", serif; }
#p2 { font-family: Helvetica, Arial, sans-serif; }
#p3 { font-family: serif; }
#p4 { font-family: sans-serif; }
#p5 { font-family: monospace; }
#p6 { font-family: cursive; }
#p7 { font-family: fantasy; }
.s1 { font-style: italic; }
.s2 { font-style: oblique; }
.s3 { font-weight: bold; }
.s4 { font-weight: 100; }
</style>
</head>
<body>
<h1>Font Families</h1>
<p>Used with CSS. Two common font combination lists and the five generic fallback font families.</p>
<h2>font-family: Times, "Times New Roman", serif</h2>
<p id="p1">
Behold! A serif font family list!
<span class="s1">It swooshes with an italic font-style!</span>
<span class="s2">It leans with an oblique font-style!</span>
<span class="s3">It puffs out with a bold font-weight!</span>
<span class="s4">It sucks in with a 100 font-weight!</span>
</p>
<h2>font-family: Helvetica, Arial, sans-serif</h2>
<p id="p2">
Behold! A sans-serif font family list!
<span class="s1">It swooshes with an italic font-style!</span>
<span class="s2">It leans with an oblique font-style!</span>
<span class="s3">It puffs out with a bold font-weight!</span>
<span class="s4">It sucks in with a 100 font-weight!</span>
</p>
<h2>font-family: serif</h2>
<p id="p3">
Behold! The serif generic font family!
<span class="s1">It swooshes with an italic font-style!</span>
<span class="s2">It leans with an oblique font-style!</span>
<span class="s3">It puffs out with a bold font-weight!</span>
<span class="s4">It sucks in with a 100 font-weight!</span>
</p>
<h2>font-family: sans-serif</h2>
<p id="p4">
Behold! The sans-serif generic font family!
<span class="s1">It swooshes with an italic font-style!</span>
<span class="s2">It leans with an oblique font-style!</span>
<span class="s3">It puffs out with a bold font-weight!</span>
<span class="s4">It sucks in with a 100 font-weight!</span>
</p>
<h2>font-family: monospace</h2>
<p id="p5">
Behold! The monospace generic font family!
<span class="s1">It swooshes with an italic font-style!</span>
<span class="s2">It leans with an oblique font-style!</span>
<span class="s3">It puffs out with a bold font-weight!</span>
<span class="s4">It sucks in with a 100 font-weight!</span>
</p>
<h2>font-family: cursive</h2>
<p id="p6">
Behold! The cursive font family!
<span class="s1">It swooshes with an italic font-style!</span>
<span class="s2">It leans with an oblique font-style!</span>
<span class="s3">It puffs out with a bold font-weight!</span>
<span class="s4">It sucks in with a 100 font-weight!</span>
</p>
<h2>font-family: fantasy</h2>
<p id="p7">
Behold! The fantasy generic font family!
<span class="s1">It swooshes with an italic font-style!</span>
<span class="s2">It leans with an oblique font-style!</span>
<span class="s3">It puffs out with a bold font-weight!</span>
<span class="s4">It sucks in with a 100 font-weight!</span>
</p>
</body>
</html>글자 크기 : 절대 및 상대 단위
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Font sizes</title>
<style>
* {
margin: 0;
}
body {
font-size: 20px;
line-height: 1.5;
margin: 20px;
}
code {
color: #c00;
}
h2 {
margin-top: 20px;
}
#len1 {
font-size: 12px;
}
#len2 {
font-size: 12pt;
}
#len3 {
font-size: 12q;
}
#len4 {
font-size: 1.2ex;
}
#len5 {
font-size: 1.2em;
}
#len6 {
font-size: 1.2vmax; /* not supported by Internet Explorer */
}
#pc1 {
font-size: 50%;
}
#pc2 {
font-size: 100%;
}
#pc3 {
font-size: 150%;
}
#kw1 {
font-size: x-small;
}
#kw2 {
font-size: medium;
}
#kw3 {
font-size: x-large;
}
</style>
</head>
<body>
<h1>Font Sizes</h1>
<p>Font sizes can be set using the <code>font-size</code> property, the value of which can be a length, percentage, or keyword.</p>
<h2>Lengths</h2>
<h3>Absolute lengths</h3>
<ul>
<li><code id="len1">font-size: 12px</code></li>
<li><code id="len2">font-size: 12pt</code></li>
<li><code id="len3">font-size: 12q</code></li>
</ul>
<h3>Relative lengths</h3>
<ul>
<li><code id="len4">font-size: 1.2ex</code></li>
<li><code id="len5">font-size: 1.2em</code></li>
<li><code id="len6">font-size: 1.2vmax</code></li>
</ul>
<h2>Percentage</h2>
<ul>
<li><code id="pc1">font-size: 50%</code></li>
<li><code id="pc2">font-size: 100%</code></li>
<li><code id="pc3">font-size: 150%</code></li>
</ul>
<h2>Keywords</h2>
<ul>
<li><code id="kw1">font-size: x-small</code></li>
<li><code id="kw2">font-size: medium</code></li>
<li><code id="kw3">font-size: x-large</code></li>
</ul>
</body>
</html>글자 간격 : text-align, text-indent, word-spacing, letter-spacing
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Text-align, text-indent, word and letter spacing</title>
<style>
body {
font: 150% arial, helvetica, sans-serif;
}
#p5 {
text-indent: 2em;
word-spacing: 1em;
}
#p6 {
text-align: justify;
letter-spacing: 0.1em;
}
</style>
</head>
<body>
<p id="p5">Even leaving aside the astounding nutritional package, the taste explosion and texture of a well cooked pea is undeniably enough to award this deceptively simple seed the gold-medal of the foodstuff Olympics.</p>
<p id="p6">There is debate surrounding the tampering of the form of the original spherical vegetable. The question as to whether the 'mushy' pea is sacrilege or an innovative approach to re-package the perfect product is a sensitive issue. A similar argument arises when approaching the relatively new craze of mangetout. In-depth study is required, but for now it is too early to assess the true importance of this baby pea pod.</p>
</body>
</html>수직 정렬 : vertical-align
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vertical-align</title>
<style>
p {
font: 1em arial, helvetica, sans-serif;
width: 780px;
}
#va {
font-size: 40px;
}
#zero {
font-size: 0.5em;
vertical-align: text-top;
}
#one {
font-size: 0.5em;
vertical-align: top;
}
#two {
vertical-align: -0.5em;
}
#three {
font-size: 0.5em;
vertical-align: middle;
}
#four {
font-size: 0.5em;
vertical-align: sub;
}
#five {
font-size: 1.5em;
vertical-align: 0.5em;
}
#six {
font-size: 0.5em;
vertical-align: super;
}
#seven {
color: #0a0;
vertical-align: super;
}
</style>
</head>
<body>
<p id="va"><span id="zero">A</span> daft <span id="one">example</span> to <span id="two">show</span> what <span id="three">can</span> be <span id="four">achieved</span> with the <code id="five">vertical-align</code> CSS <span id="six">property</span>.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in <span id="seven">Boo!</span> voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>아래 첨자와 위첨자 : 위치 지정을 vertical-align속성 의 대안으로 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Superscript and subscript</title>
<style>
body { font: 100% "Times New Roman", Times, serif }
p { line-height: 1.5 }
.charge {
position: relative;
bottom: 0.5em;
color: red;
font-size: 0.8em;
}
.atoms {
position: relative;
top: 0.3em;
color: blue;
font-size: 0.8em;
}
</style>
</head>
<body>
<p>My name is Doctor Womac and I am going to teach you all about chemical formulae. A chemical formula is a way to describe the chemical elements that make up a particular chemical compound. It consists of chemical symbols to covey the elements and numbers to show the number of atoms of each element. H<span class="atoms">2</span>SO<span class="atoms">4</span> is the chemical formula for sulphur for example. The charge of an ion can be displayed in superscript, such as Au<span class="charge">2+</span>. This concludes my lesson. I must rush off home now because I have a problem with some radioactive phosphate.</p>
</body>
</html>그림자 글자
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Text shadows</title>
<style>
body {
font: 20px/2 "times new roman", times, serif;
color: #000;
}
h1 {
text-shadow: -2px 2px 2px #999;
}
em {
font-weight: bold;
padding: 8px;
}
#elephant {
color: #eee;
background: #999;
text-shadow: 2px 1px 0 #000;
}
#plesiosaur {
background: #bde;
color: #06c;
text-shadow: 0 -3px 1px #fff;
}
#tourist {
color: #efa;
background: #be0;
text-shadow: 0 0 4px #360;
}
</style>
</head>
<body>
<h1>A little tale accompanied by a little text shadow</h1>
<p>In Botswana's Chobe National Park, <em id="elephant">an elephant with an especially large trunk</em> is minding its own business when <em id="plesiosaur">a plesiosaur with five heads, two tails, and the legs of a lion</em> falls out of the sky and lands on the elephant's back.</p>
<p>"Hah hah! That's hilarious!", says the plesiosaur, "Your trunk is huge!"</p>
<p><em id="tourist">A stunned tourist in a nearby Jeep</em> drops his camera, stares in amazement, and excitedly taps his wife on the shoulder.</p>
<p>"Look, honey! That's amazing! The talking prehistoric marine reptile with five heads, two tails, and the legs of a lion that fell out of the sky is right! That elephant's trunk is ginormous!"</p>
</body>
</html>간단한 드롭 캡(drop caps) : 일반적인 효과를 얻을 수있는 간단한 방법입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Drop caps 1</title>
<style>
body {
font: 15px/1.5 arial, helvetica, sans-serif;
}
p:first-letter {
float: left;
font-size: 45px;
line-height: 1;
font-weight: bold;
margin-right: 9px;
}
</style>
</head>
<body>
<p>Once upon a time in a blueberry bubblegum land covered in pink violets that swayed to the rhythm of "My Baby Just Cares for Me" there lived a podgy yet attractive raspberry fairy called Bedooda. Bedooda was as tall as a button bush and as intelligent as a peach mystic from the Unscented Hills (not the Scented Hills - the mystics there were not too bright) and was an adored member of the raspberry family but she was an unhappy raspberry fairy. As unhappy as a lost sunfish from the Sweet Spaghetti River.</p>
</body>
</html>장식 드롭 캡(drop caps)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Fancy drop caps</title>
<style>
body {
font: 15px/1.5 arial, helvetica, sans-serif;
}
p:first-letter {
float: left;
font-size: 45px;
line-height: 1;
font-weight: bold;
margin-right: 9px;
color: #9c0;
font-family: "Times New Roman", Times, serif;
text-shadow: #690 .05em .05em;
}
</style>
</head>
<body>
<p>Once upon a time in a blueberry bubblegum land covered in pink violets that swayed to the rhythm of "My Baby Just Cares for Me" there lived a podgy yet attractive raspberry fairy called Bedooda. Bedooda was as tall as a button bush and as intelligent as a peach mystic from the Unscented Hills (not the Scented Hills - the mystics there were not too bright) and was an adored member of the raspberry family but she was an unhappy raspberry fairy. As unhappy as a lost sunfish from the Sweet Spaghetti River.</p>
</body>
</html>그래픽 드롭 캡(drop caps) : 이미지 사용
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Drop caps 2</title>
<style>
body {
font: 15px/2 arial, helvetica, sans-serif;
}
p:first-letter {
float: left;
font-size: .1px;
background: url("./img/o.gif") no-repeat;
padding: 50px 0 0 40px;
margin-right: 9px;
}
</style>
</head>
<body>
<p>Once upon a time in a blueberry bubblegum land covered in pink violets that swayed to the rhythm of "My Baby Just Cares for Me" there lived a podgy yet attractive raspberry fairy called Bedooda. Bedooda was as tall as a button bush and as intelligent as a peach mystic from the Unscented Hills (not the Scented Hills - the mystics there were not too bright) and was an adored member of the raspberry family but she was an unhappy raspberry fairy. As unhappy as a lost sunfish from the Sweet Spaghetti River.</p>
</body>
</html>첫 단락 드롭 캡 대문자 : 첫 번째 단락의 첫 번째 글자를 대상으로 지정합니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Drop caps 3</title>
<style>
body {
font: 15px/2 arial, helvetica, sans-serif;
}
p:first-of-type:first-letter {
float: left;
font-size: 45px;
line-height: 1;
font-weight: bold;
margin-right: 9px;
}
</style>
</head>
<body>
<p>Once upon a time in a blueberry bubblegum land covered in pink violets that swayed to the rhythm of "My Baby Just Cares for Me" there lived a podgy yet attractive raspberry fairy called Bedooda.</p>
<p>Bedooda was as tall as a button bush and as intelligent as a peach mystic from the Unscented Hills (not the Scented Hills - the mystics there were not too bright) and was an adored member of the raspberry family but she was an unhappy raspberry fairy. As unhappy as a lost sunfish from the Sweet Spaghetti River.</p>
<p>The End.</p>
</body>
</html>따옴표 붙이기 1 : 단순한 따옴표 구조
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pull quotes 1</title>
<style>
body {
font: 13px/1.5 arial, helvetica, sans-serif;
}
article {
width: 500px;
}
.pquote {
float: left;
width: 100px;
background: #ddf;
font-weight: bold;
padding: 13px;
margin: 0 13px 13px 0;
}
blockquote {
margin: 0;
}
</style>
</head>
<body>
<article>
<p>If ever there was evidence of God, the humble pea is it.</p>
<p>Mother Nature has never created something of such perfection, something that takes Darwin's theory of evolution to the extent that a natural element can, over millions of years, evolve into something so flawless.</p>
<aside class="pquote">
<blockquote>
<p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
</blockquote>
</aside>
<p>The green seed of the white-flowering climbing leguminous papilionaceous plant, pisum sativum, has become a dining-table favourite for good reason.</p>
<p>The perfect accompaniment to any meal, the diminutive spherical vegetable brings joy to billions worldwide, be they fresh, frozen, canned or dried.</p>
<p>Even leaving aside the astounding nutritional package, the taste explosion and texture of a well cooked pea is undeniably enough to award this deceptively simple seed the gold-medal of the foodstuff Olympics.</p>
<p>There is debate surrounding the tampering of the form of the original spherical vegetable. The question as to whether the 'mushy' pea is sacrilege or an innovative approach to re-package the perfect product is a sensitive issue. A similar argument arises when approaching the relatively new craze of mangetout. In-depth study is required, but for now it is too early to assess the true importance of this baby pea pod.</p>
<p>In its original form, the pea is a giant amongst food products and a deity of the vegetable world. It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
</article>
</body>
</html>따옴표 붙이기 2 : 약간의 스타일 추가
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pull quotes 2</title>
<style>
body {
font: 13px/1.5 arial, helvetica, sans-serif;
}
article {
width: 500px;
}
.pquote {
float: right;
width: 200px;
background-image: url("./img/openquote.gif") top left no-repeat;
color: #030;
font-size: 26px;
line-height: 0.9;
font-style: italic;
padding: 13px;
}
blockquote {
margin: 0;
}
.pquote p:first-letter {
font-size: 39px;
font-weight: bold;
}
</style>
</head>
<body>
<article>
<p>If ever there was evidence of God, the humble pea is it.</p>
<p>Mother Nature has never created something of such perfection, something that takes Darwin's theory of evolution to the extent that a natural element can, over millions of years, evolve into something so flawless.</p>
<aside class="pquote">
<blockquote>
<p>It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
</blockquote>
</aside>
<p>The green seed of the white-flowering climbing leguminous papilionaceous plant, pisum sativum, has become a dining-table favourite for good reason.</p>
<p>The perfect accompaniment to any meal, the diminutive spherical vegetable brings joy to billions worldwide, be they fresh, frozen, canned or dried.</p>
<p>Even leaving aside the astounding nutritional package, the taste explosion and texture of a well cooked pea is undeniably enough to award this deceptively simple seed the gold-medal of the foodstuff Olympics.</p>
<p>There is debate surrounding the tampering of the form of the original spherical vegetable. The question as to whether the 'mushy' pea is sacrilege or an innovative approach to re-package the perfect product is a sensitive issue. A similar argument arises when approaching the relatively new craze of mangetout. In-depth study is required, but for now it is too early to assess the true importance of this baby pea pod.</p>
<p>In its original form, the pea is a giant amongst food products and a deity of the vegetable world. It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
</article>
</body>
</html>인용 부호 3 : 보다 정교한 스타일
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Pull quotes 3</title>
<style>
body {
font: 13px/1.5 arial, helvetica, sans-serif;
}
article {
width: 500px;
}
.quotebox {
float: left;
width: 200px;
background-color: #900;
background-image: url(./img/face-01.jpg) top no-repeat;
color: #fc0;
font-size: 12px;
line-height: 1.2;
padding-top: 71px;
border: 2px solid #600;
margin: 0 12px 12px 0;
}
.quotebox p {
margin: 0;
}
.quotebox blockquote {
font-weight: bold;
padding: 6px;
border-top: 2px solid #600;
margin: 0;
}
.quotebox .by {
padding: 6px;
}
</style>
</head>
<body>
<article>
<p>If ever there was evidence of God, the humble pea is it.</p>
<p>Mother Nature has never created something of such perfection, something that takes Darwin's theory of evolution to the extent that a natural element can, over millions of years, evolve into something so flawless.</p>
<aside class="quotebox">
<blockquote>
<p>It is my educated opinion that this is complete and utter tosh.</p>
</blockquote>
<p class="by">Patrick Griffiths (pea farmer)</p>
</aside>
<p>The green seed of the white-flowering climbing leguminous papilionaceous plant, pisum sativum, has become a dining-table favourite for good reason.</p>
<p>The perfect accompaniment to any meal, the diminutive spherical vegetable brings joy to billions worldwide, be they fresh, frozen, canned or dried.</p>
<p>Even leaving aside the astounding nutritional package, the taste explosion and texture of a well cooked pea is undeniably enough to award this deceptively simple seed the gold-medal of the foodstuff Olympics.</p>
<p>There is debate surrounding the tampering of the form of the original spherical vegetable. The question as to whether the 'mushy' pea is sacrilege or an innovative approach to re-package the perfect product is a sensitive issue. A similar argument arises when approaching the relatively new craze of mangetout. In-depth study is required, but for now it is too early to assess the true importance of this baby pea pod.</p>
<p>In its original form, the pea is a giant amongst food products and a deity of the vegetable world. It is not an exaggeration to say that peas can be described as nothing less than perfect spheres of joy.</p>
</article>
</body>
</html>
