[Challenge / day-29] CSS flex

오늘의 공부범위 : 50강 내용(Part4. ch2. 3강)

 

오늘은 CSS flex 익숙한 개념이지만 한 번도 마스터를 했다!!라는 기분이 든 적이 없었는데 해당파트를 제대로 공부해보는 시간이다!! 딥 다이브~ 레츠고!!

목차

1. CSS flex 개념

2. CSS flex 적용해보기

 

#1. CSS flex 개념

 

(1) CSS flex란?

  CSS flexbox는 CSS3에서 도입된 웹용 레이아웃 모델 중 하나로, Flexible Box Layout이 원래 용어이고, 줄여서 Flexbox라고 한다. 이 모델은 아이템들을 화면에 맞게 유동적으로 배치하고, 이를 위한 인터페이스 내의 아이템 간 공간 배분 및 정렬 기능을 제공한다.
  Flexbox는 기본적으로 1차원 레이아웃 모델로 설계되어 있기 때문에, 레이아웃을 다룰 때 한 번에 하나의 차원(행이나 열)만을 다룬다는 의미다. 이를 통해 아이템들을 각각 독립적으로 정렬하거나, 그룹화하거나, 간격을 조절하는 등의 다양한 레이아웃 효과를 쉽게 구현할 수 있다.

 

(2) Main 축 & Cross 축

출처 : studiomeal.com%2Farchives%2F197

플랙스를 적용할 때 가장먼저 축이 어느방향일지를 정하는 것이 중요하다. 해당 축의 방향에 따라 자식들의 정렬 방향과 모양이 완전 달라지기 때문이다.

 

메인축은 flex-direction 속성으로 지정할 수 있으며, row와 column 방향이 있고 각각 왼쪽과 위쪽이 기준 시작방향이며, row-reverse와 column-reverse로 역방향으로 정렬할 수 있다.

 

(3) flex box로 지정하기

display : flex 또는 inline-flex 를 통해 flex box 로 지정하여 flex를 적용받는 컨테이너로 만들 수 있다.

 

 

(4) grow,shrink, basis

flex-grow 속성과 shrink 그리고 basis를 이용하여 부모요소안에 자식들이 어떤 비율로 채워질지 정한다. basis는 부모요소를 채울 때 자식 요소 하나의 최소크기 정하는 속성이다.

간단하게 말로 정리해보면, grow는 부모요소의 크기보다 자식요소의 크기의 합이 작을 때 자식 요소 각각이 가지는 grow 속성 값의 비에 따라 부모요소를 꽉 채운다.

shrink는 부모요소가 자식요소의 크기의 합보다 작을 때 자식요소를 줄여서 부모요소를 꽉 채우도록 끼워맞추는데 shrink 속성 값에 따라 줄어드는 비율이 달라진다. 밑에서 실습을 통해 조금 더 자세하게 알아보았다.

 

#2. CSS flex 적용해보기

codesandbox를 이용하여 강사님처럼 grow, shrink, basis를 여러가지 방법으로 실습해볼 수 있었다. 실제 적용해보면서 해보니 더 이해가 잘 되고 진작에 이렇게 여러 번 해봤다면 더 익숙해서 잘 다루었을 것 같은데 너무 아쉽다. 이제라도 CSS를 차근차근 실력을 쌓아서 일단 중간은 갈 수 있도록 하고, 프로젝트 완성본에서는 CSS 광인의 면모를 나도 갖출 수 있도록 해야겠다.

 

 

 

오늘 블로깅 모습!!

 

관련링크

패스트캠퍼스 : http://bit.ly/3Y34pE0

패스트캠퍼스 [직장인 실무교육]

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

#패스트캠퍼스 #패캠챌린지 #수강료0원챌린지 #환급챌린지 #직장인인강 #직장인자기계발 #패캠인강후기 #패스트캠퍼스후기 #오공완 #사이드프로젝트10개기술스택으로구현하는풀스택서버리스프로젝트withReact