[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;
}