web-crash-course


Text / 텍스트

Thickness / 굵기 Style / 스타일 Stretch / 장평
Light / 가는 글꼴 Normal / 보통 Condensed / 압축
Medium / 보통 Italic / 기울임 Regular / 보통
Demi-Bold / 반굵게 Oblique / 기울임 Expanded / 확장
Bold / 굵게 Bold / 굵게 Extra Expanded / 매우 확장
Extra Bold / 매우 굵게 Small Caps / 소문자 Ultra Expanded / 극도로 확장
Black / 두껍게 All Caps / 대문자 Ultra Expanded / 극도로 확장
Extra Black / 매우 두껍게 Capitalize / 첫 글자 대문자 Ultra Expanded / 극도로 확장
Font Family / 글꼴 패밀리 Font Name / 글꼴 이름 Korean Font / 한글 글꼴
Serif Times 돋움체
Serif Georgia 궁서체
Sans-Serif Arial 맑은 고딕
Sans-Serif Verdana 굴림체
Monospace Courier Courier
Cursive Comic Sans MS 굴림체
Fantasy Impact 굴림체
font-family: "Times New Roman", Times, serif;
font-family: Arial, Helvetica, sans-serif;

font-size: 12px;
font-size: 0.8em;
font-size: 80%;
font-size: 1.2rem;

font-weight: normal;
font-weight: bold;
font-weight: 100;
font-weight: 900;

font-style: normal;
font-style: italic;
font-style: oblique;

text-transform: uppercase;
text-transform: lowercase;
text-transform: capitalize;

text-decoration: none;
text-decoration: underline;
text-decoration: overline;
text-decoration: line-through;
text-decoration: blink;

line-height: 1.5;
line-height: 1.5em;
line-height: 150%;
line-height: 1.5rem;

letter-spacing: 1px;
letter-spacing: 0.1em;
letter-spacing: 10%;
letter-spacing: 0.1rem;

word-spacing: 1px;
word-spacing: 0.1em;
word-spacing: 10%;
word-spacing: 0.1rem;

text-align: left;
text-align: right;
text-align: center;
text-align: justify;

vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: top;
vertical-align: text-top;
vertical-align: middle;
vertical-align: bottom;
vertical-align: text-bottom;

text-indent: 10px;
text-indent: 1em;
text-indent: 100%;
text-indent: 1rem;

text-shadow: 1px 1px 1px #000000;
text-shadow: 1px 1px 1px #000000, 2px 2px 2px #666666;
p:first-letter {
  font-size: 200%;
  float: left;
  margin-right: 0.1em;
  margin-top: 0.1em;
}

p:first-line {
  font-weight: bold;
}

a:link {
  color: #ff0000;
}

a:visited {
  color: #00ff00;
}

a:hover {
  color: #0000ff;
}

a:active {
  color: #000000;
}

input:focus {
  background-color: #ffff00;
}