HTML/CSS - position(2)

안녕하세요, 이전에 position에 관하여 정리를 했었는데요, 추가로 간략히 정리할 겸 sticky 속성 값까지 추가하여 정리해보려 합니다. position은 요소의 위치 지정 방법의 유형(기준)을 설정하는 속성입니다.

 

◆ position의 속성 값

-. static : 요소의 기준이 없음/ 배치 불가능 (기본값)

-. relative : 요소 자신을 기준으로 배치

-. absolute : 위치 상 부모 요소를 기준으로 배치 (위치 상 부모요소 : position 속성이 부여되어 있는 요소!)

-. fixed : 브라우저(뷰포트)를 기준으로 배치

-. sticky : 스크롤 영역 기준으로 배치

 

position 속성을 사용하면 실질적으로 이동은 top, bottom, left, right 속성에 의해 정해지게 됩니다! 즉, top, bottom, left, right 속성은 position이 지정되어야 사용이 가능한 속성입니다.

 

relative의 단점으로는 주변 형제요소들의 영향을 받거나 영향을 주기 때문에 추천되지는 않습니다. 아래 코드를 보면서 설명드리겠습니다.

<!-- HTML -->
<div class="box">1</div>
<div class="box relative">2</div>
<div class="box">3</div>

<!-- CSS -->
.box {
  width: 100px;
  height: 100px;
  background: tomato;
  margin: 10px;
  border: 3px dashed black;
}

.relative {
  position: relative;
  bottom: 30px;
  left: 50px;
}

위 코드의 결과값

여기서 box1을 삭제하게되면 relative의 단점이 나오게 됩니다. box1이 없어짐으로써 box2의 원래 위치가 위로 올라가게 됩니다. 거기서 relative에 의해 왼쪽과 아래로부터 이동하게되어 아래 그림과 같이 box2가 잘리게 됩니다. 이러한 단점 때문에 relative보다는 absolute를 추천합니다.

 

absolute는 위치상 부모요소를 기준으로 정렬이 됩니다. 위에서 정리하였듯 위치 상 부모요소란 position 속성이 적용되어 있는 부모 요소입니다! (위치상 부모 요소가 없다면 뷰포트(화면 전체)를 기준으로 배치가 됩니다)

<!-- HTML -->
<div class="grandparents">
  <div class="parents">
    <div class="child">1</div>
    <div class="child absolute">2</div>
    <div class="child">3</div>
  </div>
</div>

<!-- CSS -->
.grandparents {
  width: 400px;
  height: 400px;
  border: 2px dashed gray;
}

.parents {
  width: 300px;
  height: 300px;
  border: 2px dashed blue;
  margin: 10px;
}

.child {
  width: 50px;
  height: 50px;
  background: orange;
  border: 2px dashed gray;
}

.absolute {
  position: absolute;
}

위 코드의 결과값

box2에만 absolute를 적용하였는데요, box3이 사라진 것처럼 보입니다. 하지만 실제로는 box2가 absolute가 되면서 부모 요소 기준으로 배치될 준비가 되어 주변 요소들과 상관없이 공중으로 뜬 상태가 됩니다. (box3의 width를 바꾸면 box2 옆으로 튀어나오는 것을 볼 수 있습니다! 글이 길어져 생략하겠습니다.)

 

이제 box2에 이동 기준 속성(top/bottom/left/right)를 주고 grandparents와 parent를 한 번씩 위치 상 부모 요소로 만들어 보겠습니다. 여기서 위치상 부모 요소를 만들 때 position의 기본값인 static은 효과가 없으므로 다른 속성 값을 사용하여야 합니다. 전 relative를 사용해보겠습니다. (아래 코드는 적용 방식을 보여드리기 위해 대표로 grandparents에 position: relative; 를 적용해보았습니다. 결과 이미지는 다른 요소들에 한 번씩 넣은 결과입니다!)

<!-- HTML -->
<div class="grandparents">
  <div class="parents">
    <div class="child">1</div>
    <div class="child absolute">2</div>
    <div class="child">3</div>
  </div>
</div>

<!-- CSS -->
.grandparents {
  width: 400px;
  height: 400px;
  border: 2px dashed gray;
  position: relative;
}

.parents {
  width: 300px;
  height: 300px;
  border: 2px dashed blue;
  margin: 10px;
}

.child {
  width: 50px;
  height: 50px;
  background: orange;
  border: 2px dashed gray;
}

.absolute {
  position: absolute;
  top: 100px;
  left: 50px;
}

위치 상 부모요소 : grandparents

위치 상 부모요소 : parents

위치 상 부모요소 미지정

위와 같이 위치 상 부모요소를 기준으로 box2의 위치가 변경이 됩니다. 마지막 결과와 같이 미지정할 경우 상위 요소로 계속 올라가면서 확인을 하다가 결국 뷰포트(화면)를 기준으로 위치가 변경되게 됩니다.

 

fixed는 말 그대로 화면에 고정시키는 속성 값입니다. 스크롤을 내리거나 올려도 동일한 위치에 고정시킬 수 있어 나중에 홈페이지 제작 시에 많이 사용할 것 같습니다.

 

마지막으로 sticky에 대해 정리하겠습니다. sticky는 스크롤 영역 기준으로 배치하는 속성 값입니다. 코드와 이미지로 설명드리겠습니다. 첫번째 이미지를 보면 스크롤을 안 내린 처음 상태인데 제일 상단에 Title 1이 있습니다. 여기서 스크롤을 Title 2 위까지 내리면 두 번째 이미지처럼 Title 1이 top: 0 위치에 붙어있는 것을 확인할 수 있습니다!

Title 2밑으로 내리게 되면 Tiltle 1은 위로 올라가고 Title 2가 0위치에 붙어 스크롤이 됩니다. 이건 각각의 h1 태그가 속해있는 section을 벗어날 때까지 sticky가 적용되기 때문입니다!

<!-- HTML -->
<div class="section">
  <h1>Title 1</h1>
</div>
<div class="section">
  <h1>Title 2</h1>
</div>
<div class="section">
  <h1>Title 3</h1>
</div>
<div class="section">
  <h1>Title 4</h1>
</div>
<div class="section">
  <h1>Title 5</h1>
</div>

<!-- CSS -->
.section {
 height: 200px;
 border: 4px dashed lightgray;
}

.section h1 {
  text-align: center;
  font-size: 24px;
  font-weight: bold;
  position: sticky;
  top: 0;
}

 

초기 이미지

스크롤을 내렸을 때

 

웹을 현재 조금씩(?) 만들면서 공부중인데 position 내용은 정말 유용하게 많이 사용할 것 같습니다! 조금 더 복습 및 실습을 통해 마스터하여 능숙하게 쓰도록 공부해보려 합니다! 다들 빡코딩하는 하루 보내세요!