|
<div style='text-align:center;text-decoration:underline;font-weight:bold;font-size:20px;height:30px;line-height:30px;'>text</div>
style='
font-size:12pt;
font-weight:bold;
font-family:굴림;
font-style:italic;
text-decoration:underline;
text-align:center;
line-height:50pt;
cursor:hand;
width:70px;
height:70px;
background:#DDE7E7;
color:#666666;
padding:1pt;
padding-left:1pt;
padding-right:2pt;
padding-top:3pt;
padding-bottom:4pt;
border-width:thin;
border-width:medium;
border-width:thick;
border-color:red;
border-style:solid 테두리스타일:선
solid : 일반적인 선
dotted : 점선 (점들이 연속된 것처럼)
dashed : 파선 (연속한 긴 점선)
double : 복선 (두줄)
groove : 페이지에 홈이 있는 것처럼
ridge : 페이지위에 돌출된 것처럼
inset : 페이지를 들어가 보이게
outset : 페이지를 앞으로 나와 보이게
border-color:red 테두리칼라:붉은색
border-width:2px 굵기:2
position:absolute 위치:절대값
left:200px 왼쪽:200
top:200px 위:200
width:200
height:200px
text-align:center
background-color:#66FFFF 바탕색
visibility:hidden 차지하고 있는 자리는 그대로 두고 안보이게
display:none 차지하고 있는 자리도 안보이게
* 아래는 각 스타일에 대한 설명이다.
: font-family는 가장 먼저 존재하는 폰트를 적용하게 된다. (아래에 스펙 정리)
style="font-family: Helvetica, Verdana, sans-serif;"
style="font-family: Verdana, sans-serif;"
style="font-family: 굴림;"
style="font-family: 바탕;"
style="font-family: 궁서;"
style="font-family: 새굴림;"
: font-weight의 예
style="font-weight:normal"
style="font-weight:bold"
style="font-weight:bolder"
style="font-weight:lighter"
style="font-weight:100"
style="font-weight:200"
style="font-weight:300"
style="font-weight:400"
style="font-weight:500"
style="font-weight:600"
style="font-weight:700"
style="font-weight:800"
style="font-weight:900"
* font-weight를 숫자로 나타내면 해당하는 폰트에서 지원하는 weight만 나타나게 된다. 보통은 400, bold는 700을 기준으로 한다.
: font-style의 예
style="font-style: normal"
style="font-style: italic"
style="font-style: oblique"
* italic과 oblique는 시각적으로 같으나 italic은 폰트안에서 설정해줘야하는 스타일이고, oblique는 폰트 자체를 8~12도 정도 뉘운 스타일이다.
:font-size의 예
style="font-size: xx-small"
style="font-size:8pt"
style="font-size:10pt"
style="font-size:12pt"
style="font-size:14pt"
style="font-size:18pt"
style="font-size:24pt"
style="font-size:12pt"
style="font-size:14pt"
style="font-size:18pt"
style="font-size:18pt"
style="font-size:0.5em"
style="font-size:1em"
style="font-size:1.5em"
style="font-size:2em"
style="font-size:50%"
style="font-size:100%"
style="font-size:150%"
style="font-size:200%"
: font의 예
style="font: 12pt/14pt sans-serif"
style="font: 80% sans-serif"
style="font: bold italic large Palatino, serif"
style="font: normal small-caps 120%/120% fantasy"
style="font: oblique 12pt Helvetica, serif"
* 폰트의 종류를 선택
font-family
= <family name> | <generic name>
: 클라이언트마다 font-family가 달라지긴하지만 기본적으로 바탕, 굴림, 돋움, 궁서가 많이 쓰이고, 영어는 sans-serif, serif, cursive, fantasy, monospace를 많이 사용한다.
* 폰트의 두께를 설정
font-weight
= normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
: 100 - Thin ~ 900 - Heavy 로 이루어져있고, 폰트에서 지원하는 두께만을 표시한다. 400이 기본이고, 그것보다 작아지면 얇아지고 커지면 두꺼워진다.
: normal = 400, bold = 700, bolder와 lighter는 부모로부터 inherit된 값에 따라 달라진다.
* 폰트의 스타일을 설정
font-style
= normal | italic | oblique
: 기본은 normal이고 외적으로 italic과 oblique는 같으나 내부적으로 처리하는 방법이 다르다. italic은 폰트 내에서 같이 제공을 해줘야하지만 oblique는 폰트 자체를 눕히게 되는 것이다.
* 폰트 크기를 설정
font-size
= xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | 10pt ... 20pt | 1em ... 2em | 100% ... 200%
* 폰트를 한번에 설정
font
= [font-style | font-weight] font-size [/line-height] font-family
: 한번에 하려면 위와 같은 순서대로 쓰면 한번에 설정이 가능하다.
* 폰트 스타일 설정을 설정
@font-face
{ <font-description> }
: 여기서 <font-description>의 포맷은 아래와 같다.
descriptor: value;
descriptor: value;
: 그래서 만약에 온라인에 있는 새로운 폰트를 정의하고자 한다면 @font-face를 사용하면 된다.
: 굳이 원격에 있는 서버 폰트를 사용하지 않아도 로컬에서 자주사용하는 폰트 스타일이 있다면 위와 같이 font-face를 이용해서 정의해두고 사용하면 된다.
|
