frame.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
</head>
<frameset rows="60%,240%">
<frame src="top.html"/>
<frameset cols="10%,60%">
<frame src="left.html"/>
<frame src="right.html"/>
</frameset>
</frameset>
</html>
top.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko"><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title></title>
</head>
<body style="background-color: yellow;">
top
</body>
</html>
left,right도 유사하게.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr" />
<title> position-layout-3 </title>
<style type="text/css" media="screen">
body { margin: 0;padding: 0; }
#header { height: 40px; background: red; }
#content { margin-right: 34%; background: gray; }
#sidebar {
position: absolute; top: 40px;
right: 0; width: 30%; background: yellow;
}
#footer {padding: 20px; background: blue; }
</style>
</head>
<body>
<div id="header"> 헤더 영역 </div>
<div id="sidebar"> 사이드바 영역 </div>
<div id="content"> 콘텐츠 영역 </div>
<div id="footer"> 푸터 영역 </div>
</body>
</html>
Selector
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<style type="text/css">
/*h2{
color:blue;}
h2, span, .cls{
color:green;}
*/
p span{color:orange;}
#p1 { color: rgb(150,150,0); }
#p2 { font-size: 12pt;
color: rgb(100,0,100); }
#p3 { font-size: 1em;
color: #9933366; }
#p4 { font-size: 2em;
color: maroon; }
#p5 { font-size: 3em;
color: fuchsia; }
.one {background-color: olive;}
</style>
<title>Insert title here</title>
</head>
<body>
<p id="p1" class="one">안녕?</p1>
<p id="p2">안녕?</p2>
<p id="p3">안녕?</p3>
<p id="p4">안녕?</p4>
<p id="p5">안녕?</p5>
</body>
</html>
MarginTest
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">
<head>
<meta http-equiv="content-type" content="text/html; charset=euc-kr" />
<title> border-style.html </title>
<style type="text/css">
.my1 {
border-top-style: solid;
border-bottom-style: dashed;
border-left-style: solid;
border-right-style: solid;
}
.my2 {
border-top-style: inset;
border-bottom-style: inset;
border-left-style: inset;
border-right-style: inset;
}
.my3 {
border-top-style: ridge;
border-bottom-style: ridge;
border-left-style: ridge;
border-right-style: ridge;
}
</style>
</head>
<body>
<p>올드 팝송</p>
<div class="my1"> <h1>what a wonderful world : steavie
wonder</h1></div><br />
<div class="my2"> <h1>diana : paul anka</h1></div> <br />
<div class="my3"> <h1>sunday girl : blondie</h1></div> <br />
</body>
</html>