[DAY2] HTML/CSS 활용(Flexbox)

 

목차

🚀 진행기간: 2023년 6월 26일 ~ 2023년 7월 13일

⭐요약

---

HTML과 CSS를 활용하여 Flexbox를 이용한 레이아웃 구성 방법과 각 속성의 적용에 대해 정리함.

 

🚀 HTML 구성과 Flexbox 활용

 

1) HTML 구성	웹 페이지의 콘텐츠 흐름은 기본적으로 좌에서 우, 그리고 위에서 아래로 진행됨. 효율적 관리를 위해 Flexbox 레이아웃을 활용하여 수직 및 수평 분할을 적용할 수 있음.
2) Flexbox 레이아웃의 기본	Flexbox를 사용함으로써, 개발자는 컨테이너 내의 항목들을 유연하게 정렬하고, 각 요소가 차지하는 공간을 쉽게 조절할 수 있음. display: flex 속성은 요소들을 가로로 정렬하며, Flexbox 속성을 통해 세밀한 레이아웃 조정이 가능함.
3) 부모 요소와 자식 요소에 적용하는 Flexbox 속성	Flexbox의 다양한 속성은 부모 요소와 자식 요소에 따라 적용 방법이 달라짐. flex-direction, flex-wrap, justify-content, align-items 등의 속성은 컨테이너(부모 요소)에 적용되며, flex, flex-grow, flex-shrink, flex-basis 등은 항목(자식 요소)에 적용됨.

1. HTML 구성하기

---

대부분의 경우 콘텐츠의 흐름은 좌에서 우, 위에서 아래로 흐름. CSS로 화면을 구분할 때는 수직 분할과 수평 분할을 차례대로 적용하여 콘텐츠의 흐름을 따라 작업을 진행함.

1. [수직 분할] 화면을 수직으로 구분하여 콘텐츠가 가로로 배치될 수 있도록 요소를 배치함.
2. [수평 분할] 분할된 각각의 요소를 수평으로 구분하여 내부 콘텐츠가 세로로 배치될 수 있도록 요소를 배치함.

1) Flexbox로 레이아웃 잡기

• Flex(Flexible): 잘 구부러지는, 유연한
• 박스를 유연하게 늘리거나 줄여 레이아웃을 잡는 방법.

2) display: flex 분석하기

• display: flex는 부모 박스 요소에 적용해 자식 박스의 방향과 크기를 결정하는 레이아웃 구성 방법.

우선 HTML로 3개의 <div> 요소를 자식으로 가진 <main> 요소를 작성함.

<main>
	<div>box1</div>
	<div>box2</div>
	<div>box3</div>
</main>

각 요소들이 눈에 잘 보이도록 CSS로 <main> 요소에는 빨간색 점선, <div> 요소들에는 초록색 실선으로 테두리를 설정해 주고, 전체적으로 margin과 padding도 10픽셀씩 설정함.

main {
  border: 1px dotted red;
}

div {
  border: 1px solid green;
}

* {
  margin: 10px;
  padding: 10px;
}

다음과 같은 화면이 나오는 것을 확인할 수 있음. <div> 요소들은 별다른 설정을 해주지 않으면 위쪽에서부터 세로로 정렬되며, 가로로 넓게 공간을 차지하는 것을 확인할 수 있음.

이번에는 이 상태에서 부모 요소인 <main> 요소에 display: flex 속성을 적용함.

main {
  **display: flex;**
  border: 1px dotted red;
}

...

속성을 적용했더니 자식 요소인 <div> 요소들이 왼쪽부터 가로로 정렬된 것과 내용만큼의 공간을 차지하는 것을 확인할 수 있음.

이처럼 Flexbox 속성들을 활용하면 요소의 정렬, 요소가 차지하는 공간을 설정할 수 있음.

2. 부모 요소에 적용해야 하는 Flexbox 속성들

---

• Flexbox 속성을 사용할 때 "속성을 지정해 주는 위치"를 유의해야 함.
• Flexbox 속성 중에서는 부모 요소에 적용해야 하는 속성들, 자식 요소에 적용해야 하는 속성들이 있음. 적절한 위치에 속성을 지정하지 않으면 요소들이 원하는 대로 정렬되지 않음.

1) flex-direction : 정렬 축 정하기

: 부모 요소에 설정해 주는 속성으로, 자식 요소들을 정렬할 정렬 축을 정함. 아무 설정도 해주지 않으면 기본적으로 가로 정렬을 함.

