*margin ์์ฑ - ์์ ์ฃผ๋ณ ์ฌ๋ฐฑ ์ค์ ํ๊ธฐ
โ
๊ธฐ๋ณธํ)
margin-top : <ํฌ๊ธฐ> | <๋ฐฑ๋ถ์จ> | auto margin-right : <ํฌ๊ธฐ> | <๋ฐฑ๋ถ์จ> | auto margin-bottom : <ํฌ๊ธฐ> | <๋ฐฑ๋ถ์จ> | auto margin-left : <ํฌ๊ธฐ> | <๋ฐฑ๋ถ์จ> | auto margin : <ํฌ๊ธฐ> | <๋ฐฑ๋ถ์จ> | auto |
์์ฑ ๊ฐ |
์ค๋ช |
<ํฌ๊ธฐ> |
๋๋น๋ ๋์ด ๊ฐ์ px(ํฝ์ )์ด๋ cm(์ผํฐ๋ฏธํฐ) ๊ฐ์ ๋จ์์ ํจ๊ป ์์น๋ก ์ง์ ํ๋ค. |
<๋ฐฑ๋ถ์จ> |
๋ฐ์ค ๋ชจ๋ธ์ ํฌํจํ๊ณ ์๋ ๋ถ๋ชจ ์์๋ฅผ ๊ธฐ์ค์ผ๋ก ๋๋น๋ ๋์ด ๊ฐ์ %๋ก ์ง์ ํ๋ค. |
auto |
display ์์ฑ์์ ์ง์ ํ ๊ฐ์ ๋ง๊ฒ ์ ์ ํ ๊ฐ์ ์๋์ผ๋ก ์ง์ ํ๋ค. |
โ
โ
โ
โ
*๋ง์ง ์ค์ฒฉ(margin overlap) ํ์
์์๋ฅผ ์ธ๋ก๋ก ๋ฐฐ์นํ ๊ฒฝ์ฐ, ๋ง์ง๊ณผ ๋ง์ง์ด ๋ง๋ ๋ ๋ง์ง ๊ฐ์ด ํฐ ์ชฝ์ผ๋ก ๊ฒน์ณ์ง๋ค. ์ด๋ฐ ํ์์ ๋ง์ง ์ค์ฒฉ ๋๋ ๋ง์ง ์์ ๋ผ๊ณ ํ๋ค.
โ
*padding ์์ฑ - ์ฝํ ์ธ ์์ญ๊ณผ ํ ๋๋ฆฌ ์ฌ์ด ์ฌ๋ฐฑ ์ค์ ํ๊ธฐ
ํจ๋ฉ์ด๋ ์ฝํ ์ธ ์์ญ๊ณผ ํ ๋๋ฆฌ ์ฌ์ด์ ์ฌ๋ฐฑ์ ๋งํ๋ค. ๋ค์ ๋งํด ํ ๋๋ฆฌ ์์ชฝ์ ์ฌ๋ฐฑ์ด๋ผ๊ณ ์๊ฐํ๋ฉด ๋๋ค.
โ
๊ธฐ๋ณธํ)
padding-top : <ํฌ๊ธฐ> | <๋ฐฑ๋ถ์จ> | auto padding-right : <ํฌ๊ธฐ> | <๋ฐฑ๋ถ์จ> | auto padding-bottom : <ํฌ๊ธฐ> | <๋ฐฑ๋ถ์จ> | auto padding-left : <ํฌ๊ธฐ> | <๋ฐฑ๋ถ์จ> | auto padding : <ํฌ๊ธฐ> | <๋ฐฑ๋ถ์จ> | auto |
โโ
์ง์ ํด๋ณด์ธ์! ) ๋ฐ์ค ๋ชจ๋ธ๋ก ์ฝํ ์ธ ์ ๋ฆฌํ๊ธฐ
โ
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>์ ์๊ฒฌ ๋๋ณด๊ธฐ</title>
<link href="layout.css" rel="stylesheet" type="text/css">
<style>
article {
width:90%;
height:auto;
margin:20px 10px;
padding:20px;
}
#pet1{
border:1px solid black;
border-radius:10px;
}
#pet2 {
border:1px dotted blue;
border-radius:20px;
}
#pet3 {
border:2px double green;
border-top-left-radius:30px;
border-bottom-right-radius:30px;
}
</style>
</head>
<body>
<header>
<h1>์ ์๊ฒฌ ์ข
๋ฅ</h1>
<nav>
<ul>
<li><a href="#">์ ์๊ฒฌ ์ข
๋ฅ</a></li>
<li><a href="#">์
์ํ๊ธฐ</a></li>
<li><a href="#">๊ฑด๊ฐ๋๋ณด๊ธฐ</a></li>
<li><a href="#">๋๋ถ์ด์ด๊ธฐ</a></li>
</ul>
</nav>
</header>
<section>
<article id="pet1">
<h3>ํ๋ฌํ ๊ฐ์์ง</h3>
<dl>
<dt>์ํฌ์
ํ
๋ฆฌ์ด </dt>
<dd>์๊ธฐ์๊ณ ํ๋ฌํ ์ฑ์ง์ ๊ฐ์ง๊ณ ์์ผ๋ฉฐ ์์ ๋ณด๋ค ๋ชธ์ง์ด ํฐ ๊ฐ๋ ์ง์ ๋ค์ด์จ ์นจ์
์๋ฅผ ๊ฒ ๋ด๋ ์ผ์ด ์์ด ์ข์ ๋ฒ๊ฒฌ์ด๊ณ ์ฐ๋ฆฌ๋๋ผ ์ต๊ณ ์์ ๊ฐ์ ๊ฒฌ์ผ๋ก ์๋ฆฌ ์ก๊ณ ์๋ค.</dd>
<dt>๋งํฐ์ฆ </dt>
<dd>์ ์ ์ด ๋ง๊ณ , ์ถฉ์คํ๋ฉฐ ํ๋ฐํ ์ฑ๊ฒฉ์ ์์ ํ๊ณ ์๋ค. ์ด ์ข
์ 1๊ธ ๊ฐ์ ๊ฒฌ์ผ๋ก ์ํฌ์
ํ
๋ฆฌ์ด์ ํจ๊ป ์ฐ๋ฆฌ๋๋ผ ์ต๊ณ ์ ๊ฐ์ ๊ฒฌ์ผ๋ก ์๋ฆฌ์ก๊ณ ์๋ค.</dd>
<dt>ํฌ๋ฉ ๋ผ์ด์ธ</dt>
<dd>ํ๊ธฐ์ฐจ๊ณ ๋ช
๋ํ ๊ฐ๋ก ์ ๋ช
ํ๊ณ , ๊ฑท๋ ๋ชจ์ต์ด ์ฐ์ํ๋ค.์ถฉ์คํ๊ณ ์ฐํธ์ ์ธ ์ฑ๊ฒฉ์ด ๊ฐ์ฅ ๋จผ์ ๊ฑฐ๋ก ๋๋ค. </dd>
<dt>๊ณจ๋ ๋ฆฌํธ๋ฆฌ๋ฒ</dt>
<dd>์ด ๊ฒฌ์ข
์ ์ถฉ์ฑ์ฌ์ด ๊ฐํ๊ณ ์ฑ๊ฒฉ์ด ํ๋ฌํ์ฌ ์ด๋ฆฐ์์ด๋ ์ฌ์ฑ์ด ์๋ํ๊ธฐ์ ์ ํฉํ ๊ฒฌ์ข
์ด๋ค.์ฐธ์์ฑ ๋ํ ๊ฐํ์ฌ ํ์ฌ๋์ค๋ด์์๋ ๋ง์ด ๊ธธ๋ฌ์ง๊ณ ์๋ค.</dd>
</dl>
</article>
<article id="pet2">
<h3>์จ์ํ ๊ฐ์์ง</h3>
<dl>
<dt>์ฌ์ฆ</dt>
<dd> ์ผ๊ตด์์ ํ๊ธฐ๋ ๋ชจ์ต์ฒ๋ผ ์จ์, ์ฝ๊ฒ ์น์ํด์ง๊ณ ์ฐํธ์ ์ด๋ฉฐ,์ด๋ฆฐ์์ด๋ ์ฌ์ฑ๋ค์ด ๊ธฐ๋ฅด๊ธฐ์ ์ ํฉํ ๊ฒฌ์ข
์ด๋ค.</dd>
<dt>ํผ๊ทธ</dt>
<dd>๋งค์ฐ ์ฌ๋ ค๊ฐ ๊น๊ณ ์ฌ๋์ค๋ฌ์ด ๊ฒฌ์ข
์ด๋ฉฐ ๊ทธ๋ค์ง ์์ง์ด ํ์ํ์ง ์๊ณ ์์ฌ๋์ ๋นํด ๋ง์ ์ด๋๋์ด ํ์ํ์ง ์๋ค.</dd>
<dt>๋๋ธ๋ผ๋ ๋ฆฌํธ๋ฆฌ๋ฒ</dt>
<dd>์นจ์ฐฉํ๊ณ ์๋ฆฌํ์ฌ ์ด๋ฆฐ์ด๋ค์ ์์ฌํ๊ณ ๋งก๊ธธ ์ ์๋ค. ์ฌ๋์ ์ฆ๊ฒ๊ฒ ํด์ฃผ๋ ค๋ ์ฑ์ง์ด ์๋ค ๊ณต์ ๊ฐ์ง๊ณ ๋
ธ๋ ๊ฒ์ ๊ฐ์ฅ ์ข์ํ๋ค. ํ์ฌ ๋งน์ธ ์๋ด๊ฒฌ๊ณผ ๋ง์ฝ๊ฒฌ์ผ๋ก ์ฌ์ฉ์ค์ด๋ค. ์จ์ํ ๊ฐ์์ง๋ฅผ ์ข์ํ๋ ๋ถ์๊ฒ๋ ์ ํฉํ ๊ฒฌ์ข
์ด๋ค.</dd>
</dl>
</article>
<article id="pet3">
<h3>์ฌ๋ฉ์ง๋ง ๋ณต์ข
์ ์ธ ๊ฐ์์ง</h3>
<dl>
<dt>๋ฏธ๋์ด์ณํ์
</dt>
<dd>๊ฒฝ๊ณ์ฌ์ด ๊ฐํ๊ณ ์๋ฆฌํ๋ฉฐ ์์ ๋ชธ์ง์ ๋นํด ๋งค์ฐ ์ฉ๊ฐํ๋ค. ์ฃผ์ธ์๊ฒ ๋งค์ฐ ๋ณต์ข
์ ์ด๋ฉฐ ์์ ๋ชธ์ง์ ๋ณด๋๊ฐ๋ ์ญํ ์ ์ถฉ์คํ ์ํํ๋ค.</dd>
<dt>ํธ๋ค </dt>
<dd>์ฌ๋ฉ์ง ์์ผ๋, ์๋นํ ๋ณต์ข
์ ์ด๋ฉฐ, ์ง๋ฅ์ง์๊ฐ ์ ์๊ฒฌ์ข
์ค ๊ฐ์ฅ ๋ฐ์ด๋๋ค.</dd>
<dt>ํญ์คํ
๋ฆฌ์ด</dt>
<dd>๊ฐ์ ์์ ํค์ฐ๊ธฐ์ ์ ํฉํ ํ์ข
์ด๋ค. ๋ณดํธ๋ณธ๋ฅ์ด ๊ฐํ๊ณ ์ ์ด ๋ง๋ค. ํ์ง๋ง ์ฌ๋ฅ์ ํ๋ ๋ณธ๋ฅ์ด ์กฐ๊ธ์ ๋จ์์์ด ์ฌ๋์ด ๋ฉด์ด ์๋ค. ์ด์ข
์ ์ข์ ํ์ข
์ผ๋ก ๊ธฐ๋ฅด๊ธฐ ์ํด์๋ ์ด๋ฆด ๋๋ถํฐ ์ํ ํ๋ จ์ด ํ์ํ๊ธฐ๋ ํ๋ค.</dd>
</dl>
</article>
<aside>
<h3>๊ฑด๊ฐํ ๊ฐ์์ง๋</h3>
<ul>
<li>์ฝ๊ฐ ์ ์ด์๊ณ ๋๊ผฝ์ด ์์ด์ผ ํฉ๋๋ค.</li>
<li>ํธ์ ์ค๊ธฐ๊ฐ ์๋ ๊ฒ์ ๊ณจ๋ผ์ผ ํฉ๋๋ค.</li>
<li>์
์์ ๊ณ ์ฝํ ๋์๊ฐ ๋๋ฉด ๋ณ์ด ์๋ค๋ ์ฆ๊ฑฐ์
๋๋ค.</li>
<li>๊ฐ์ฅ ํ๋ฐํ๊ฒ ์์ง์ด๋ ๋
์์ ๊ณ ๋ฅด๋๊ฒ ์ข์ต๋๋ค.</li>
<li>๊ฐ์์ง๋ค ์ค์์ ์ ๋นํ ์ฒด๊ตฌ๋ฅผ ์ ์งํ ๊ฐ์์ง๊ฐ ์ข์ต๋๋ค.</li>
</ul>
</aside>
</section>
<footer>
<p>Copyright 2012 funnycom</p>
</footer>
</body>
</html>
์ง์ ํด๋ณด์ธ์! ) 2๋จ ๋ ์ด์์ ๋ง๋ค๊ธฐ - ๊ตฌ์กฐ ๋งํฌ์ , CSS ์์ฑํ๊ธฐ
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>2๋จ ๋ ์ด์์</title>
<style>
div {
border : 1px solid #ccc; /* <div> ์์์ ํ
๋๋ฆฌ ํ๊ธฐ */
}
#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-color:lightgrey;
}
#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>
'HTML5 & CSS3' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[HTML5 & CSS3] ๋ค๋จ์ผ๋ก ํธ์งํ๊ธฐ (0) | 2021.02.13 |
---|---|
[HTML5 & CSS3] CSS ํฌ์ง์ ๋๊ณผ ์ฃผ์ ์์ฑ๋ค (0) | 2021.02.13 |
[HTML5 & CSS3] ํ ๋๋ฆฌ ๊ด๋ จ ์์ฑ๋ค (0) | 2021.02.12 |
[HTML5 & CSS3] CSS์ ๋ฐ์ค ๋ชจ๋ธ (0) | 2021.02.12 |
[HTML5 & CSS3] ๊ทธ๋ผ๋ฐ์ด์ ํจ๊ณผ๋ก ๋ฐฐ๊ฒฝ ๊พธ๋ฏธ๊ธฐ (0) | 2021.02.12 |
๋๊ธ