💡 Keyword
positionflex
빨간색: 기본 값
파란색: 기본 값 외에 자주 사용되는 속성
1. position
- 요소의 위치 지정 기준이다.
position과 같이 사용하는 CSS 속성들(top, bottom, left, right, z-index)은 모두 음수를 사용할 수 있다.
static: 기준 없음
relative: 요소 자신을 기준
absolute: 위치 상 부모 요소 자신을 기준
fixed: 뷰포트(브라우저)를 기준
top, bottom, left, right
- 요소의 각 방향별 거리 지정
auto: 브라우저가 계산
단위: px, em, rem 등 단위로 지정
relative
- 자기 자신을 기준으로 배치를 하므로 실제로
relative속성을 사용해서 배치를 하는 경우는 드물다! - 보통 위치 상의 부모 요소를 지정할 때 사용한다.
absolute
- 위치 상의 부모 요소를 기준으로 배치한다.
자식 2에 absolute 속성을 부여하면 부모 요소를 기준으로 배치하므로 자식 1, 자식 3과는 더이상 상호작용을 할 필요가 없어진다. 이때, 자식 2가 공중에 붕 떠있게 되면서 자식 1 다음으로 자식 3이 쌓이고, 자식 2와 자식 3이 겹치게 되는 것이다.
absolute는 분명 부모 요소를 기준으로 배치가 된다고 했는데 뷰포트 기준으로 배치가 된 것을 볼 수 있다. 왜 그럴까?🤔
바로 '위치 상 부모'가 될 수 있는 기준을 '구조 상 부모'에게 추가하지 않았기 때문이다. 부모 요소(파란색 박스)에게 position: relative 속성을 부여하면 자식 2가 부모 요소 기준으로 잘 배치된 것을 볼 수 있다.
부모 요소와 부모의 부모(상위) 요소까지 있는 경우를 알아보자.
부모 요소에 position: relative 속성을 부여하고, 부모 요소를 기준으로 자식 2를 아래에서 30px, 오른쪽에서 30px 위치에 배치하였다. 부모 요소(파란색 박스) 기준으로 배치가 잘 되어있다.
이 상태에서 부모 요소의 속성을 position: static로 바꾸면 어떻게 될까?
자식 2가 부모의 부모(상위) 요소를 기준으로 배치된 것을 볼 수 있다!
자식 2는 먼저 구조 상의 부모(파란색 박스)를 위치 상의 부모 요소 후보에 올려두고, 적합 여부를 판단한다. 구조 상의 부모는 적합하지 않으므로 자식 2는 위치 상의 부모 요소를 찾아 상위 요소로 올라가서 poisition: relative 값을 가진 부모의 부모를 위치 상의 부모로 판단하는 것이다.
만약, 모든 조상 요소의 position: static를 주게 되면 위치 상의 부모 요소를 계속 찾다가 찾지 못하면 화면(뷰포트)을 기준으로 배치한다.
fixed
- 뷰포트(브라우저)를 기준으로 배치하는 방법이다.
- 스크롤을 내려도
fixed를 사용해 배치한 요소는 그 위치에 고정되어 있다.
다음 이미지에서는 위치 상의 부모 요소가 될 수 있는 기준이 부여되어 있다. fixed가 되면 자식 2의 배치의 기준이 바뀌게 되고, 자식 1, 자식 3과 상호작용하지 않는다.
자식 2를 배치하면 위치 상의 부모 요소가 될 수 있는 기준이 있음에도 불구하고 다 무시하고 뷰포트를 기준으로 배치된다.
🤔 요소의
display가 변경됨
position속성의 값으로absolute,fixed가 지정된 요소는display속성이block으로 변경된다!
🤔 요소 쌓임 순서(Stack order)
어떤 요소가 사용자와 더 가깝게 있는지(위에 쌓이는지) 결정하는 것이다.
1. 요소에position속성의 값이 있는 경우 위에 쌓인다. (기본값static제외)
2. 1번 조건이 같은 경우,z-index속성의 숫자 값이 높을 수록 위에 쌓인다.
3. 1번과 2번 조건까지 같은 경우,html의 다음 구조일 수록 위에 쌓인다.
- 2번과 3번: 2번에는
position속성의 값이 있고, 3번에는 없으므로 2번위 위에 쌓인다.- 1번과 2번: 1번과 2번 둘 다
position속성의 값이 있고,z-index값은 없으므로 더 나중에 작성된 코드인 2번이 위에 쌓인다.
z-index
- 요소의 쌓임 정도를 지정한다.
- 되도록이면 1부터 순서대로 증가하면서 값을 잘 관리하는 것이 좋다.
auto: 부모 요소와 동일한 쌓임 정도
숫자: 숫자가 높을 수록 위에 쌓임
2. Flex(정렬)
- 1차원 레이아웃을 만드는 개념이다.
- 수직으로 쌓여있는 요소를 수평으로 정렬할 수 있다.
display: block 시 요소들이 수직으로 쌓여있다.
이때, display: flex로 바꾸면 수직이 아닌 수평으로 정렬된 것을 볼 수 있다.
- Flex Container:
display: flex가 부여된 요소 - Flex Items: Flex Container의 자식 요소
Container 속성
- Flex Container:
display,flex-direction,flex-wrap,justify-content,align-content,align-items
display
- Flex Container의 화면 출력(보여짐) 특성을 가진다.
- 플렉스 개념을 사용하려면 Flex Container를 만들어야 하고,
display값이 들어있어야 한다.
flex: 블록 요소와 같이 Flex Container 정의
inline-flex: 인라인 요소와 같이 Flex Container 정의
flex-direction
- 주 축을 설정한다. (수평 정렬? 수직 정렬?)
row: 행 축(좌 => 우)
row-reverse: 행 축(우 => 좌)
flex-wrap
- Flex Items 묶음(줄 바꿈) 여부
- 한 줄에서 모든 요소를 처리하려고 하는데 그것이 문제가 된다면 따로 줄 바꿈 여부를 표시할 수 있다.
nowrap: 묶음(줄 바꿈) 없음
wrap: 여러 줄로 묶음
justify-content
- 주 축의 정렬 방법이다.
- 수평 정렬에 대한 개념이다.
flex-Items: Flex Items를 시작점으로 정렬
flex-end: Flex Items를 끝점으로 정렬
center: Flex Items를 가운데 정렬
align-content
- 교차 축의 여러 줄 정렬 방법이다.
- 수직 정렬에 대한 개념이다.
- 기본적으로 두 줄 이상(줄 바꿈 상태)이어야 하고, 정렬이 가능한 빈 공간들이 있어야 한다. 이처럼 조건이 까다로워서 자주 사용되진 않는다.
stretch: Flex Items를 시작점으로 정렬
flex-start: Flex Items를 시작점으로 정렬
flex-end: Flex Items를 끝점으로 정렬
center: Flex Items를 가운데 정렬
align-items
- 교차 축의 한 줄 정렬 방법이다.
stretch: Flex Items를 교차 축으로 늘림
flex-start: Flex Items를 각 줄의 시작점으로 정렬
flex-end: Flex Items를 각 줄의 끝점으로 정렬
center: Flex Items를 각 줄의 가운데 정렬
🤔
flex를 이용한 중앙 정렬
일반적으로justify-content: center와align-items: center를 이용해서 중앙 정렬 시 많이 사용될 것이다!
Items 속성
- Flex Items:
order,flew-grow,flex-shrink,flex-basis
order
- Flex Item의 순서
html요소의 순서를 바꾸지 않고도 화면에 출력되는 순서를 바꿀 수 있다는 것이 장점이다.
0: 순서 없음
숫자: 숫자가 작을 수록 먼저 정렬
flex-grow
- Flex Item의 증가 너비 비율
0: 증가 비율 없음
숫자: 증가 비율
- 두 번째 컨테이너: 첫 번째 그림에서 보이는 빈 공간을 A가 모두 차지하고, 나머지 공간을 B와 C가 차지한다.
- 세 번째 컨테이너: 첫 번째 그림에서 보이는 빈 공간을 B와 C가 2:1 비율로 차지하고, 나머지 공간을 A가 차지한다.
flex-shrink
- Flex Item의 감소 너비 비율
1: Flex Container 너비에 따라 감소 비율 적용
숫자: 감소 비율
- 두 번째 컨테이너: 첫 번째 박스에서는 A, B, C가 각자 정상적인 크기를 가질 수 있는 비율이지만 두 번째 박스에서는 그렇지 않다. 이때
flex-shrink가 1(기본 값)이므로 A, B, C가 1:1:1 비율로 공간을 차지한다. - 세 번째 컨테이너: 기본 값을 제거하면 컨테이너가 줄어도 아이템들의 실제 너비만큼의 크기를 유지한다.
flex-basis
- Flex Item의 공간 배분 전 기본 너비
auto: 요소의 Content 너비
단위: px, em, rem 등 단위로 지정
-
요소의 기본 너비는 각각의 요소가 가지고 있는 글자만큼의 가로 너비이고, 빗금 친 영역을 제외한 나머지 영역을 1:1:2로 나누어서 차지하는 것이다. 따라서 실제 요소 전체의 너비는 1:1:2의 비율이 되지 않는다.
-
마찬가지로 빗금 친 영역(각 100px씩)을 제외한 나머지 영역을 1:1:2 비율로 차지한다.
-
전체의 너비를 1:1:2의 비율로 맞추려면 기본 너비를 없앤다.
