position 속성

핵심1. position 속성이 무엇인가?

핵심2. position 속성을 사용하는 이유?

핵심3. position 속성의 종류와 무엇을 할 수 있는가?

- position 속성이 무엇인가?

position 속성은 HTML에 사용되는 style 태그의 속성 중 하나로, 문서 상에 태그를 구성하는 요소를 배치하는 방법을 정의합니다. 쉽게 말해 태그의 구성 요소를 개발자가 배치하고자 하는 위치, 간격, 형태로 구성할 때 사용하는 속성입니다.

- 왜 position 속성을 사용하는가?

사용자가 각 태그의 위치, 간격을 일일이 지정하는 것은 웹 페이지가 복잡해질수록 더욱 어려워집니다. 이에 문서의 레이아웃에 따라, 각각의 태그들을 태그들의 관계 속에서 어떤 형태로 보이게 할지를 position 속성으로 정리하는 것입니다.

- 핵심3. position 속성의 종류와 무엇을 할 수 있는가?

• 종류(static, relative, absolute, fixed, sticky)

---

static

• 일반적인 문서의 흐름(inline: 좌우 / block: 상하)에 따라 배치
• 기본값으로 임의 설정 x, 태그의 관계에 따로 자동 배치

position: static;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 150px;
        background-color: rgb(75, 75, 75);
      }

---

relative

• 태그를 일반적인 문서 흐름에 따라 배치한 후, top/left/bottom/right 속성에 따라 간격(offset) 지정
• 초기 위치를 기준으로 좌표 지정, 레이아웃에 영향 x

#main_container{
        position: relative;
        margin-top: 150px;
        width: 1200px;
        height: 100%;
        background-color: #ccc;
      }

---

absolute

• 태그를 레이아웃 공간에도 배치하지 않고 가장 가까운 위치 지정 기준으로 top/left/bottom/right 속성에 따라 위치 지정
• 절대 좌표와 함께 위치 지정 가능, 부모 요소 중 position이 static이 아닌 요소를 기준

많은 개발자들이 absolute를 사용하기를 꺼려한다! WHY??

• 레이아웃의 예측의 어려움
• 디자인 변경의 어려움
• z-index 속성의 남용의 위험

코드를 입력하세요

---

fixed

• 태그를 레이아웃 공간에 배치하지 않고, viewport 기준으로 top/left/bottom/right 에 배치
• 스크롤과 관계 없이 지정한 좌표에 고정

#header{
        position: fixed;
        top: 0;
        left: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 150px;
        border-bottom: 1px solid red;
        color: white;
        font-size: 50pt;
        font-family: 'Gamja Flower', cursive;
        text-align: center;
        text-shadow: 2px 2px 1px black, -1px -1px 0px black, 1px -1px 0px black, -1px 1px 0px black;
        background-size: cover;
        z-index: 100;
      }

---

sticky

• 태그를 레이아웃에 배치한 후 상위 태그 중에서 가장 가까운 블록 태그를 기준으로 top/left/bottom/right 에 따라 간격(offset) 지정
• 스크롤 영역의 경계에 도달하면 고정

#floating{
        position: sticky;
        top: 200px; 
        left: 80%;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: 300px;
        background-color: rgb(177, 255, 255);
        float: right;
      }

---

#위의 예시 코드는 첨부된 url에 저장된 HTML의 코드이므로, 참고 바랍니다.