wecode 사전스터디(7/25) 로그

개발한 것/배운 것

---

CSS Flexbox

기존의 CSS만으로 구현이 어려웠던 레이아웃의 구현을 돕기 위해 CSS3에서 새로 도입된 구현 방법. 복잡한 계산 없이 요소들의 정렬, 크기, 방향 등을 쉽게 정리할 수 있다.

 

Flexbox의 구성

flexbox는 복수의 자식 요소인 flex item과 그 상위 부모 요소인 flex container로 구성된다.

출처 : Naver D2

Flexbox를 만들기 위해서는, 정렬하려는 요소의 부모 요소에 display:flex;를 설정하면 된다. display: flex 속성이 적용된 요소는 flex container가 되고, flex container의 자식 요소는 flex item이 된다.

 

Flexbox의 부모 요소 속성과 자식 요소 속성 구분

출처 : Naver D2

전체적인 정렬이나 흐름에 관련된 속성은 flex container에 정의하고, 자식 요소의 크기나 순서에 관련된 속성은 flex item에 정의한다. 이를 분리해 적용하는 것이 중요하다.

 

• flex container 속성: flex-direction, flex-wrap, justify-content, align-items, align-content
• flex item 속성 : flex, flex-grow, flex-shrink, flex-basis, order

Flex 부모 요소 속성 정리

1. flex-direction : flex 컨테이너 내의 요소들의 배치 순서를 지정할 수 있다. row, row-reverse, column, column-reverse가 있다.

2. flex-wrap: 기본적으로, flex 컨테이너 내 요소들은 한 줄 내에 모든 아이템을 배치한다. 해당 속성을 변경하여 한 줄에 배치할 요소들의 범위를 지정할 수 있다

 - nowrap : 모든 요소들을 한 줄 내에 배치

 - wrap : 요소들을 여러 라인에 배치

 - wrap-reverse: 요소들을 여러 라인에 역순으로 배치

3. flex-flow : 위 두 속성 (flex-direction, flex-wrap)을 한 가지 명령으로 설정할 수 있다. ex) flex-flow : row wrap;

4. justify-content: 컨테이너 내의 요소들의 수평 배치 방법을 지정한다

 - flex-start : 요소들이 컨테이너의 시작점부터 배치

 - flex-end: 요소들이 컨테이너의 끝부분에 맞춰 배치

 - center: 요소들이 컨테이너의 중간에 맞춰 배치

 - space-between : 요소들이 일정한 기준에 맞춰 사이에 공간을 두고 배치

 - space-around: 요소들이 일정한 기준에 맞춰 사이에 공간을 두고 배치되며, 컨테이너의 시작과 끝 부분에도 일정 공간이 생기도록 배치

5. align-items: 컨테이너 내의 요소들의 수직 배치 방법을 지정한다

 - stretch : 요소들이 컨테이너의 수직 크기만큼 맞춰 배치된다.

 - flex-start : 요소들이 컨테이너의 시작점부터 배치

 - flex-end : 요소들이 컨테이너의 끝점에 맞춰 배치

 - center : 요소들이 컨테이너의 중간에 맞춰 배치

6. align-content: 컨테이너 내에 여러 row의 flex 아이템들이 있을 경우의 배치 방법을 지정 (justify-content와 세부 방식은 동일)

 

Flex 자식 요소 속성 정리

1. order : 아이템이 보여지는 순서를 정의한다.

2. flex-grow: 컨테이너 내의 다른 item들과 비교하여, 크기를 설정

3. flex-shrink : 컨테이너 내의 다른 item들과 비교하여, 크기를 설정

4. flex-basis: 남은 공간이 flex-item들에게 분배되기 이전에, item의 크기를 기본 설정

5. align-self: flex individual 요소의 표기 방식을 개별적으로 지정

---

참고 사이트

https://d2.naver.com/helloworld/8540176

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

A Complete Guide to Flexbox | CSS-Tricks

https://flexboxfroggy.com/

Flexbox Froggy

---

회고

퇴사 전 마지막 근무 주라, 목~금 개발 공부를 하지 못했다. CSS의 flexbox는 실무에서도 많이 쓰이는 기술이라고 들어서, 부모와 자식 요소의 속성을 다른 사람에게 설명할 수 있을 정도까지 더 숙지해야함을 느꼈다. 내일은 CSS Grid 레이아웃을 공부하고자 한다.

---

내일 개발할 것

1. Freecodecamp.org : CSS grid 레슨 끝내기

2. CSS Grids Garden 게임 완료

3. codewars 코드카타 3개 완료 후 리뷰 남기기