โถ CSS ํฌ์ง์ ๋์ด๋ ?
float ์์ฑ๊ณผ position ์์ฑ์ ์ด์ฉํ์ฌ ๋ธ๋ผ์ฐ์ ํ๋ฉด ์์ ๋ฐ์ค ํํ์ ๊ฐ ์ฝํ ์ธ ๋ฅผ ๋ฐฐ์นํ๋ ๊ฒ
*box-sizing ์์ฑ - ๋ฐ์ค ๋๋น ๊ธฐ์ค ์ ํ๊ธฐ
CSS์ width ์์ฑ์ ์ฝํ ์ธ ์์ญ์ ๋๋น๋ฅผ ๋ํ๋ด๊ธฐ ๋๋ฌธ์ ํด๋น ์์์ ์ ์ฉํ ํจ๋ฉ์ด๋ ํ ๋๋ฆฌ ํฌ๊ธฐ๋ ๋ฐ๋ก ๊ณ์ฐํด์ ๋ฐฐ์นํด์ผ ํ๋ค.
box-sizing ์์ฑ์ ์ฌ์ฉํ๋ฉด ์ฝํ ์ธ ์์ญ์ ๋๋น์ ํจ๋ฉ๊ณผ ํ ๋๋ฆฌ ํฌ๊ธฐ๊น์ง ํฉ์ณ์ width ์์ฑ์ ์ง์ ํ ์ ์๋ค.
๊ธฐ๋ณธํ)
box-sizing: content-box | border-box |
์์ฑ ๊ฐ |
์ค๋ช |
content-box |
width ์์ฑ ๊ฐ์ ์ฝํ ์ธ ์์ญ ๋๋น ๊ฐ์ผ๋ก ์ฌ์ฉํ๋ค. |
border-box |
width ์์ฑ ๊ฐ์ ์ฝํ ์ธ ์์ญ์ ํ ๋๋ฆฌ๊น์ง ํฌํจํ ๋ฐ์ค ๋ชจ๋ธ ์ ์ฒด ๋๋น ๊ฐ์ผ๋ก ์ฌ์ฉํ๋ค. |
<style>
.box1 {
box-sizing:content-box; /* ์ฝํ
์ธ ์์ญ ๊ธฐ์ค */
width: 300px; /* ์ฝํ
์ธ ์์ญ ๋๋น 300px */
height: 150px; /* ๋์ด */
margin: 10px; /* ๋ง์ง */
padding: 30px; /* ํจ๋ฉ */
border:2px solid red; /* ํ
๋๋ฆฌ */
}
.box2 {
box-sizing:border-box; /* ํ
๋๋ฆฌ๊น์ง(๋ฐ์ค ์ ์ฒด) ๊ธฐ์ค*/
width: 300px; /* ๋ฐ์ค ๋ชจ๋ธ ์ ์ฒด ๋๋น */
height: 150px; /* ๋ฐ์ค ๋์ด */
margin: 10px; /* ๋ง์ง */
padding: 30px; /* ํจ๋ฉ */
border: 2px solid red; /* ํ
๋๋ฆฌ */
}
</style>
*float ์์ฑ - ์ผ์ชฝ์ด๋ ์ค๋ฅธ์ชฝ์ผ๋ก ๋ฐฐ์นํ๊ธฐ
float ์์ฑ์ ์น ์์๋ฅผ ๋ฌธ์ ์์ ๋ ์๊ฒ ๋ง๋ ๋ค.
๊ธฐ๋ณธํ)
float: left | right | none |
์์ฑ ๊ฐ |
์ค๋ช |
left |
ํด๋น ์์๋ฅผ ๋ฌธ์์ ์ผ์ชฝ์ผ๋ก ๋ฐฐ์นํ๋ค. |
right |
ํด๋น ์์๋ฅผ ๋ฌธ์์ ์ค๋ฅธ์ชฝ์ผ๋ก ๋ฐฐ์นํ๋ค. |
none |
์ข์ฐ ์ด๋ ์ชฝ์ผ๋ก๋ ๋ฐฐ์นํ์ง ์๋๋ค. |
<style>
.left-img {
float:left;
margin-right:25px;
}
p {
line-height:30px;
}
</style>
<style>
.box1{
padding:20px;
margin-right:10px;
background:#ffd800;
float:left;
}
.box2 {
background: #0094ff;
padding:20px;
margin-right:10px;
float:left;
}
.box3 {
background: #00ff21;
padding:20px;
float:left;
}
.box4 {
background:#ffffff;
padding:20px;
float:right;
border:1px solid black;
}
</style>
*clear ์์ฑ - float ์์ฑ ํด์ ํ๊ธฐ
float ์์ฑ์ ์ด์ฉํด ์น ํ์ด์ง ์์๋ฅผ ์ผ์ชฝ์ด๋ ์ค๋ฅธ์ชฝ์ ๋ฐฐ์นํ๋ฉด ๊ทธ ๋ค์์ ๋ฃ๋ ๋ค๋ฅธ ์์๋ค์๋ ๋๊ฐ์ ์์ฑ์ด ์ ๋ฌ๋๋ค. ๋ฐ๋ผ์ float ์์ฑ์ด ๋ ์ด์ ์ ์ฉํ์ง ์๋ค๊ณ ์๋ ค ์ฃผ๋ ์์ฑ์ด ํ์ํ๋ฐ ๊ทธ๊ฒ์ด ๋ฐ๋ก clear ์์ฑ์ด๋ค.
๊ธฐ๋ณธํ)
clear: none | left | right | both |
<style>
.box1{
background:#ffd800;
float:left;
}
.box2 {
background: #0094ff;
float:left;
}
.box3 {
background: #00ff21;
}
.box4 {
background:#a874ff;
clear:both;
}
</style>
์ง์ ํด๋ณด์ธ์! ) 2๋จ ๋ ์ด์์ ๋ง๋ค๊ธฐ 1- ๊ตฌ์กฐ ๋งํฌ์ ํ๊ธฐ
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>2๋จ ๋ ์ด์์</title>
</head>
<body>
<div id="container">
<div id="header">
<h1>์ฌ์ดํธ ์ ๋ชฉ</h1>
</div>
<div id="sidebar">
<h2>์ฌ์ด๋ ๋ฐ</h2>
<ul>
<li>๋ชจ๋ ๊ตญ๋ฏผ์ ๊ทผ๋ก์ ์๋ฌด๋ฅผ ์ง๋ค. ๊ตญ๊ฐ๋ ๊ทผ๋ก์ ์๋ฌด์ ๋ด์ฉ๊ณผ ์กฐ๊ฑด์ ๋ฏผ์ฃผ์ฃผ์์์น์ ๋ฐ๋ผ ๋ฒ๋ฅ ๋ก ์ ํ๋ค.</li>
</ul>
</div>
<div id="contents">
<h2>๋ณธ๋ฌธ</h2>
<p>์ฌ์ฐ๊ถ์ ํ์ฌ๋ ๊ณต๊ณต๋ณต๋ฆฌ์ ์ ํฉํ๋๋ก ํ์ฌ์ผ ํ๋ค. ์ ๋ถ๋ ํ๊ณ์ฐ๋๋ง๋ค ์์ฐ์์ ํธ์ฑํ์ฌ ํ๊ณ์ฐ๋ ๊ฐ์ 90์ผ์ ๊น์ง ๊ตญํ์ ์ ์ถํ๊ณ , ๊ตญํ๋ ํ๊ณ์ฐ๋ ๊ฐ์ 30์ผ์ ๊น์ง ์ด๋ฅผ ์๊ฒฐํ์ฌ์ผ ํ๋ค.</p>
<p>๋ํต๋ น์ ์๊ธฐ๊ฐ ๋ง๋ฃ๋๋ ๋์๋ ์๊ธฐ๋ง๋ฃ 70์ผ ๋ด์ง 40์ผ์ ์ ํ์์๋ฅผ ์ ๊ฑฐํ๋ค. ์ 2ํญ๊ณผ ์ 3ํญ์ ์ฒ๋ถ์ ๋ํ์ฌ๋ ๋ฒ์์ ์ ์ํ ์ ์๋ค. ์ธ๋ก ·์ถํ์ ๋ํ ํ๊ฐ๋ ๊ฒ์ด๊ณผ ์งํ·๊ฒฐ์ฌ์ ๋ํ ํ๊ฐ๋ ์ธ์ ๋์ง ์๋ํ๋ค.</p>
</div>
<div id="footer">
<h2>ํธํฐ</h2>
<p>์ด ํ๋ฒ์ํ ๋น์์ ๋ฒ๋ น๊ณผ ์กฐ์ฝ์ ์ด ํ๋ฒ์ ์๋ฐฐ๋์ง ์๋ํ๋ ํ ๊ทธ ํจ๋ ฅ์ ์ง์ํ๋ค.</p>
</div>
</div>
</body>
</html>
์ง์ ํด๋ณด์ธ์! ) 2๋จ ๋ ์ด์์ ๋ง๋ค๊ธฐ 2 - CSS ์์ฑํ๊ธฐ
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>2๋จ ๋ ์ด์์</title>
<style>
div {
border: 1px solid #ccc; /* ๋ชจ๋ ์์ญ์ ํ
๋๋ฆฌ ํ์ */
}
#container {
width:960px; /* ์ปจํ
์ด๋ ๋๋น */
padding:20px; /* ํจ๋ฉ */
margin:0 auto; /* ํ๋ฉด ์ค์์ ๋ฐฐ์น */
}
#header {
padding:20px; /* ํจ๋ฉ */
margin-bottom:20px; /* ์๋ ์์๋ค๊ณผ์ ๊ฐ๊ฒฉ(๋ง์ง) */
}
#contents {
width: 620px; /* ๋๋น */
padding: 20px; /* ํจ๋ฉ */
float: left; /* ์ผ์ชฝ์ผ๋ก ํ๋กํ
*/
margin-bottom: 20px; /* ์๋ ์์์์ ๊ฐ๊ฒฉ */
}
#sidebar {
width: 220px; /* ๋๋น */
padding: 20px; /* ํจ๋ฉ */
float: right; /* ์ค๋ฅธ์ชฝ์ผ๋ก ํ๋กํ
*/
margin-bottom: 20px; /* ์๋ ์์์์ ๊ฐ๊ฒฉ */
background:#eee;
}
#footer {
clear:both; /* ์์ชฝ ํ๋กํ
ํด์ */
padding:20px; /* ํจ๋ฉ */
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>์ฌ์ดํธ ์ ๋ชฉ</h1>
</div>
<div id="sidebar">
<h2>์ฌ์ด๋ ๋ฐ</h2>
<ul>
<li>๋ชจ๋ ๊ตญ๋ฏผ์ ๊ทผ๋ก์ ์๋ฌด๋ฅผ ์ง๋ค. ๊ตญ๊ฐ๋ ๊ทผ๋ก์ ์๋ฌด์ ๋ด์ฉ๊ณผ ์กฐ๊ฑด์ ๋ฏผ์ฃผ์ฃผ์์์น์ ๋ฐ๋ผ ๋ฒ๋ฅ ๋ก ์ ํ๋ค.</li>
</ul>
</div>
<div id="contents">
<h2>๋ณธ๋ฌธ</h2>
<p>์ฌ์ฐ๊ถ์ ํ์ฌ๋ ๊ณต๊ณต๋ณต๋ฆฌ์ ์ ํฉํ๋๋ก ํ์ฌ์ผ ํ๋ค. ์ ๋ถ๋ ํ๊ณ์ฐ๋๋ง๋ค ์์ฐ์์ ํธ์ฑํ์ฌ ํ๊ณ์ฐ๋ ๊ฐ์ 90์ผ์ ๊น์ง ๊ตญํ์ ์ ์ถํ๊ณ , ๊ตญํ๋ ํ๊ณ์ฐ๋ ๊ฐ์ 30์ผ์ ๊น์ง ์ด๋ฅผ ์๊ฒฐํ์ฌ์ผ ํ๋ค.</p>
<p>๋ํต๋ น์ ์๊ธฐ๊ฐ ๋ง๋ฃ๋๋ ๋์๋ ์๊ธฐ๋ง๋ฃ 70์ผ ๋ด์ง 40์ผ์ ์ ํ์์๋ฅผ ์ ๊ฑฐํ๋ค. ์ 2ํญ๊ณผ ์ 3ํญ์ ์ฒ๋ถ์ ๋ํ์ฌ๋ ๋ฒ์์ ์ ์ํ ์ ์๋ค. ์ธ๋ก ·์ถํ์ ๋ํ ํ๊ฐ๋ ๊ฒ์ด๊ณผ ์งํ·๊ฒฐ์ฌ์ ๋ํ ํ๊ฐ๋ ์ธ์ ๋์ง ์๋ํ๋ค.</p>
</div>
<div id="footer">
<h2>ํธํฐ</h2>
<p>์ด ํ๋ฒ์ํ ๋น์์ ๋ฒ๋ น๊ณผ ์กฐ์ฝ์ ์ด ํ๋ฒ์ ์๋ฐฐ๋์ง ์๋ํ๋ ํ ๊ทธ ํจ๋ ฅ์ ์ง์ํ๋ค.</p>
</div>
</div>
</body>
</html>
*position ์์ฑ - ๋ฐฐ์น ๋ฐฉ๋ฒ ์ง์ ํ๊ธฐ
position ์์ฑ์ ์น ๋ฌธ์ ์์ ์์๋ค์ ์์ ์์ฌ๋ก ๋ฐฐ์นํด ์ฃผ๋ ์์ฑ์ผ๋ก HTML๊ณผ CSS๋ฅผ ์ด์ฉํด ์น ๋ฌธ์๋ฅผ ๋ง๋ค ๋ ์ค์ํ๊ฒ ์ฌ์ฉํ๋ ์์ฑ ์ค ํ๋์ด๋ค.
๊ธฐ๋ณธํ)
position : static | relative | absolute | fixed |
์์ฑ ๊ฐ |
์ค๋ช |
static |
์์๋ฅผ ๋ฌธ์์ ํ๋ฆ์ ๋ง์ถ์ด ๋ฐฐ์นํ๋ค. |
relative |
์ด์ ์์์ ์์ฐ์ค๋ฝ๊ฒ ์ฐ๊ฒฐํด ๋ฐฐ์นํ๋ ์์น๋ฅผ ์ง์ ํ ์ ์๋ค. |
absolute |
์ํ๋ ์์น๋ฅผ ์ง์ ํด ๋ฐฐ์นํ๋ค. |
fixed |
์ง์ ํ ์์น์ ๊ณ ์ ํด ๋ฐฐ์นํ๋ค. ํ๋ฉด์์ ์์๊ฐ ์๋ฆด ์๋ ์๋ค. |
-relative ์์ฑ ๊ฐ - ๋ฌธ์ ํ๋ฆ ๋ฐ๋ผ ์์น ์ง์ ํ๊ธฐ
.box2 {
position:relative;
left:-50px;
top:30px;
-absolute ์์ฑ ๊ฐ - ์ํ๋ ์์น์ ๋ฐฐ์นํ๊ธฐ
<style>
#wrap{
position:relative;
width:300px;
height:300px;
border:1px solid #ccc;
}
.box{
position:absolute;
width:50px;
height:50px;
background:#0094ff;
}
#crd1{ top:0; left:0; }
#crd2{ top:0; right:0; }
#crd3{ bottom:0; left:0; }
#crd4{ bottom:0; right:0; }
#crd5{ top:100px; left:100px; }
</style>
-fixed ์์ฑ ๊ฐ - ๋ธ๋ผ์ฐ์ ์ฐฝ ๊ธฐ์ค์ผ๋ก ๋ฐฐ์นํ๊ธฐ
<style>
#fx{
position:fixed;
top:5px;
right:5px;
width:50px;
height:50px;
background:#ff6a00;
}
</style>
*visibility ์์ฑ - ์์๋ฅผ ๋ณด์ด๊ฒ ํ๊ฑฐ๋ ๋ณด์ด์ง ์๊ฒ ํ๊ธฐ
๊ธฐ๋ณธํ)
visibility: visible | hidden | collapse |
์์ฑ ๊ฐ |
์ค๋ช |
visible |
ํ๋ฉด์ ์์๋ฅผ ํ์ํ๋ค. |
hidden |
ํ๋ฉด์์ ์์๋ฅผ ๊ฐ์ถ๋ค. ํ์ง๋ง ํฌ๊ธฐ๋ ๊ทธ๋๋ก ์ ์งํ๊ธฐ ๋๋ฌธ์ ๋ฐฐ์น์ ์ํฅ์ ๋ฏธ์น๋ค. |
collapse |
ํ์ ํ, ์ด, ํ ๊ทธ๋ฃน, ์ด ๊ทธ๋ฃน ๋ฑ์์ ์ง์ ํ๋ฉด ์๋ก ๊ฒน์น๋๋ก ์กฐ์ ํ๋ค. ๊ทธ ์ธ์ ์์ญ์์ ์ฌ์ฉํ๋ฉด 'hidden'์ฒ๋ผ ์ฒ๋ฆฌํ๋ค. |
<style>
.invisible {
visibility:hidden;
}
</style>
*z-index ์์ฑ - ์์ ์๋ ์์ ์ ํ๊ธฐ
๊ธฐ๋ณธํ)
z-index: <์ซ์> |
<style>
#b1 {
z-index:1;
}
#b2 {
z-index:3;
}
#b3 {
z-index:1;
}
</style>
'HTML5 & CSS3' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[HTML5 & CSS3] ํ ์คํ์ผ (0) | 2021.02.13 |
---|---|
[HTML5 & CSS3] ๋ค๋จ์ผ๋ก ํธ์งํ๊ธฐ (0) | 2021.02.13 |
[HTML5 & CSS3] ์ฌ๋ฐฑ์ ์กฐ์ ํ๋ ์์ฑ๋ค (0) | 2021.02.12 |
[HTML5 & CSS3] ํ ๋๋ฆฌ ๊ด๋ จ ์์ฑ๋ค (0) | 2021.02.12 |
[HTML5 & CSS3] CSS์ ๋ฐ์ค ๋ชจ๋ธ (0) | 2021.02.12 |
๋๊ธ