[100DaysOfCode] 16๊ฐ
๐ก position
Elements are then positioned using the top, bottom, left, and right properties.
position ์์ฑ
- static
- relative
- fixed
- absolute
- sticky
static
- default๊ฐ
- ์์๋ฅผ ๊ธฐ๋ณธ ๋ฌธ์ ํ๋ฆ์ ์ ์ง์์ผ์ ์ํ์ข์ฐ(top, bottom, left, and right)๋ก ์์น ์ด๋ ๋ถ๊ฐ
relative
- ์์๋ฅผ ๋ฌธ์ ํ๋ฆ์ ์ผ๋ถ๋ก ๋์ด์ ๋ค๋ฅธ ์์์ ์ํด ์์น๊ฐ ๋ฐ๋์ง ์์ ๊ฒ์ฒ๋ผ ๋ณด์ด๊ฒ ํ์ง๋ง ์์ ์์น ์ด๋ ๊ฐ๋ฅ
absolute
- ์ธ๋ผ์ธ ์์์ฒ๋ผ ๋ณด์
- ๋ฌธ์ ํ๋ฆ์ ๋ฒ์ด๋ ๋ค๋ฅธ ์์๊ฐ ์ด ์์๋ฅผ ๋ฌด์ํจ
- ๋ถ๋ชจ ์์์ relative ์์ฑ์ ์ถ๊ฐํ๋ฉด ๋ถ๋ชจ ์์์ ์๋์ ์ด ๋๋ค(์ฒซ ๋ฒ์งธ ์ ์กฐ), ์ ์กฐ๊ฐ ์์ผ๋ฉด body๊ฐ ์๋์ผ๋ก ๋จ
fixed
- ๋ทฐํฌํธ์ relative
- ์คํฌ๋กค์ ํด๋ ์ฐ๋ฆฌ ํ์ด์ง์์ ๋ณด์ด๋ ์์ญ(๋ทฐํฌํธ)์ ๋ถ์ด์์
sticky
- ์ ์ ์ ์คํฌ๋กค ์์น๋ฅผ ๋ฐํ์ผ๋ก ์์น๋ฅผ ์ก์
- ์คํฌ๋กค์ ๋ฐ๋ผ relative, fixed ์์ฑ์ ์๋ค๊ฐ๋ค ํ๋ค
๐ก width: 100% ํผ์ผํ ์ด์ง ๊ฐ์ ์คฌ์ ๊ฒฝ์ฐ ๋ฐ์ํ๋ ๋ฌธ์ ์
- ๊ธฐ๋ณธ์ ์ผ๋ก width์ %๊ฐ์ ๋ถ๋ชจ ์์์ ์ ์ฒด width๊ฐ์ ๋น๋กํ๋ค
- ๋ถ๋ชจ์ padding, border๊ฐ์ด ์๋ ๊ฒฝ์ฐ ์ค์ ํ width, height์ ๊ฐ์ ๋ํด์ง๊ธฐ ๋๋ฌธ์ ๋ด๊ฐ ์ค์ ํ ๋ฐ์ค ํฌ๊ธฐ๋ณด๋ค ํฌ๊ฒ ๋ณด์ผ ์ ์๋ค
ํด๊ฒฐ๋ฐฉ๋ฒ
box-sizing: border-box;
- ๋ํดํธ๋ box-sizing: content-box; ์ด๋ค. (ํฌ๊ธฐ๊ฐ ๋์น ์ ์์)
- padding, border์ ํฌํจํ ์ปจํ ์ธ ๊ฐ ์ ์ฒด ํฌ๊ธฐ๊ฐ ๋๋ค (์ ๋์นจ)
* {
box-sizing: border-box;
}
์์ ์ ์ฒด ์ฝ๋์ ์๋ํ ์ ์๋๋ก reset ํด์ฃผ๋ ๊ฒ๋ ์ข์ ๋ฐฉ๋ฒ์ด ๋ ์ ์๋ค
์น์ฌ์ดํธ์ ์ ์ฉ
<div class="hero-contents">
<h1>์ธ๊ณ ๊ณณ๊ณณ์์ ๋๋ผ๋ ๋ญ๋ง</h1>
<p>๋์ ์ด์ธ๋ฆฌ๋ ๋๋ผ๋ฅผ ๊ณจ๋ผ๋ณด์ธ์!</p>
<a href="/places.html">์ฌํ์ง ์ถ์ฒ</a>
</div>
.hero-contents {
width: 900px;
/* background-color: rgba(47, 47, 47, 0.8);
box-shadow: 2px 4px 8px rgb(68, 67, 67); */
border-radius: 8px;
padding: 50px 9;
margin: 0 auto;
position: absolute;
top: 20%;
left: 10%;
letter-spacing: -0.04em;
font-family: 'Noto Sans KR', sans-serif;
}