main {
	display: flex;
	**flex-direction : row;**
}
	/* 부모 요소인 main에 작성하여 자식 요소인 div들을 정렬할 축을 정합니다. */

2) flex-wrap : 줄 바꿈 설정하기

: 하위 요소들의 크기가 상위 요소의 크기를 넘으면 자동 줄 바꿈을 할 것인지 정함. 설정하지 않으면 줄 바꿈을 하지 않음.

main {
	display: flex;
	**flex-wrap : nowrap;**
}
	/* 부모 요소인 main에 작성하여 자식 요소인 div들의 줄 바꿈을 어떻게 할지 정합니다. */

 

3) justify-content : 축 수평 방향 정렬

: 자식 요소들을 축의 수평 방향으로 어떻게 정렬할 것인지 정함. 요소들이 가로로 정렬되어 있다면 가로 방향으로 어떻게 정렬할 것인지, 세로로 정렬되어 있다면 세로 방향으로 어떻게 정렬할 것인지 정하는 속성임.

주요 속성값으로는 flex-start , flex-end, center, space-between, space-around이 있음. 각 속성값의 특성이 잘 드러날 수 있도록 자식 요소의 크기를 동일하게 설정해 놓음.

• flex-direction : row 인 경우 ↔

• flex-direction : column 인 경우 ↕️

4) align-items : 축 수직 방향 정렬

: 자식 요소들을 축의 수직 방향으로 어떻게 정렬할 것인지 정함. 요소들이 가로로 정렬되어 있다면 세로 방향으론 어떻게 정렬할 것인지, 세로로 정렬되어 있다면 가로 방향으론 어떻게 정렬할 것인지 정하는 속성임.

주요 속성값으로는 stretch , flex-start , flex-end , center , baseline 이 있음. 이번에는 각 속성값의 특징이 명확하게 드러날 수 있도록 자식 요소의 글씨 크기를 각각 다르게 설정해 놓음.

• flex-direction : row 인 경우 ↕️

• flex-direction : column 인 경우 ↔

3. 자식 요소에 적용해야 하는 Flexbox 속성들

---

• Flexbox 속성들을 활용해 요소의 정렬, 요소가 차지하는 공간을 설정할 수 있음.
• 부모 요소에 적용해야 하는 속성들이 자식 요소들의 정렬과 관련이 있다면, 자식 요소에게 적용해야 하는 속성인 flex는 요소가 차지하는 공간과 관련이 있음.

1) flex 속성의 값

flex 속성은 세 가지 값을 지정해 줄 수 있음.

flex:   <grow(팽창 지수)>    <shrink(수축 지수)>    <basis(기본 크기)>

• grow(팽창 지수): 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지
• shrink(수축 지수): 요소의 크기가 줄어들어야 할 때 얼마나 줄어들 것인지
• basis(기본 크기): 늘어나고 줄어드는 것과 상관없이 요소의 기본 크기는 얼마인지

자식 요소에 flex 속성을 설정하지 않으면 기본값이 적용되며, 왼쪽에서부터 오른쪽으로 콘텐츠의 크기만큼 배치됨.

flex: 0 1 auto;

이 순서와 기본값은 반드시 기억! flex: grow shrink basis, flex: 0 1 auto

꼭 flex 속성 안에 세 가지 값을 한 번에 설정할 필요 없이 각 값을 따로 지정할 수 있음.

flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;

2) grow : 자식 박스는 얼마나 늘어날 수 있을까?

• 요소의 크기가 늘어나야 할 때 얼마나 늘어날 것인지를 의미함.
• 어떤 의미인지 알아보기 위해서 HTML에서 자식 <div> 요소들에 id를 추가해서 grow 값을 변경하며 화면 변화를 확인함.

<main>
  <div id="box1" class="box">box1</div>
  <div id="box2" class="box">box2</div>
  <div id="box3" class="box">box3</div>
</main>

grow의 기본 값인 0은 빈 공간이 있어도 늘어나지 않음. 따라서 빈 공간이 있음에도 박스들이 늘어나지 않음. 그럼 grow의 값을 변경하며 어떤 변화가 생기는지 확인함.

box1만 flex-grow : 1로 설정함. flex-grow의 기본값은 0이므로 나머지 박스는 flex-grow : 0인 상태임.

box2도 flex-grow : 1로 설정함. box3만 flex-grow : 0인 상태임.

box3도 flex-grow : 1로 설정함. 세 박스 모두 flex-grow : 1인 상태임.

