HTML/CSS Layout

HTML 화면상의 Layout을 결정하는 CSS요소는 다음과 같다.

1. display 속성의 flex (flex-box)
2. display 속성의 grid
3. position

이번에는 Position 속성의 종류와 특징에 대해 알아보려 한다.

Position

Position은 각각의 element들이 화면상에 어디에 위치하게 되는지 화면상의 Layout을 결정한다.

각각의 종류를 살펴보면

1. static (default)

• 위치 관련 설정을 하지않은 상태, 정적으로 위치하고 있는 상태를 말한다.
• 기본값이다.

div.static {
  position: static; //default
  border: 3px solid #73AD21;
}

2. relative

• 상대적인 위치를 정하는 방식으로 기본 위치(정적인 위치)를 기준으로 위치가 정해진다.
• top, left, bottom, right 값을 기준으로 위치가 정해진다.

div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}

3. absolute

• 뷰 포트를 기준으로 위치를 정하는 방식이다.
• 정적이지 않은 위치 지정방식(relative)을 가진 조상요소를 기준으로 위치를 정할 수 있다.
• top, left, bottom, right 값을 기준으로 위치가 정해진다.

div.relative {
  position: relative;
  width: 400px;
  height: 200px;
  border: 3px solid #73AD21;
} 

div.absolute {
  position: absolute;
  top: 80px;
  right: 0;
  width: 200px;
  height: 100px;
  border: 3px solid #73AD21;
}

4. fixed

• 웹 페이지가 스크롤 되어도 위치 정보를 고정하여 항상 같은곳에 위치하는 방식이다.
• 뷰 포트를 기준으로 위치를 설정한다.
• top, left, bottom, right 값을 기준으로 위치가 정해진다.

div.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
  width: 300px;
  border: 3px solid #73AD21;
}

5. sticky

• fixed가 뷰포트의 절대 위치를 사용하는 반면 sticky는 부모 태그의 절대 위치를 사용한다.
• 부모의 영역을 벗어나지 않는다.

div.sticky {
  position: sticky;
  top: 0;
  padding: 5px;
  background-color: #cae8ca;
  border: 2px solid #4CAF50;
}

참고

https://www.w3schools.com/css/css_positioning.asp
https://coding-yesung.tistory.com/100