[패스트캠퍼스 수강 후기] 프론트엔드 인강 100% 환급 챌린지 47회차 미션

주말을 잘 보내면 마무리!

패스트캠퍼스 프론트엔드 올인원 with React 강의 수강 47일차입니다!

오늘은 15번째 커리큘럼에서 position 파트를 학습하였습니다.

실무할 적에 개념을 잘못 잡아 내내 고생했던 position: absolute;의 개념 완벽 정복!

토이 프로젝트나 클론 코딩을 할 때 position: relative도 종종 쓰던데 이번에 개념을 확실히 잡았어요.

 

오늘은 04. position 그리고 top, bottom, left, right / 05~08. position 속성 값 - relative, absolute, fixed, sticky 에 대하여 공부했습니다.

---

 

position

◾ 요소의 위치 지정 방법의 유형(기준)을 설정

◾ 속성 값 ⬇

 

값	의미	기본값
static	유형(기준)이 없음, 배치 불가능 ➡ 요소를 배치할 준비가 안 되어 있음	static
relative	요소 자신을 기준으로 배치
absolute	위치상 부모 요소를 기준으로 배치
fixed	브라우저(뷰 포트)를 기준으로 배치
sticky	스크롤 영역을 기준으로 배치

 

top, bottom, left, right 속성

◾ 요소의 position 기준에 맞는 방향에서의 거리(위치) 설정

◾ 속성 값 ⬇

 

값	의미	기본값
auto	브라우저가 계산	auto
✅ 단위	px, em, cm 등 단위로 지정	0
%	위치 상의 부모(조상) 요소의 가로/세로 너비의 비율로 지정, 음수값 허용

 

relative

◾ 스스로를 기준으로 배치됨

◽ 원래 자신이 있던 위치를 기준으로 움직임

◽ 위치를 이동하더라도 여전히 주변 요소의 영향을 받음

 

- 예제 ⬇ (2번째 박스에 position: relative 적용)

 

 

absolute

◾ 위치 상의 부모 요소를 기준으로 배치됨 (HTML 개념의 구조 상의 부모와 다름!)

◾ 위치 상의 부모 요소에는 position: relative; 추가

  ➡ 그 외 속성 값은 부모 요소의 기준이 변경되기 때문에 부모 요소가 화면에 존재하지 않게 될 수도 있음

  ➡ 만약 position: relative; 를 가진 위치 상의 부모 요소가 확인되지 않으면 상위 요소로 계속 접근하여 마지막에는 window 객체(뷰 포트)의 화면을 기준으로 배치됨 ➡ 이는 position: fixed; 와 다름 없기 때문에 지양!

◽ 위치 상의 부모 요소에게서만 영향 받고, 주변 요소의 영향을 받지 않음

  ➡ 위치 상의 부모 영역 안에서는 공중에 떠 있는 상태라고 보면 됨

 

- 예제 ⬇ (2번 박스에 position: absolute; 적용하면 1번, 3번 박스와의 상관관계가 무시됨.)

(2번 박스는 부모 요소에게서만 영향 받고 공중에 붕 뜬 상태)

 

 

fixed

◾ 뷰 포트를 기준으로 배치됨

◽ 화면 상의 위치가 고정되어 있기 떄문에, 배너 등으로 사용됨

 

- 예제 ⬇ (2번째 박스에 position: fixed; 적용)

(JSFiddle의 스크롤을 상하로 움직이면 기능을 눈으로 확인할 수 있음)

 

 

sticky

◾ 스크롤 영역을 기준으로 배치됨

◾ 화면 윗 부분에 붙어있는 것처럼 보임

◾ IE 지원 불가

◽ 상하좌우 속성 값이 하나 이상 함께 사용되어야 함

 

- 예제 ⬇ (모든 박스에 position: sticky;적용)

(JSFiddle의 스크롤을 상하로 움직이면 기능을 눈으로 확인할 수 있음)

 

---

강의 링크: https://bit.ly/3m0t8GM