Flexbox

요소를 효율적이고 동적으로 배열할 수 있는 레이아웃 모델
레이아웃은 1차원이며 공간이 균등하게 분산된 컨테이너 내부에 요소를 배치할 수 있다.

이 레이아웃은 요소를 반응형으로 만든다.
=> 요소를 표시하는 장치의 종류에 따라 요소의 동작이 변경된다.
요소를 유연하게 만들고 적절한 위치와 대칭을 제공한다.

기존 레이아웃 속성들

1. Block
   요소를 블록 레벨로 표시. 줄바꿈이 일어나고, 너비가 부모 요소에 맞춰 확장

2. Inline
   : 줄바꿈이 일어나지 않으며, 내용만큼만 너비를 차지
   텍스트에 사용되는 레이아웃, 주변 텍스트와 나란히 같은 줄에 배치

ex) <span>, <a>, <strong>

3. Table
   : 2차원 데이터가 있는 테이블

4. Positioned
   : 요소의 특정 위치 지정

Flex Components

Flex Container

• Flexbox 레이아웃을 정의하는 부모 요소
• display: flex; 또는 display: inline-flex;를 사용하여 Flex Container를 설정
• Flex Container는 자식 요소들을 자동으로 Flex Items로 만듦

Flex Items

• Flex Container 안에 배치된 자식 요소들
• Flexbox 레이아웃의 규칙에 따라 배치되고 크기가 조정

두개의 축

이 축들은 Flex Container 내부에서 Flex Items가 어떻게 배치되고 정렬되는지를 결정

주축(Main Axis)
Flex Container에서 Flex Items가 배치되는 주된 축

교차축(Cross Axis)
Main Axis에 수직인 축

Flexbox 컨테이너 속성들

Flex-direction

Flex-wrap

기본적인 Flex 는 아이템 개수가 늘어나면 아이템의 크기가 줄어들면서 어떻게든 단일한 줄에 포함시키려고 한다. 그러나 flex-wrap: wrap 설정을 주면 줄바꿈이 일어난다.

• nowrap(기본값) : 모든 플렉스 항목이 한 줄에 표시
• wrap : 여러줄로 줄바꿈
• wrap-reverse : 아래에서 위로 여러줄로 줄바꿈

Flex-flow

flex-flow : <flex-direction> <flex-wrap>

.container {
flex-flow : column wrap;
}

justify-content

Main Axis를 따라 Flex Items를 어떻게 배치할지를 결정

• flex-start: Flex Items가 주 축의 시작 부분에 배치
• flex-end: Flex Items가 주 축의 끝 부분에 배치
• center: Flex Items가 주 축의 중앙에 배치
• space-between: Flex Items 사이에 동일한 간격을 배치하며, 첫 번째와 마지막 아이템은 끝에 배치
• space-evenly: Flex Items 주위에 동일한 간격으로 배치
• space-around : 가장자리에는 1단위의 공간이 있고, Item 사이에는 2단위 공간이 생기도록 배치

📌 space-evenly 와 space-around 의 차이

align-items

Cross Axis를 따라 Flex Items가 어떻게 정렬될지를 결정

• flex-start: Flex Items가 교차 축의 시작 부분에 배치
• flex-end: Flex Items가 교차 축의 끝 부분에 배치
• center: Flex Items가 교차 축의 중앙에 배치
• baseline: Flex Items의 텍스트 기준선이 맞춰지도록 정렬
• stretch: Flex Items가 교차 축을 따라 늘어나도록 설정(기본값)

align-content

교차축 기준 줄과 줄 사이의 정렬을 설정 , 행들 간의 공간을 조절하는 데 사용
❗️flex-wrap : wrap 인 상태에서 두 줄 이상인 상태에서만 적용

