display속성
<style>
body div:nth-child(1) {
width:100px;
height:100px;
background-color:#ff0000;
color:#ffffff;
font-weight:bold;
text-align:center;
}
body div:nth-child(2) {
width:100px;
height:100px;
background-color:#00ff00;
color:#ffffff;
font-weight:bold;
text-align:center;
}
body div:nth-child(3) {
width:100px;
height:100px;
background-color:#0000ff;
color:#ffffff;
font-weight:bold;
text-align:center;
}
body div:nth-child(4) {
width:100px;
height:100px;
background-color:#ff0000;
color:#ffffff;
font-weight:bold;
text-align:center;
}
body div:nth-child(5) {
width:100px;
height:100px;
background-color:#00ff00;
color:#ffffff;
font-weight:bold;
text-align:center;
display:inline;
margin:10px 10px 10px 10px;
}
body div:nth-child(6) {
width:100px;
height:100px;
background-color:#0000ff;
color:#ffffff;
font-weight:bold;
text-align:center;
display:inline;
}
body div:nth-child(7) {
width:100px;
height:100px;
background-color:#ff0000;
color:#ffffff;
font-weight:bold;
text-align:center;
display:none;
}
body div:nth-child(8) {
width:100px;
height:100px;
background-color:#00ff00;
color:#ffffff;
font-weight:bold;
text-align:center;
display:inline;
}
body div:nth-child(9) {
width:100px;
height:100px;
background-color:#0000ff;
color:#ffffff;
font-weight:bold;
text-align:center;
display:inline-block;
}
</style>
</head>
<body>
<div>
content1
</div>
<div>
content2
</div>
<div>
content3
</div>
<div>
content4
</div>
<div>
content5
</div>
<div>
content6
</div>
<div>
content7
</div>
<div>
content8
</div>
<div>
content9
</div>
</body>
박스 모델
float
<style>
img {
float: left;
}
p {
border: 1px solid blue;
</style>
</head>
<body>
<h2>Float Left</h2>
<p>In this example, the image will float to the left in the paragraph, and the text in the paragraph will wrap around the image.</p>
<p><img src="pineapple.jpg" alt="Pineapple" style="width:170px;height:170px;margin-right:15px;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>
</body>- img요소가 float속성을 적용시켰기 때문에 content를 제외한 다른 요소보다 위에 뜬다.
➡그래서 p태그의 content내용은 img와 겹치지 않지만 border는 크기를 지정안했기 때문에 img밑에 깔려버린다.
<style>
#nav {
width: 800px;
margin: 0 auto;
border: 1px solid #cccccc;
overflow: hidden ;
}
#nav div {
width: 150px;
float: left;
/* menu1부터 뛰우고 왼쪽부터 순차적으로 정령(nav의 border는 div요소가 뛰어졌기 때문에 위에 합쳐짐.) */
height: 100px;
line-height: 100px;
text-align: center;
font-size: 1.5em;
border-top: 1px solid #cccccc;
border-bottom: 1px solid #cccccc;
margin: 5px;
}
</style>
</head>
<body>
<div id="nav">
<div>menu1</div>
<div>menu2</div>
<div>menu3</div>
<div>menu4</div>
<div>menu5</div>
</div>
</body>
