12-4 CSS 속성 - 배치

fastcampus 사이트의 '한번에 끝내는 프론트엔드 개발 강의' 를 수강하며 공부 목적으로 작성하는 글입니다.

CSS로 가능한 속성

 

 

---

글자에 색깔이 칠해져 있는 것은 속성의 값으로 들어갈 수 있는 내용들입니다.
           : 기본값            : 일반             : 잘 사용하지 않음 
ex) width: auto; , max-width: none; 

※ 배치

• position

      → 요소의 위치 지정 기준

      →  static  : 기준 없음

      →  relative  : 요소 자신을 기준

      →  absolute  : 위치 상 부모 요소를 기준

      →  fixed  : 뷰포트(브라우저)를 기준

      →  sticky  : 스크롤 영역 기준

      → position과 같이 사용하는 CSS 속성 : top, bottom, left, right, z-index

 

예시1

HTML 구조

case 1)

2번 아이템의 포지션 값은 relative로 요소 자신을 기준으로 합니다. 따라서 2번 아이템의 위치인 지점에서 top으로 30px, left로 30px 정도 이동하게 됩니다.

 

case 2)

2번 아이템의 포지션의 속성은 absolute로 위치 상 부모 요소를 기준으로 합니다.  그러므로 2번은 1번과 3번아이템과는 서로 상호작용 할 필요가 없어지게 되고 2번 아이템은 공중에 붕 뜨게 됩니다. 따라서 3번은 2번이 있던 자리를 채우며 2번과 겹쳐 보이게 됩니다. 

 

case 3)

2번 아이템의 포지션은 absolute로 위치 상 부모요소를 기준으로 합니다. 여기서 위치 상 부모라는 뜻에 유의하셔야 합니다. 2번 아이템의 부모는 파란색 블록이지만 파란색 블록의 포지션은 아무런 값을 갖고 있지 않습니다. 따라서 2번 아이템은 파란 블록의 윗 단계인 뷰포트를 기준으로 하게 됩니다. 그래서 그림과 같은 위치에 위치하게 되는 것입니다.

 

case 4)

2번 아이템의 부모요소가 자기 자신을 기준으로 하는 relative 포지션을 갖고 있습니다. 따라서 2번 아이템은 위치 상 부모요소를 기준으로 해야하니 파란 블록을 기준으로 할 수 있게 되었습니다. 

 

예시2

 

case 1)

2번째 아이템의 부모요소가 파란색 영역을 차지하고 있고, 파란색 영역의 부모는 보라색 영역을 차지하고 있습니다. 2번 아이템의 부모요소는 relative 포지션을 가지고 있기 때문에 2번 아이템의 위치 기준은 부모인 파란색 블록을 기준으로 하게 됩니다. 

 

case 2)

2번 아이템의 부모요소의 포지션이 static으로 기본값을 가지고 있습니다. static은 기준이 없는 경우인데요. 따라서 2번아이템의 포지션 기준이 파란색 블록으로 잡을 수 없습니다. 그래서 파란색 블록의 부모요소인 보라색 블록의 포지션을 확인해보면 다행히 보라색 블록의 포지션은 relative 값을 가지고 있습니다. 그러므로 2번 아이템은 보라색 블록을 기준으로 위치를 잡을 수 있습니다.

 

case 3)

파란색 블록과 보라색 블록 모두 포지션이 static이므로 기준이 없는 상태 입니다. 따라서 2번 아이템의 기준은 뷰포트를 기준으로 위치하게 됩니다.

 

case 4)

fixed 포지션은 처음부터 뷰포트를 기준으로 위치시킵니다. 2번 아이템의 위치는 변함이 없지만 뷰포트를 기준으로 하기 때문에 1번과 3번 아이템과 상호작용을 할 필요가 없어지게 됩니다. 그러므로 3번 아이템이 2번 아이템의 위치와 겹치게 됩니다.

 

2번째 사진의 경우 위치를 변환하는 top과 right 속성이 있기 때문에 뷰포트를 기준으로 이동하는 모습을 볼 수 있습니다.

 

fixed의 예로 특정 웹페이지의 내비게이션 바를 가지고 있고 스크롤을 내려도 그 위치를 유지하는 헤더부분을 예로 들 수 있습니다.

 

 

요소 쌓임 순서

어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정

1. 요소에 포지션 속성의 값이 있는 경우 위에 쌓임(기본값 static 제외)

2. 1번 조건이 같은 경우, z-index 속성의 숫자 값이 높을 수록 위에 쌓임

3. 1번과 2번 조건까지 같은 경우, HTML의 다음 구조일 수록 위에 쌓임

 

• z-index

      → 요소의 쌓임 정도를 지정

      →  auto  : 부모 요소와 동일한 쌓임 정도

      →  숫자  : 숫자가 높을 수록 위에 쌓임

그림 1)

노란색 블록은 포지션은 static으로 기준이 없으나 z-index는 999로 가장 높습니다. 하지만 z-index로 순서를 나누기 이전에 포지션의 값이 있어야 하므로 주황색과 갈색 블록보다 우선순위가 낮습니다.  주황색과 갈색 블럭은 둘다 포지션이 있습니다. 하지만 주황색 블록만 z-index가 존재하기에 우선순위가 더 높습니다.

 

그림 2)

갈색 블록을 제외한 그림 1과 나머지 요소들이 같습니다. 갈색요소에 z-index: 2가 추가되었으므로 주황색보다 z-index가 높아 우선순위가 더 높아졌습니다.

 

그림 3) 

노란색 블록의 포지션이 생겼고 z-index 또한 가장 높기 때문에 우선순위가 가장 높습니다.

 

 

※position의 속성의 값이 absolute, fixed가 지정된 요소는 display 속성이 block으로 자동 변경됩니다. 따라서 span태그다 하더라도 position이 존재한다면 block 요소를 가지게 됩니다.