display ์ข ๋ฅ
- ๋ชจ๋ ์์๋ ๋ฑ ํ๋์ display ๊ฐ์ ๊ฐ์ง๊ณ ์๋ค.
-display์ข ๋ฅ์๋ inline, block, inline-block, flex, list-item, none ๋ฑ์ด ์๋ค.- ๋๋ถ๋ถ์ ์์๋ค์ inline display ๊ฑฐ๋ block display ์ด๋ค.
inline display
- inline display ์์๋ค์ ๋ค๋ฅธ ์์๋ค๊ณผ ๊ฐ์ ์ค์ ๋จธ๋ฌด๋ ค๋ ์ฑํฅ๊ณผ, ํ์ํ ๋งํผ์ ๊ฐ๋ก ๊ธธ์ด๋ง ์ฐจ์งํ๋ ค๋ ์ฑํฅ์ด ์๋ค.
- ๊ฐ๋ก, ์ธ๋ก ๊ธธ์ด๊ฐ ์๋์ผ๋ก ์ค์ ๋๋ค.
- ๋ํ์ ์ธ inline display์๋ span, a, i, img, button ํ๊ทธ๊ฐ ์๋ค.
๐ ์์
๐ป html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<span>span</span>
<a href=''>a</a>
<i>i</i>
<img src='image.jpg' width='100px'>
<button>button</button>
</body>
</html>๐ป css
span, a, i, img, button {
background-color: yellow;
}๐ ๊ฒฐ๊ณผ
block display
- block display์์๋ค์ ๋ค๋ฅธ ์์๋ค๊ณผ ๋ ๋จ์ ์ธ ์ค์ ๊ฐ๋ ค๊ณ ํ๋ ์ฑํฅ๊ณผ, ์ต๋ํ ๋ง์ ๊ฐ๋ก ๊ธธ์ด๋ฅผ ์ฐจ์งํ๋ ค๋ ์ฑํฅ์ด ์๋ค.
- ๊ฐ๋ก,์ธ๋ก ๊ธธ์ด๋ฅผ ์ง์ ์ค์ ํด์ค ์ ์๋ค.
- ๋ํ์ ์ธ block display์๋ div, h1~6, p, nav, ul, li ํ๊ทธ๊ฐ ์๋ค.
๐ ์์
๐ป html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div>div_tag</div>
<h1>h1_tag</h1>
<p>p_tag</p>
<ul>
<li>list</li>
</ul>
<nav>nav_tag</nav>
</body>
</html>๐ป css
div, h1, p, nav, ul, li {
background-color: skyblue;
}๐ ๊ฒฐ๊ณผ
inline-block display
- inline-block display๋ inline์์์ฒ๋ผ ๋ค๋ฅธ ์์๋ค๊ณผ ๊ฐ์ ์ค์ ๋จธ๋ฌด๋ฅด๋ฉด์ block์์์ฒ๋ผ ๊ฐ๋ก, ์ธ๋ก๊ธธ์ด๋ ์ค์ ํด์ค ์ ์๋ค.
๐ ์์
๐ป html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<span>span_tag</span>
<div>div_tag</div>
</body>
</html>๐ป css
span, div {
background-color: greenyellow;
display: inline-block
}
span {
width: 300px;
}๐ ๊ฒฐ๊ณผ
๋์ ๊ฐ๋ฐ์ง์ output ๊ณต๊ฐ