• flex-start: 모든 행이 교차 축의 시작 부분에 밀착
• flex-end: 모든 행이 교차 축의 끝 부분에 밀착
• center: 모든 행이 교차 축의 중앙에 배치됩니다.
• space-between: 첫 번째 행은 교차 축의 시작 부분에, 마지막 행은 끝 부분에 배치되고, 나머지 행들은 사이에 균일한 간격으로 배치
• space-around: 가장자리에는 1단위의 공간이 있고, Item 사이에는 2단위 공간이 생기도록 배치
• space-evenly: 모든 행이 동일한 간격으로 배치됩니다. 행 사이와 양 끝 간의 간격이 동일
• stretch: 기본값으로, 행들이 교차 축을 가득 채우도록 늘어납니다.

align-self

개별 플렉스 항목에 대해 기본 정렬(align-items로 지정된 정렬) 재정의

❗️align-content 속성은 지워줘야 제대로 적용

=> align-self 를 통해 자식 아이템들을 각각 다른 방식으로 정렬한 상태

order

플렉스 컨테이너에 나타나는 순서 제어
기본 값은 0이며, 숫자가 낮은 것부터 먼저 배치

flex-grow, flex-shrink

유연한 레이아웃을 가능하게 하는 속성

• 화면이 늘어나거나 줄어듦에 따라 플렉스 박스 아이템의 기본 너비를 자동으로 늘어나거나(flex-grow) 줄어들도록(flex-shrink)해서 행 안에 적절한 너비로 배치되도록 맞추는 기능
• 비율로 사용되는 단위 없는 값을 허용
• 음수는 허용되지 않음
• Item이 차지해야하는 플렉스 컨테이너 내부의 사용 가능한 공간의 양을 나타냄
• flex-grow의 기본 값은 0

❓ 만약 flex-grow, flex-shrink 를 설정하지 않으면

뷰포트 크기가 늘어나든, 줄어들던 관계 없이 일정한 크기를 유지한다.

flex-grow

Flex Container 내에 여유 공간이 있을 때,
flex-grow 값에 따라 Flex Items가 이 공간을 비율에 따라 분배

📌 계산 방법

📌 Tip 사이트 레이아웃에서 푸터 하단에 배치할 때 사용하기 좋다.

flex-shrink

Flex Container의 크기가 줄어들어 Flex Items가 맞지 않을 때,
flex-shrink 값에 따라 Flex Items가 줄어드는 정도를 조절

• 주로 레이아웃을 벗어난 아이템 너비를 분배해서 줄이는데 사용
• 기본 값은 1 (공간이 부족할 때 모든 Item이 같은 비율로 줄어듦)

flex-shrink : 0 일때

flex-shrink : 1 일때

❓flex-shrink를 통해 줄어든 화면크기를 컴포넌트가 나누어가지는데, 줄어드는 부분의 비율 값이 실제 컴포넌트 크기보다 크다면?

그 안에 Text같은 특별한 내용물이 없다면 완전히 사라져버린다 😂😅

❓grow 나 shrink를 썼음에도 화면을 줄였는데 크기가 작아지지 않아요

부모 컨테이너의 크기가 width:500px 처럼 정적이라면 flex-shrink를 사용하더라도
뷰포트크기에 따라 부모 컨테이너 크기의 변동이 없으므로 Flex Item은 줄어들지 않는다.
width:100% 같이 부모컨테이너에 반응형 단위를 써야 효과가 있다.

❓shrink 가 적용 되었는데 삐져나오는 이유는?
font-size 자체를 줄일 수 없어서

🔎 분석

Q. flex-shrink가 0인 Flex Item 이 하나라도 있으면, 부모 컨테이너를 삐져나올 수 있다. (x)
A. 0인 Item이 있더라도, 0이 아닌 Item이 있으면 비율로 나누어가지므로 삐져나오지 않을 수도 있다.
Q. 0이 아닌 flex-shrink가 적용된 Flex Item 이 하나라도 있으면, 부모 컨테이너를 삐져나올 수 있다. (o)
A. 축소된 구역을 flex-shrink가 적용된 Flex Item이 비율로 나누어가지므로 삐져나올 수 없다.

