position
- position 속성은 HTML 요소의 위치를 지정하는데 사용된다.
static
- 모든 HTML 요소의 기본값
- 문서의 정상 흐름에 따라 배치
- top, right, bottom, left와 같은 위치 속성 무시
relative
-
요소를 문서의 정상 흐름에 따라 배치한 후, top, right, left, bottom 속성을 사용하여 자신을 기준으로 이동
-
원래 위치를 기준으로 이동하며, 요소의 원래 위치는 문서의 흐름에 영향을 미친다.
absolute
- 요소는 문서의 정상적인 흐름에서 제거
- 가장 가까운 부모(조상) 요소 중 position 속성이 relative, absolute, fixed, sticky로 설정된 요소를 기준으로 배치
- 부모(조상) 요소가 없다면, html을 기준으로 배치
fixed
- 요소는 문서의 정상적인 흐름에서 제거
- 뷰포트 기준으로 배치
- 스크롤해도 요소의 위치는 고정되어 변하지 않는다.
absolute와 fixed의 차이점
absolute는 relative 부모 요소를 기준으로 배치되고,fixed는 화면(viewport)을 기준으로 배치되어 스크롤 시에도 위치가 변하지 않는다.
sticky
- 요소는 스크롤 위치에 따라 relative와 fixed 사이를 전환
- 요소가 컨테이너 내에서 특정 스크롤 위치에 도달하면 fixed처럼 작동하고, 그렇지 않으면 relative처럼 작동한다.
예제
- 4등분하기
- 4등분한 유령들을 부모 엘리먼트에 가두기(relative)
- 부모 엘리먼트를 수평중앙정렬
- 부모 엘리먼트를 중앙정렬(absolute)
- 부모 엘리먼트를 중앙정렬(calc)
calc()
- css 속성의 값으로 계산식을 지정
ex) width: calc(100% - 80px);- 매개변수로 표현식 하나를 받고, 표현식의 결과가 최종값이 된다.
+와-연산자는 좌우에 공백이 있어야 한다.
- 부모 엘리먼트 중앙정렬(transform)
- fixed
transform
transform속성은 회전, 크기 조절, 기울이기, 이동 효과를 부여할 수 있다.
주요 변환 함수
translate(): 요소를 x축, y축 방향으로 이동translateX(): 요소를 x축 방향으로만 이동translateY(): 요소를 y축 방향으로만 이동scale(): 요소의 크기를 x축, y축 방향으로 조절scaleX(): 요소의 x축 크기만 조절scaleY(): 요소의 y축 크기만 조절rotate(): 요소를 회전 / 단위는 '도(degree)'를 사용skew(): 요소를 x축, y축 방향으로 기울임skewX(): 요소를 x축 방향으로 기울임skewY(): 요소를 y축 방향으로 기울임
- 인자를 양수로 지정 -> x축 오른쪽, y축 아래쪽 이동
- 인자를 음수로 지정 -> x축 왼쪽, y축 위쪽으로 이동
