<html>
<head>
<style>
.fontAttr
{
font-family:모아12,궁서,굴림; /* 글꼴 없으면 다음차레 글꼴.*/
font-style:italic; /* 글형태 (normal,italic(이태릭),oblique(기울임) */
font-weight:900; /* 글자굵기 100-900,normal(400),blod(700) */
font-size:50; /* 글자 크기 */
color:blue; /* 글자 색상 */
}
.space{ letter-spacing:5em }
.space1{ word-spacing:3em }
.line { line-height:35pt }
.nwrap { white-space:nowrap; }
.talign { text-align:justify;font-size:20; } /* text-align : 좌우정렬 : left,center,right,justify(좌우정렬) */
.taligna { text-align:left;font-size:20; }
.valign { vertical-align:bottom;font-size:20; } /* vertical-align : 세로방향정렬 : top,middle(기본값),bottom */
.f50 { font-size:50; }
.baseline { vertical-align:baseline;font-size:10; } /* vertical-align -- 계속 -- baseline(부모 베이스라인정렬) */
.vtextbottom { vertical-align:text-bottom;font-size:10; } /* vertical-align -- 계속 -- text-top/text-bottom(부모요소의 폰트 아래정렬) */
.vunit { vertical-align:5em;font-size:10; }/* vertical-align -- 계속 -- 5em(다섯배만큼 위쪽으로) */
.tdeco { text-decoration:underline overline; font-size:40 } /* text-decoration : underline(밑줄),overline(텍스트위),line-throuth(가운데선),none */
.bcolor { background-color:yellow;} /* background-color: 배경색상 */
</style>
</head>
<body>
<h1>글꼴에 대한 설정</h1>
<xmp>
<head>
<style>
.fontAttr
{
font-family:모아12,궁서,굴림; /* 글꼴 없으면 다음차레 글꼴.*/
font-style:italic; /* 글형태 (normal,italic(이태릭),oblique(기울임) */
font-weight:900; /* 글자굵기 100-900,normal(400),blod(700) */
font-size:50; /* 글자 크기 */
color:blue; /* 글자 색상 */
}
</style>
</head>
</xmp>
<p class="fontAttr">
글자임
</p>
<br>
<h1>문장과 문단을 제어</h1>
<xmp>
.space{ letter-spacing:5em }
.space1{ word-spacing:3em }
.line { line-height:35pt }
</xmp>
<p class="space">letter-spacing : 글자와 글자 사이의 간격을 조정</p>
<p class="space1">word-spacing : 단어사이의 간격을 조정</p>
<p class="line">line-height : 문단 줄간격..
`원룸형 주택`이 내년 상반기 송파구 삼전동에서 첫 공급된다.
도시형 생활주택의 한 유형으로, 고령자와 1~2인 가구가 입주하게 된다.
임대료는 주변 시세의 30% 수준이다.
<이 기사는 2일 오전 10시 35분 경제 재테크 케이블방송 이데일리TV
'종목작전타임 시즌3' 2부 프로그램에 방송된 내용입니다.
이데일리TV는 인터넷으로도 시청할 수 있습니다.
</p>

<table border="1" width="300" bordercolor="blue">
<tr>
<td>
이 문장은 white-space:normal을 테스트 하기 위한 문장입니다.
</td>
</tr>
</table>
<br>
.nwrap { white-space:nowrap; }
<br>
<table border="1" width="300" bordercolor="blue">
<tr>
<td class="nwrap">
이 문장은 white-space:nowrap을 테스트 하기 위한 문장입니다.
</td>
</tr>
</table>
<br><br>
기본모양.<br>
<table border="1" width="800" height="200">
<tr>
<td class="taligna">
`원룸형 주택`이 내년 상반기 송파구 삼전동에서 첫 공급된다.
도시형 생활주택의 한 유형으로, 고령자와 1~2인 가구가 입주하게 된다.
임대료는 주변 시세의 30% 수준이다.
<이 기사는 2일 오전 10시 35분 경제 재테크 케이블방송 이데일리TV
'종목작전타임 시즌3' 2부 프로그램에 방송된 내용입니다.
이데일리TV는 인터넷으로도 시청할 수 있습니다.
</td>
</tr>
</table>
<br>
text-align:justify;지정.<br>
<table border="1" width="800" height="200">
<tr>
<td class="talign">
`원룸형 주택`이 내년 상반기 송파구 삼전동에서 첫 공급된다.
도시형 생활주택의 한 유형으로, 고령자와 1~2인 가구가 입주하게 된다.
임대료는 주변 시세의 30% 수준이다.
<이 기사는 2일 오전 10시 35분 경제 재테크 케이블방송 이데일리TV
'종목작전타임 시즌3' 2부 프로그램에 방송된 내용입니다.
이데일리TV는 인터넷으로도 시청할 수 있습니다.
</td>
</tr>
</table>
<br>
vertical-align:bottom;지정.<br>
<table border="1" width="800" height="200">
<tr>
<td class="valign">
`원룸형 주택`이 내년 상반기 송파구 삼전동에서 첫 공급된다.
도시형 생활주택의 한 유형으로, 고령자와 1~2인 가구가 입주하게 된다.
임대료는 주변 시세의 30% 수준이다.
<이 기사는 2일 오전 10시 35분 경제 재테크 케이블방송 이데일리TV
'종목작전타임 시즌3' 2부 프로그램에 방송된 내용입니다.
이데일리TV는 인터넷으로도 시청할 수 있습니다.
</td>
</tr>
</table>
<br>
<div class="f50">기본글자
<span class="baseline">vertical-align:baseline; 베이스라인</span>
<span class="vtextbottom">vertical-align:text-bottom; 텍스트</span>
<span class="vunit">vertical-align:5em; 5em설정(다섯배만큼 위쪽으로 올라가서)</span>
</div>
<br><br>
<span class="tdeco">text-decoration:underline overline;글자에 장식</span>
<br>
</table>
</body>
</html>

Posted by 말없제이
,