flex-basis

Flex Item의 기본 크기를 설정하는 속성

• 기본 값은 auto : 콘텐츠 크기에 따라서 사이즈가 결정
• 주 축(Main Axis)을 따라 Flex Item이 차지하는 초기 크기를 정의.
• flex-direction이 row 일 때에는 width 를 결정하고, column 일때에는 height 를 컨트롤
• width 또는 height 속성보다 우선적으로 적용
• Flex Items가 공간을 나누기 전에 시작 크기를 설정하는 데 사용

flex

flex-grow flex-shrink flex-basis 의 축약

1) 값이 하나일 때

• 단위가 없으면 flex-grow
• 단위가 있으면 flex-basis

2) 값이 두개일 때

• 첫번째 값은 flex-grow로 단위가 없어야 함
• 두번째 값은 단위가 없으면 flex-shrink, 있으면 flex-basis

3) 값이 세개일 때

• 첫번째 값은 flex-grow : 단위 x
• 두번째 값은 flex-shrink : 단위 x
• 세번째 값은 flex-basis : 단위 o

=> 단위가 있으면 무조건 flex-basis 이다!

display : table

• HTML 요소를 테이블처럼 취급하여 테이블 레이아웃을 만들 때 유용
• 이 속성은 display: table, display: table-row, display: table-cell 등의 조합으로 사용

 .table {
        display: table;
        width: 100%;
        border-collapse: collapse;
      }
      .row {
        display: table-row;
      }
      .cell {
        display: table-cell;
        border: 1px solid black;
        padding: 10px;
      }

 <div class="table">
      <div class="row">
        <div class="cell">Header 1</div>
        <div class="cell">Header 2</div>
        <div class="cell">Header 3</div>
      </div>
      <div class="row">
        <div class="cell">Row 1, Cell 1</div>
        <div class="cell">Row 1, Cell 2</div>
        <div class="cell">Row 1, Cell 3</div>
      </div>
      <div class="row">
        <div class="cell">Row 2, Cell 1</div>
        <div class="cell">Row 2, Cell 2</div>
        <div class="cell">Row 2, Cell 3</div>
      </div>
    </div>

📌 실습 예제

• 요소+요소 선택자는 특정 요소 바로 뒤에 있는 요소를 선택하는데 사용
• .box+.box 선택자는 오른쪽 박스 기준 border-left 가 먹는다.

position CSS

요소를 어떻게 위치시킬지 정의하며, 아래의 5가지 값을 갖는다.

absolute 와 relative

• absolute를 가진 요소는 주로 relative를 가진 요소 안에 사용
• relative 내부에 absolute 가 있으면 절대 좌표 계산 시, relative 컨테이너를 기준 점으로 잡는다.

sticky

요소가 스크롤 위치에 따라 고정되도록 만들 때 사용하는 속성

• 요소가 특정 스크롤 위치에 도달할 때까지는 일반적으로 흐르는 레이아웃에서 움직(static)이다가,주어진 offset 위치가 뷰포트에서 만나면 제자리에 고정(fixed)
• 스크롤 위치에 따라 static 요소와 fixed 요소 사이를 전환

📌 활용

헤더가 페이지 상단에 고정되어 스크롤할 때 따라오는 것에 유용

뷰포트

현재 화면에 보여지고 있는 다각형(보통 직사각형)의 영역
웹 페이지를 실제로 볼 수 있는 화면의 부분

• 브라우저 뷰포트: 웹 페이지가 브라우저 창의 화면에 표시되는 영역입니다. 사용자가 브라우저를 열면, 페이지의 콘텐츠는 이 뷰포트 내에 렌더링됩니다.

• 디바이스 뷰포트: 실제 디바이스의 화면 영역을 의미합니다. 예를 들어, 모바일 디바이스에서는 화면의 물리적 크기와 해상도가 뷰포트를 정의합니다.

