๐ปDISPLAY๐ป
- ๊ฐ์ฅ ๋ง์ ์์ฑ์ ๊ฐ์ง๊ณ ์๋ค.
- ์์์ ์ถ๋ ฅ ๋ฐฉ์์ ์ ์ดํ๋ ์ญํ ์ด๋ค.
- ๊ธฐ๋ณธ๊ฐ์ด ์ํฉ์ ๋ฐ๋ผ ๋ฌ๋ผ์ง๋ค.
- ๋ธ๋ญ ํ๊ทธ ์ผ ๋ ๊ธฐ๋ณธ๊ฐ : block
- ์ธ๋ผ์ธ ํ๊ทธ ์ผ ๋ ๊ธฐ๋ณธ ๊ฐ : inline
- block (๋ธ๋ก)
- display: block;
- ๋ธ๋ก ๋ ๋ฒจ ์์๋ก ๋ง๋ ๋ค.
- ์์๊ฐ ๊ฐ๋ก ์ ์ฒด ์์ญ์ ์ฐจ์งํ๋ฉฐ, ์๋ก์ด ์ค์์ ์์ํ๋จ.
- width, height์ ๊ฐ์ ์์ฑ์ ์ค์ ํ ์ ์์ต๋๋ค.
- inline (์ธ๋ผ์ธ)
- display: inline;
- ์ธ๋ผ์ธ ์์๋ก ๋ง๋ ๋ค.
- ์์๊ฐ ์ฝํ ์ธ ์ ํ๋ฆ ์ค๊ฐ์ ๋ค์ด๊ฐ๋ฉฐ, ๋๋น์ ๋์ด๋ฅผ ๊ฐ์ง์ง ์๋๋ค.
- width์ height ์์ฑ์ด ์ ์ฉ๋์ง ์์ต๋๋ค.
- inline-block (์ธ๋ผ์ธ ๋ธ๋ก)
- display: inline-block;
- ์ธ๋ผ์ธ ๋ธ๋ก ์์๋ก ๋ง๋ญ๋๋ค.
- ์ธ๋ผ์ธ์ฒ๋ผ ์ฝํ ์ธ ์ ํ๋ฆ ์ค๊ฐ์ ์์นํ์ง๋ง, ๋ธ๋ก์ฒ๋ผ ๋๋น์ ๋์ด๋ฅผ ์ค์ ํ ์ ์๋ค.
์์ ์ฝ๋
<body>
<h1>๋ธ๋ญ ํ๊ทธ</h1>
<div id="box1" class="box">์์1</div>
<div id="box2" class="box">์์2</div>
<div id="box3" class="box">์์3</div>
<h1>์ธ๋ผ์ธ ํ๊ทธ</h1>
<a href="#" id="link1" class="link">๋งํฌ1</a>
<a href="#" id="link2" class="link">๋งํฌ2</a>
<a href="#" id="link3" class="link">๋งํฌ3</a>
</body> <style>
.box {
border: 1px solid black;
display: inline;
}
.link{
border: 1px solid black;
display: block;
}
</style>
์ฌ์ง ์ฌ์ด ๊ณต๋ฐฑ ์์ ๊ธฐ
- <img> ์ธ๋ผ์ธ ์์ฑ์ ๋ธ๋ญ ์์ฑ์ผ๋ก ๋ฐ๊พผ๋ค.
<body>
<div id="cats">
<img src="../asset/images/cat01.jpg">
<img src="../asset/images/cat02.jpg">
<img src="../asset/images/cat03.jpg">
<img src="../asset/images/cat04.jpg">
<img src="../asset/images/cat05.jpg">
</div>
</body> <style>
#cats img {
border: 1px solid black;
}
</style>
์ ์ฌ์ด์ ๊ณต๋ฐฑ๋ฅผ ์ ๊ฑฐํ๋ ค๋ฉด
display๋ฅผ ์ฌ์ฉํ์ฌ block ์์ฑ์ผ๋ก ๋ฐ๊พผ๋ค.
<style>
#cats img {
border: 1px solid black;
display: block;
}
</style>
๊ณต๋ฐฑ์ด ์ฌ๋ผ์ก๋ค.
๊ฐ๊ฒฉ์ ์กฐ์ ํ๊ณ ์ถ์ ๋
๋ธ๋ญํ๊ทธ์ ์์ฑ์ผ๋ก margin์ ์ด์ฉํ๋ค.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#cats img {
border: 1px solid black;
display: block;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div id="cats">
<img src="../asset/images/cat01.jpg">
<img src="../asset/images/cat02.jpg">
</div>
</body>
</html>
'WEB > CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [CSS] CSS ์ด๊ธฐํํ๊ธฐ(Reset CSS, Normalize CSS ) (0) | 2023.09.26 |
|---|---|
| [CSS] ์์์ ์ข์ฐ์์น ์กฐ์ : float (0) | 2023.09.26 |
| [CSS] overflow , visibility ์์ฑ (0) | 2023.09.25 |
| [CSS] ๋ฐ์ค ๋ชจ๋ธ(border, width, height, padding, margin) (0) | 2023.09.25 |
| [CSS] ์ ๋ค๋ฆญ ํฐํธ(Generic font) (0) | 2023.09.25 |
