그림과 같이 편집 해보기)
-----------------------------
<!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>
'html' 카테고리의 다른 글
| 배경스타일을 이용한 목록의 표현 (0) | 2011.01.16 |
|---|---|
| 배경색상, 배경이미지 지정 (0) | 2011.01.16 |
| 박스모델 (0) | 2011.01.16 |
| FONT, TEXT 관련 스타일 예제 (0) | 2011.01.16 |
| CSS 선택자의 우선순위 (0) | 2011.01.16 |