문자 스타일
- 문자 색상: h1 { color: blue; }
<!DOCTYPE html>
<html>
<head>
<style>
h1 { text-align: center; }
h2 { text-align: left; }
h3 { text-align: right; }
</style>
</head>
<body>
<h1>Heading 1 (center)</h1>
<h2>Heading 2 (left)</h2>
<h3>Heading 3 (right)</h3>
<p>The three headings above are aligned center, left and right.</p>
</body>
</html>
- 문자 정렬(alignment): h1 { text-align: center; }
<!DOCTYPE html>
<html>
<head>
<style>
h2 { text-decoration: overline; }
h3 text-decoration: line-through; }
h4 { text-decoration: underline; }
</style>
</head>
<body>
<h1>Some different text decorations</h1>
<h2>Overline text decoration</h2>
<h3>Line-through text decoration</h3>
<h4>Underline text decoration</h4>
<p><strong>Note:</strong> It is not recommended to underline text that is not a link, as this often confuses
the reader.</p>
</body>
</html>
- 문자 장식(decoration): a { text-decoration: none; }
<!DOCTYPE html>
<html>
<head>
<style>
p.overline { text-decoration: overline; }
p.line { text-decoration: line-through; }
p.underline { text-decoration: underline; }
</style>
</head>
<body>
<h1>Using the text-transform property</h1>
<p class="overline">Overline text decoration</p>
<p class="line">Line-through text decoration</p>
<p class="underline">Underline text decoration</p>
</body>
</html>
- 문자 변환(transformation): a { text-transform: uppercase; }
<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase { text-transform: uppercase; }
p.lowercase { text-transform: lowercase; }
p.capitalize { text-transform: capitalize; }
</style>
</head>
<body>
<h1>Using the text-transform property</h1>
<p class="uppercase">This text is transformed to uppercase.</p>
<p class="lowercase">This text is transformed to lowercase.</p>
<p class="capitalize">This text is capitalized.</p>
</body>
</html>
- 문자 간격(spacing): letter-spacing, line-height, word-spacing, white-space
<!DOCTYPE html>
<html>
<head>
<style>
p.ls1 {letter-spacing: 3px;}
p.ls2 {letter-spacing: 2px;}
p.ls3 {letter-spacing: -1px;}
p.small {line-height: 0.7;}
p.big {line-height: 1.8;}
p.a {word-spacing: normal;}
p.b {word-spacing: 10px;}
p.c {word-spacing: 0.5cm;}
p.normal {white-space: normal;}
p.pre {white-space: pre;}
</style>
</head>
<body>
<h4>Letter Spacing</h4>
<p class="ls1">Letter Spacing 1(3px)</p>
<p class="ls2">Letter Spacing 2(2px)</p>
<p class="ls3">Letter Spacing 3(-1px)</p>
<h4>line-height</h4>
<p>
This is a paragraph with a standard line-height.(normal)<br>
The default line height in most browsers is about 110% to 120%.<br>
</p>
<p>
This is a paragraph with a smaller line-height.(0.7)<br>
This is a paragraph with a smaller line-height.<br>
</p>
<p>
This is a paragraph with a bigger line-height.(1.8)<br>
This is a paragraph with a bigger line-height.<br>
</p>
<h4>word-spacing</h4>
<p class="a">This is some text. This is some text.(normal)</p>
<p class="b">This is some text. This is some text.(10px)</p>
<p class="c">This is some text. This is some text.(0.5cm)</p>
<h4>white-space: normal:</h4>
<p class="normal">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
<h4>white-space: pre:</h4>
<p class="pre">
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>
글꼴 스타일
- 올바른 글꼴 사용의 중요성
- 읽기 쉬운 글꼴
- 글꼴의 올바른 색상
- 텍스트 크기
글꼴의 일반적인 종류
- Serif(명조): Times New Roman Georgia, Garamond 등
- Sans-serif(고딕): Arial, Verdana, Helvetica 등
- Monospace: Courier New, Lucida Console, Monaco 등
- Cursive
- Fantasy
글꼴 크기
| pixels |
em |
% |
points |
| 10 px |
0.625 em |
62.5% |
8 pt |
| 12 px |
0.75 em |
75% |
9 pt |
| 14 px |
0.875 em |
87.5% |
11 pt |
| 16 px |
1 em |
100% |
12 pt |
| 18 px |
1.125 em |
112.5% |
14 pt |
| 20 px |
1.25 em |
125% |
15 pt |
글꼴 속성 단축형
- { font: 20px Arial, sans-serif }
- font-style, font-size, line-height, font-family를 순서 없이 표현
<!DOCTYPE html>
<html>
<head>
<style>
p.a { font: 20px Arial, sans-serif; }
p.b { font: italic bold 12px/30px Georgia, serif; }
</style>
</head>
<body>
<h1>The font Property</h1>
<p class="a">This is a paragraph. The font size is set to 20 pixels, and the font family is Arial.</p>
<p class="b">This is a paragraph. The font is set to italic and bold, the font size is set to 12 pixels, the line height is set to 30 pixels, and the font family is Georgia.</p>
</body>
</html>
문자와 글꼴 활용 예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>웹폰트로 디자인하다.</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="frame">
<h1>웹폰트의 활용</h1>
<p>
웹폰트를 사용하면, 글꼴을 다양하게 할 수 있을 뿐만 아니라<br>
(벡터) 아이콘, 로고 등을 웹페이지에 사용할 수 있다.
</p>
<div class="btns">
<a href="https://www.facebook.com/" class="btn"><i class="fab fa-facebook"></i> Facebook</a>
<a href="https://www.apple.com/" class="btn"><i class="fab fa-apple"></i> Apple</a>
<a href="https://www.amazon.com/" class="btn"><i class="fab fa-amazon"></i> Amazon</a>
<a href="https://www.youtube.com/" class="btn"><i class="fab fa-youtube"></i> Youtube</a>
<a href="https://www.microsoft.com/" class="btn"><i class="fab fa-microsoft"></i> Microsoft</a>
<a href="https://www.google.com/" class="btn"><i class="fab fa-google"></i> Google</a>
</div>
<div class="links">
<span>폰트 어썸 & 구글 폰트</span>
<a href="https://fontawesome.com/">Font Awesome</a>
<a href="https://fonts.google.com/">Google Fonts</a>
<a href="https://fonts.google.com/icons">Google Icons</a>
</div>
</div>
</body>
</html>
@import url('href="https://fonts.googleapis.com');
@import url('https://use.fontawesome.com/releases/v5.15.4/css/all.css');
body {
font-family: 'Jua', sans-serif;
font-size: 18px;
line-height: 1.6em;
color: #333;
background-color: #f8f8f8;
}
a {
text-decoration: none;
color: #333;
}
/* Font Icon UI Design */
.frame {
width: 600px;
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.frame h1 { font-size: 48px; }
.frame p {
font-size: 20px;
color: #aaa;
margin-bottom: 30px;
}
.btns { margin-bottom: 30px; }
.btns a:hover{
color: #fff;
background-color: dodgerblue;
}
.btn{
border: 1px solid #ccc;
padding: 12px;
margin: 3px;
border-radius: 5px;
box-shadow: 0 3px 0 #ddd;
width: 240px;
display: inline-block;
font-size: 20px;
}
.links { font-size: 14px; }
.links span { color: #bbb; }
.links a { color: dodgerblue; }
.links a:before {
content: '|';
color: #ccc;
font-size: 12px;
margin: 5px;
}
.links a:hover { text-decoration: underline; }
span{ font-family: 'Nanum Gothic', sans-serif; }
