๐ซ display : inline-block ์ฌ์ฉ ๋ฒ
๊ฐ๋ก๋ก ์ ๋ ฌํ ๋ display : inline-block์ ์ฌ์ฉํ๋ ๊ฒ๋ ๊ฐ๋ฅ
<div>
<div class="left-box"></div><div class="right-box"></div>
</div>
.left-box {
width : 100px;
height : 100px;
display : inline-block;
}
.right-box {
width : 100px;
height : 100px;
display : inline-block;
}
display ์์ฑ๋ง inline-block์ผ๋ก ์กฐ์ ํ๋ฉด ๊ฐ๋ก๋ก ๋ฐฐ์น๊ฐ ๊ฐ๋ฅ
inline- block์ "๋ด ํญ๊ณผ ๋์ด๋งํผ ์๋ฆฌ ์ฐจ์งํ๊ฒ ํด์ฃผ์ธ์~" ๋ผ๋ ๋ป
๊ฐํธํ์ง๋ง <ํ๊ทธ> ์ฌ์ด์ ์คํ์ด์ค๋ฐ ๊ณต๋ฐฑ์ด ์๋ค๋ฉด ๊ทธ๋๋ก ๋ณด์ฌ์ฃผ๊ธฐ ๋๋ฌธ์ ๊ฐ๋ก๋ก ์ ๋ ฌํ๋ ค๋ฉด ํ๊ทธ ์ฌ์ด์ ๊ณต๋ฐฑ๋ ์ ๊ฑฐํด์ค์ผ ํจ
ย
โญ ๊ณต๋ฐฑ ์ ๊ฑฐ ํธ๋ฒ 1. ์ฃผ์ ์ฒ๋ฆฌ ๊ธฐํธ ์ฌ์ฉํ๊ธฐ
<div>
<div class="left-box"></div><!--
--><div class="right-box"></div>
</div>
โญ ๊ณต๋ฐฑ ์ ๊ฑฐ ํธ๋ฒ 2. ๋ถ๋ชจ์ ํฐํธ ์ฌ์ด์ฆ๋ฅผ 0์ผ๋ก ๋ง๋ค๊ธฐ
<div style="font-size : 0px;">
<div class="left-box"></div>
<div class="right-box"></div>
</div>
ย
๐ซ ์ค๋์ ์์ : ์๋ ์ฌ์ง๊ณผ ๋น์ทํ๊ฒ ๋ง๋ค์ด์ค๊ธฐ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="css/a.css" rel="stylesheet">
</head>
<body>
<div class="test">
<div class="header">
<div class="header1"><img src="img1.jpg" class="img1"></div>
<div class="header2">
<h2>์ฟ ๋ก๋ฏธ</h2>
<p>2์๊ฐ์ </p>
</div>
</div>
<div class="left">
<h3>๋ง์ด๋ฉ๋ก๋ ์ธ๊ณ๊ด</h3>
<p>์ฑ๋ณ: ์ฌ์ฑ</p>
<p>์ฑ๊ฒฉ: ์ฌ์ค์ ์์ฒญ ์ฌ์ฑ์ค๋ฌ์!?</p>
</div>
<div class="right">
<img src="img1.jpg" height="100%" width="100%">
</div>
<div class="footer"></div>
</div>
</body>
</html>
.test{
width: 500px;
height: 150px;
}
.header{
/* margin-top: 15px; */
width: 100%;
height: 40%;
/* background-color: aqua; */
float: left;
}
.left{
width: 85%;
height: 55%;
/* background-color: rgb(153, 195, 197); */
float: left;
line-height: 40%;
}
.right{
width: 15%;
height: 55%;
/* background-color: green; */
float: left;
}
.footer{
width: 100%;
height: 5%;
/* background: grey; */
clear:both;
}
.header1{
width: 14%;
height: 100%;
float: left;
}
.header2{
width: 86%;
height: 100%;
line-height: 40%;
float: left;
padding-left: 10px;
box-sizing: border-box;
}
.img1{
width: 100%;
height: 100%;
border-radius: 50%;
}