๐ปfloat๐ป
- ๊ธฐ์กด์ ์ถ๋ ฅ ์ ์ฑ ์ ๊นจ๊ณ , ์์ ์ ์์น์์ ๋ฒ์ด๋ ํ์ฌ ๋ผ์ธ์ ์ข์ธก(์ฐ์ธก) ๋์ผ๋ก ์ด๋ํ๋ค.
- float: left; ๋๋ float: right;๋ฅผ ์ฌ์ฉํ์ฌ ์์๋ฅผ ์ผ์ชฝ์ด๋ ์ค๋ฅธ์ชฝ์ผ๋ก ์ด๋ํ๋ค.
- ์ด๋ ์, ๋ผ์ธ์ ์์ชฝ์ผ๋ก ๋ถ๋๋ค.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>์ธ์ฟ๋ง</h1>
<p><img src="../asset/images/man_01.png">์ค๋ถ์ง๋ฐฉ๊ณผ ์ ๋ถ, ๊ฒฝ๋ถ๊ถ์ ์คํ๊น์ง, ๊ฐ์ ๋จ๋ถ์ ์ถฉ๋ถ, ๊ฒฝ๋ถ ๋ถ๋ถ๋ ๋ฐค๊น์ง ๋น๊ฐ ์ด์ด์ง๊ฒ ๋ค.
26์ผ๋ถํฐ ์ดํ๊ฐ ์์ ๊ฐ์๋์ ์๋๊ถ(์ํด5๋ ์ ์ธ)·์ถฉ์ฒญ๊ถ 5∼30ใ, ๊ฐ์์๋·๊ฒฝ๋ถ๋ถ๋ถ ๋ํด์ 20∼70ใ, ๊ฐ์์์·๋๊ตฌ·๊ฒฝ๋ถ(๋ถ๋ถ ๋ํด์ ์ ์ธ), ์ธ๋ฆ๋·๋
๋ 5∼40ใ, ์ ๋ถ·์ํด5๋ 5∼20ใ๋ค.
๊ด์ฃผ·์ ๋จ 5ใ ๋ฏธ๋ง, ๋ถ์ฐ·์ธ์ฐ·๊ฒฝ๋จ์ 5ใ ์ํ, ์ ์ฃผ๋๋ 5∼10ใ์ ๋น๊ฐ 26์ผ ํ๋ฃจ ๋์ ๋ด๋ฆด ๊ฒ์ผ๋ก ์๋ณด๋๋ค.
์์นจ ์ต์ ๊ธฐ์จ์ 18∼22๋, ๋ฎ ์ต๊ณ ๊ธฐ์จ์ 23∼29๋๋ก ์๋ณด๋๋ค. ์ต์ ๊ธฐ์จ์ ํ๋
(11∼19๋)๋ณด๋ค ๋๊ฒ ๊ณ ์ต๊ณ ๊ธฐ์จ์ ํ๋
(23∼26๋)๊ณผ ๋น์ทํ๊ฒ ๋ค.
๋ฏธ์ธ๋จผ์ง ๋๋๋ ์ํํ ๋๊ธฐ ํ์ฐ์ผ๋ก ์ ๊ตญ์ด '์ข์' ์์ค์ ๋ณด์ด๊ฒ ๋ค.</p>
</body>
</html>
<img>, <p> ์ธ๋ผ์ธ ํ๊ทธ๋ก์จ ๊ฐ์ ๋ผ์ธ์ ์ถ๋ ฅ๋๋ค.
float: left ์ค์
<style>
img {
float: left;
}
</style>
๊ตฌ์ญ ๋๋๊ธฐ
<!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>
#menu {
background-color: orange;
width: 800px;
height: 100px;
}
#sub-menu{
background-color: gold;
width: 200px;
height: 500px;
float: left;
}
#content {
background-color: cornflowerblue;
width: 600px;
height: 500px;
float: left
}
#footer {
background-color: greenyellow;
width: 800px;
height: 100px;
clear: left;
}
</style>
</head>
<body>
<h1>ํ์ด์ง ๋ ์ด์์</h1>
<div id="menu">์ฃผ๋ฉ๋ด(orange)</div>
<div id="sub-menu">๋ณด์กฐ๋ฉ๋ด(yellow)</div>
<div id="content">์ฝํ
์ธ (blue)</div>
<div id="footer">ํ๋จ(green)</div>
</body>
</html>
์ฐฝ์ ์๊ฒ ์กฐ์ ํ๋ฉด ์์น๊ฐ ๊นจ์ง๋ ํ์์ด ์๋ค.
์์น ๊ณ ์ ์ํค๊ธฐ
๋ฉ๋ด๋ค์ <div>๋ก ๋ฌถ๊ณ ์ฌ์ด์ฆ๋ฅผ ์ง์ ํ๋ค.
<body>
<h1>ํ์ด์ง ๋ ์ด์์</h1>
<div id="main">
<div id="menu">์ฃผ๋ฉ๋ด(orange)</div>
<div id="sub-menu">๋ณด์กฐ๋ฉ๋ด(yellow)</div>
<div id="content">์ฝํ
์ธ (blue)</div>
<div id="footer">ํ๋จ(green)</div>
</div>
</body> <style>
#main {
border: 10px solid black;
width: 800px;
}
</style>
float ์์ฑ์ ๋ ์ด์์์ ์กฐ์ ํ๋ ๋ฐ ์ ์ฉํ์ง๋ง, ํ์ฌ๋ ๋ ์ด์์์ ๋ง๋ค๊ธฐ ์ํด flexbox๋ grid์ ๊ฐ์ ๋ ๋ฐ์ด๋ ๋ ์ด์์ ๊ธฐ์ ์ด ์ฃผ๋ก ์ฌ์ฉํ๋ค.
'WEB > CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [CSS] ์์์ ์์น : position, z-index (0) | 2023.09.26 |
|---|---|
| [CSS] CSS ์ด๊ธฐํํ๊ธฐ(Reset CSS, Normalize CSS ) (0) | 2023.09.26 |
| [CSS] ์์์ ์ถ๋ ฅ ๋ฐฉ์ ์ ์ด : display(***) (0) | 2023.09.26 |
| [CSS] overflow , visibility ์์ฑ (0) | 2023.09.25 |
| [CSS] ๋ฐ์ค ๋ชจ๋ธ(border, width, height, padding, margin) (0) | 2023.09.25 |