grow(팽창 지수)는 정렬축 방향으로 빈 공간이 있을 때, 각 자식 요소들이 얼마나 늘어나서 남는 공간을 차지할 것인지 비율을 정하는 것이라고 생각하면 이해하기 쉬움.

• 첫 번째 예시에서 grow는 box1 : box2 : box3 = 1 : 0 : 0 이므로 box1이 모든 공간을 차지하고,
• 두 번째 예시에서 grow는 box1 : box2 : box3 = 1 : 1 : 0 이므로 box1과 box2가 1:1로 공간을 나눠 가지고,
• 세 번째 예시에서 grow는 box1 : box2 : box3 = 1 : 1 : 1 이므로 세 박스가 1:1:1로 공간을 나눠 가진 것임.

팽창지수는 자식 요소의 grow값 / 자식 요소들의 grow값의 총합의 비율로 빈 공간을 가져감. 팽창지수의 절대적 크기가 아닌 총합에서의 비율로 빈 공간을 차지하게 되는 것임.

3) shrink : 자식 박스는 얼마나 줄어들 수 있을까?

• grow와 반대로, 설정한 비율만큼 박스 크기가 작아짐. 비율이 클수록 더 많이 줄어듦.
• flex-grow 속성과 flex-shrink 속성을 함께 사용하는 일은 추천하지 않음. 비율로 레이아웃을 지정할 경우 flex-grow 속성 또는 flex: <grow> 1 auto와 같이 grow 속성에 변화를 주는 방식을 권장함. flex-shrink 속성은 width나 이후 설명할 flex-basis속성에 따른 비율이므로 실제 크기를 예측하기가 어렵기 때문임.
• flex-grow 속성으로 비율을 변경하는 경우, flex-shrink 속성은 기본값인 1로 두어도 무방함.

 

4) basis : 이 박스의 기본 크기는 얼마일까?

• 자식 박스가 flex-grow나 flex-shrink에 의해 늘어나거나 줄어들기 전에 가지는 기본 크기임.
• flex-grow가 0일 때, basis 크기를 지정하면 그 크기는 유지됨.

grow는 0 : 1 : 1로 설정하고, box1에 flex-basis : 50px로 설정함.

box1의 크기가 늘어나거나 줄어들지 않고 50px을 유지하는 것을 확인할 수 있음.

flex-grow 속성의 값이 0인 경우에만 flex-basis 속성의 값이 유지됨.

display 속성에 flex가 적용된 컨테이너 내부에 존재하는 자식 박스는 경우에 따라 basis로 설정된 크기가 항상 유지되는 것은 아님. flex-grow 속성의 값이 양수일 경우, 늘어나면서 flex-basis 속성에 적용한 값보다 커질 수도 있음. 실제 레이아웃을 구현하면서 막히는 경우에는 다음의 원리를 참고할 수 있음.

 

🚀참고

width와 flex-basis를 동시에 적용하는 경우 flex-basis가 우선됨
콘텐츠가 많아 자식 박스가 넘치는 경우 width가 정확한 크기를 보장하지 않음.
(flex-basis를 사용하지 않는다면) 콘텐츠가 많아 자식 박스가 넘치는 경우를 대비해 width 대신 max-width를 쓸 수 있음.

⭐후기

---

• 와이어프레임과 목업을 통해 웹 페이지의 기본 구조를 이해하는 데 많은 도움이 되었음.
• 실제 코딩 전에 이를 설계하는 과정이 중요하다는 것을 깨달았으며, 배운 내용을 적용하면 웹 개발의 효율이 증가할 것이라고 예상됨.
• 내용이 조금 어려웠지만, 기본적인 구성과 속성들을 실습해보며 웹 페이지의 구조와 디자인에 대해 파악할 수 있었음.
• Flexbox의 고급 사용법과 함께 그리드 레이아웃과의 비교, 실제 프로젝트에서의 적용 사례 등을 추가적으로 조사하여 반응형 웹 디자인에 있어서 Flexbox와 CSS 그리드를 어떻게 조합하여 사용할 수 있는지 찾아봐야겠음.

⭐참고자료

---

1) Sandbox, "css-flex-todo", https://codesandbox.io/s/css-flex-todo-slvutb

2) Flexbox Froggy, https://flexboxfroggy.com/#ko

 

이 글은 코드스테이츠 x KNU가 주최한 직무역량캠프에서 공부한 내용을 작성한 것입니다.