Position
- HTML 요소의 위치를 지정해주는 속성
position : static
position의 초기값- 해당 속성값을 가진 요소는 정상적인 흐름(normal flow)을 따라 위치가 지정
position : relative
- 원래 자신이 있어야 하는 위치에 상대적으로 위치를 잡음
left, right, top, bottom속성들을 추가로 사용하여 현재위치에서 얼마나 떨어질지 정할수 있음- ex) left: 30px; 왼쪽으로 30px 이동
- 단,
left, right, top, bottom속성들을 사용 할 시 다른 콘텐츠들의 레이아웃에 영향을 미치지 않음
position : absolute
static을 제외한position속성값을 가진 가장 가까운 부모의 박스를 기준으로 위치left, right, top, bottom속성 사용 가능- 정상적인 흐름(normal flow)을 벗어나 위치를 차지하지 않음
position : fixed
-fixed를 사용하면 현재 사용자가 보고 있는 브라우저 화면(뷰포트)를 기준으로 마치 화면에 못 박은것 스크롤해도 그 자리에 계속해서 위치하게 됨
position : sticky
- sticky 속성값이 적용된 요소는 조상에 스크롤이 있다면 가장 가까운 부모 요소의 컨텐츠 영역에 달라 붙는다고 생각하면됨
- 평소에는 상대 위치 지정 요소로 처리하지만, 컨테이닝 블록이 자신의 플로우 루트(또는, 스크롤 컨테이너)에서 지정한 임계값(top)을 넘으면 마치 fixed처럼 화면에 고정, 고정 상태는 컨테이닝 블록의 반대편 모서리를 만나면 해제됨
z-index
- 어떤 요소가 더 위로 나타나게 할지 결정할때 사용
static을 제외한position속성값이 적용된 요소의 Z축 순서를 결정할 수 있으며,z-index값이 더 큰 요소가 값이 작은 요소의 위를 덮어버리게 됨- 부모가 z-index를 높여 자식 앞으로 나올 수 없음, 자식은 z-index를 낮춰 부모 뒤로 가는 것은 가능
Float
- float 속성은 요소를 띄워서 좌 혹은 우로 정렬을 하는 속성
float 속성
-float : left : 요소를 왼쪽으로 정렬
-float : right : 요소를 오른쪽으로 정렬
블록 박스 태그 vs float 속성 태그
- 블록 속성 태그는 아래와 같이 가로폭 전체의 넓이를 가지는 속성을 가지고있음
- 하지만 float 속성을 주면 위, 아래로 쌓이는게 아닌 왼쪽 또는 오른쪽으로 쌓이게됨
- 이때 float 된 block 요소는 컨텐츠가 차지하는 공간 만큼만 넓이가 바뀌게됨
inline요소에게float를 주면display가 자동으로block으로 바뀌게 되고width, height, margin, padding속성값을 자유로이 사용할 수 있게됨
float의 재미있는 특성
- 자식 요소들이 모두 float 속성을 가질 때, 컨테이너 요소가 자신의 높이에 자식 요소들의 높이를 반영하지 못한다는 점
- 이유는 normal flow를 벗어난 자식요소들을 인식하지 못해서
- 해결방법
- 부모 요소에
overflow속성을 추가합니다. - 부모 요소의 높이 값을 직접 지정해줍니다.
clear속성 사용clear-fix방법(::after가상요소로 해결)- 이외에도 BFC(Block Formatting Context) 를 만들어내는 여러가지 방법들을 사용
- 부모 요소에
BFC(Block Formatting Context)
-
웹페이지 화면에 CSS를 랜더링하는 과정의 한 부분으로,block 레벨 요소들이나 float 된 요소들이 서로 상호작용 하여 화면에 보여지게 되는 방법(block formatting)을 결정하는 구역(context)
-
생성방법
<html>요소를 사용했을 때float: left, right사용했을 때overflow : visible을 제외한 속성값(auto, hidden, scroll)을 사용했을 경우display: table-cell, inline-block, flow-root사용했을 때position:absolute, fixed등등
-
BFC 의 특성
- 내부, 외부 float을 해제
- 마진충돌 (margin collapsing) 현상을 막음
CSS 의 position 이나 float 같은 경우 안다고 생각했는데 처음듣는 부분도 있었고 flex와 grid를 안쓰고 float으로만 레이아웃 하려하니 실수가 많았다. flex와 grid 사용을 줄이고 강의 시간 내에는 float으로만 레이아웃 해봐야겠다.
항상 근거를 찾는 사람이 되자