• 문서 뷰포트: CSS의 viewport 단위를 사용할 때, 페이지의 전체 콘텐츠를 기준으로 하는 가상의 영역을 의미합니다. 이는 CSS의 vw, vh, vmin, vmax 단위로 사용됩니다.

뷰포트 관련 CSS 속성과 메타 태그

1. meta viewport 태그

HTML 문서의 <head> 부분에 삽입하여 뷰포트의 크기와 배율을 설정
모바일 디바이스에서 반응형 디자인을 구현할 때 주로 사용

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• width=device-width: 뷰포트의 너비를 디바이스의 화면 너비와 같게 설정합니다.
• initial-scale=1.0: 페이지의 초기 확대 비율을 1로 설정합니다. ( 화면에 꽉차게 )

CSS 뷰포트 단위

• vw (Viewport Width): 뷰포트의 너비를 기준으로 한 단위, 1vw는 뷰포트 너비의 1%
• vh (Viewport Height): 뷰포트의 높이를 기준으로 한 단위, 1vh는 뷰포트 높이의 1%
• vmin: 뷰포트의 너비와 높이 중 더 작은 값을 기준으로 한 단위
• vmax: 뷰포트의 너비와 높이 중 더 큰 값을 기준으로 한 단위

❓ vw 와 % 의 차이는 ❓

%

• 창이 중심이 아닌 부모 요소의 길이에 맞게 반환한다.
• 최상단에서 사용한다면 괜찮지만 밑의 컴포넌트로 파고 들어갈수록 부모 컴포넌트와의 비율로 크기가 계산되므로 상대적인 크기 지정에는 용이할 수 있지만,
  절대적으로 원하는 크기로 맞추기에는 어려울 수 있다.
• 스크롤바를 포함하지 않은 크기 기준
• 100% 를 사용해도 스크롤바가 생기지 않는다.
  

vw

• vh와 vw는 브라우저 창의 크기에 기반하기 때문에 스크롤바를 포함한 크기 기준으로 계산

• vw 단위는 언제 어디서나 화면 창이라는 절대적인 기준을 통해 단위를 설정할 수 있다.

• 화면의 너비가 줄어들거나 늘어날 때, vw 단위를 사용한 요소의 크기는 뷰포트 너비의 비율로 자동으로 조정한다.

• 100vw 를 사용하면 스크롤바가 생긴다. 즉, vw 는 스크롤바 영역을 포함하는 크기이다.

결론

vh와 vw는 화면 크기에 유연하게 대응하는 반응형 웹 디자인에 적합. 반면, 퍼센트는 부모 요소에 의존적인 레이아웃을 구성할 때 유용하다. vw 와 % 를 혼동하여 사용할 시에 프로젝트 진행중에 화면 변경시 UI가 흔들리는 문제가 발생할 수 있으니 유의하자.

z-index

• z-index 가 높을수록 앞에 나타난다.
• 기본 값은 0
• z-index가 동일하면 코드상 순서에 따라 쌓인다.
• position: static 은 항상 뒤에 나타나고 z-index의 효과가 없다.
• z-index가 같거나 position:static 이면 나중에 작성된 요소가 앞에 나타난다.
• 부모에게 z-index 값을 줄 경우 부모끼리 먼저 z-index 순위를 정한 뒤 자식이 적용
  => 즉, 자식의 z-index 값이 아무리 높다고 하더라도 부모의 값이 낮으면 위로 올라올 수 없다.
• position 속성을 지정해야 z-index 가 유효하다.

📌 엘리먼트가 쌓이는 두가지 종류
z-index가 없는 경우의 쌓임
등장하는 순서대로

1. Root 엘리먼트의 배경과 테두리
2. 자식은 등장하는 순서대로
3. position 이 ㅈ
4. z-index가 있는 경우의 쌓임

CSS 적용 우선순위