박스모델 편집 예제
그림과 같이 편집 해보기)
-----------------------------
<!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-ｅquiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
<title> Box model... </title>
<style type="text/css">
*{
margin:0;padding:0;
font-family:Dotum,Helvetica,sans-serif
}
body{
font-size:12px;
}
.box{
width:530px;
border-bottom:5px solid #333;
margin:20px 20px 30px 20px;
padding:20px 0;
background:beige
}
.box p{
margin:0 15px 10px 15px;
}
</style>
</head>
<body>
<div class="box">
<p>This is my Basic CSS Box Model Demo, inspired by the good Jon Hicks.</p>
<p>Basically, drag the scrolly thing, and you get to see the padding/margins thing in faux-3D.</p>
<p>The W3C diagram looks like this</p>
<p>I first fully understood the box model when I saw this page at Brain Jar. To date, that is the best demonstration of how this all should work that I've seen. Read it all.</p>
<p>Normally I would do this sort of stuff in a nice XHTML 1.0 document, but I'm being a tad lax at the moment. Find me a browser where it doesn't work and I migh think about an update!</p>
<p>IE, as you would expect, likes to be the individual. That's a nice way of saying it doesn't handle borders the same as everyone else. This only really matters if you are doing dashed borders, and you probably shouldn't be using them anyway because they are ugly! But regardless, here is the info you need to get them working: Tom's site.</p>
<p>Best of luck, </p>
</div>
<div class="box">
<p>This is my Basic CSS Box Model Demo, inspired by the good Jon Hicks.</p>
<p>Basically, drag the scrolly thing, and you get to see the padding/margins thing in faux-3D.</p>
<p>The W3C diagram looks like this</p>
<p>I first fully understood the box model when I saw this page at Brain Jar. To date, that is the best demonstration of how this all should work that I've seen. Read it all.</p>
<p>Normally I would do this sort of stuff in a nice XHTML 1.0 document, but I'm being a tad lax at the moment. Find me a browser where it doesn't work and I migh think about an update!</p>
<p>IE, as you would expect, likes to be the individual. That's a nice way of saying it doesn't handle borders the same as everyone else. This only really matters if you are doing dashed borders, and you probably shouldn't be using them anyway because they are ugly! But regardless, here is the info you need to get them working: Tom's site.</p>
<p>Best of luck, </p>
</div>
</body>
</html>