CSS๋ฅผ ์ด์ฉํ๋ฉด HTML ์์์ ํฌ๊ธฐ๋ฅผ ๋ง์๋๋ก ์ค์ ํ ์ ์์ต๋๋ค.
๊ฐ์ฅ ๋ํ์ ์ผ๋ก ์ฌ์ฉ๋๋๊ฒ์ด ์๋ ๋๊ฐ์ง ์ ๋๋ค.
1. width
2. height
๊ฐ๋ก์ ์ธ๋ก๋น์จ์ ์กฐ์ ํด ์ํ๋ ํฌ๊ธฐ๋ก ์ค์ ํ ์ ์์ต๋๋ค.
<html>
<head>
<style>
div#container div#des {
width: 200px;
height: 200px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div id="container">
<div id="des"></div>
</div>
</body>
</html>
ํฌ๊ธฐ ๋จ์ : ํผ์ผํธ
๋ฐฑ๋ถ์จ ๋จ์(%)๋ ๊ธฐ๋ณธ ํฌ๊ธฐ๋ฅผ 100%๋ก ๋๊ณ , ๊ทธ์ ๋ํ ์๋์ ์ธ ํฌ๊ธฐ๋ฅผ ์ค์ ํฉ๋๋ค.
๋น์จ์ ์ค์ ํ์ง ์์๋๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
<html>
<head>
<style>
#a {
width: 200px;
height: 200px;
background-color: rgb(224, 75, 75);
}
#b {
width: 200px;
height: 200px;
background-color: rgb(83, 144, 224);
}
#c {
width: 200px;
height: 200px;
background-color: rgb(141, 207, 41);
}
</style>
</head>
<body>
<div id="container">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</div>
</body>
</html>
๋ฐฑ๋ถ์จ์ ์๋์ ์ ํฌ๊ธฐ์์ผ๋ก ๋ถ๋ชจ ์์๊ฐ ํฌ๊ธฐ๋ฅผ ๊ฐ๊ณ ์์ด์ผํฉ๋๋ค.
<html>
<head>
<style>
#container {
height: 100%;
}
#a {
width: 200px;
height: 10%;
background-color: rgb(224, 75, 75);
}
#b {
width: 200px;
height: 80%;
background-color: rgb(83, 144, 224);
}
#c {
width: 200px;
height: 10%;
background-color: rgb(141, 207, 41);
}
</style>
</head>
<body>
<div id="container">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</div>
</body>
</html>
๊ฐ๋ก๋ ์ ์ฉํด๋ณด๊ฒ ์ต๋๋ค.
<html>
<head>
<style>
#container {
width: 100%;
height: 100%;
}
#a {
width: 100%;
height: 10%;
background-color: rgb(224, 75, 75);
}
#b {
width: 100%;
height: 80%;
background-color: rgb(83, 144, 224);
}
#c {
width: 100%;
height: 10%;
background-color: rgb(141, 207, 41);
}
</style>
</head>
<body>
<div id="container">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</div>
</body>
</html>'Web > ๐งฉ html + CSS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| ๋ฐ์ค ๋ชจ๋ธ (0) | 2020.11.03 |
|---|---|
| ํ ์ด๋ธ ์์ฑ (0) | 2020.11.03 |
| background ์์ฑ (0) | 2020.11.03 |
| font ์์ฑ (0) | 2020.11.03 |
| ์ปฌ๋ฌ (0) | 2020.11.03 |