<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>๋์คํ๋ ์ด(์ค์)</title>
</head>
<style>
/*
inline : ์ธ๋ผ์ธ ์์ฑ์ผ๋ก ๋๋ค.
=> ์์ ์๋ ์์๋งํผ๋ง ํฌ๊ธฐ๋ฅผ ์ฐจ์งํด์ width, height ์๋๋ค
block : block ์์ฑ์ผ๋ก ๋๋ค.
=> ํ ์ค์ ์ ๋ถ ์ฐจ์งํ๋ฉฐ, width, height ๊ฐ๋ฅํ๋ค.
=> width/height ์ค์ ํ๋ฉด ์ค์ ๋ ๋๋ก ๋๊ณ , ํ์ค ์ ๋ถ ์ฐจ์งํ๋ค.
inline-block : inline ์ฑ๊ฒฉ๋ ์๋ block์์
=> ํ ์ค์ ์ ๋ถ ์ฐจ์งํ์ง๋ ์๋๋ค. ๊ทผ๋ฐ block์ ์ค์ ํ ์ ์๋๊ฑฐ ์ ๋ถ ๊ฐ๋ฅํ๋ค.
=> width/height ์ค์ ํ๋ฉด ์ค์ ๋ ๋๋ก ๋๋๋ฐ, ๊ทธ ๋ถ๋ถ๋ง ์ฐจ์งํด์ ์์ ๋ค๋ฅธ ์์๊ฐ ์ฌ ์ ์๋ค.
width/height ๋ ์ต๋ํ ์ํ๋๊ฒ ์ข์ ! padding์ด๋ margin์ ์ต๋ํ ์ดํด
none: ํ์์ํจ. ์์ญ์ ์ฐจ์งํ์ง ์์
*/
button{
display: block; /* ๋ธ๋กํ์์ผ๋ก ๋ฐ๊ฟ ์ ์์ */
}
div{
display: inline; /* ์ธ๋ผ์ธ ํ์์ผ๋ก ๋ฐ๊ฟ ์ ์์ */
}
section {
/*
relative: ์์๊ฐ ์๋ ์์๋ ์์น๊ฐ ๊ธฐ์ค์ด ๋๋ค.
absolute: ์์์ ๋ถ๋ชจ ์์น๊ฐ ๊ธฐ์ค์ด ๋๋ค. ๊ทผ๋ฐ ๊ทธ ๋ถ๋ชจ์ ํ๋จ์,
๋ถ๋ชจ ์ค position ์์ฑ์ด ์๋ ๋ถ๋ชจ๊ฐ ๊ธฐ์ค์ด ๋๋ค.
*/
width: 100px;
height: 100px;
background-color: #3a7c3a;
border: 1px solid black;
color: white;
box-sizing: border-box;
}
#box1{
left: 10px; /* ๋งจ ์ผ์ชฝ์์ 10px ๋์ด ์์น๋ก ๊ฐ๋ผ */
}
#box2{
position: relative;
/*top: 10px;*/
left: 20px;
bottom: 20px;
}
#box3{
position: absolute;
right: 0;
/*left: 30px;*/
/*top: 0;*/
}
</style>
<body>
<section id="box1"></section>
<article>
<section id="box2">
<section id="box3">BOX3</section>
</section>
</article>
<div>DIV1</div>
<div>DIV2</div>
<button>๋ฒํผ1</button>
<button>๋ฒํผ2</button>
<div>DIV2</div>
</body>
</html>
