Front-end/100DaysOfCode

[100DaysOfCode] 16๊ฐ•

year.number 2022. 8. 1. 13:56

๐Ÿ’ก 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;
}