Flexbox와 레이아웃 잡기

🍫 레이아웃 잡기

1. 내가 만들려고 하는 페이지를 가장 큰 단위(덩어리)로 나눠본다.
2. 나눈 큰 단위(덩어리)가 적절한지 판단하고, 그 내부에 들어갈 하위요소들도
   같은 방식으로 단위(영역)을 나눠 본다.
3. 각 덩어리에 어떤 태그를 사용할 것인지 부여한다.
4. 각종 툴을 사용해 3번까지의 과정을 하나의 그림(와이어프레임)으로 대충 그린다.
   (손으로 대충 그려도 무방)
5. 그림을 보면서 코드로 html 언어로 풀어 적는다.
6. 각 태그에 적절한 id, class를 부여한다.
7. 목업을 목표로 더미텍스트 등을 각 태그에 부여하고, css 등의 세부사항 하드코딩!

레이아웃을 설계하고, 와이어프레임을 그려 하드코딩 해보면서 느낀 점은
첫 설계 단계가 굉장히 중요하다는 것이다.
html / css 한정, 퍼블리싱은 아무리 페이지가 복잡해 보여도
큰 단위로 시작해 작은 단위로 쪼개가며 차근차근 설계하면 해낼 수 있을 것 같다.

html의 시멘틱 태그라던지 css의 디자인 등은 그 다음 문제고,
결국 직접 많이 해봐야 경험치가 많이 쌓이는 영역인 것 같다.

🍫 Flexbox 기본 적용

• 부모박스요소에 display : flex 를 적용하면 간단하게 왼쪽부터 차례대로 자식 박스를 가로 배치 할 수 있다. (default값)
• flex-direction : row : display : flex의 기본 값으로 자식 요소들을 가로배치한다.
  (Main - axis : row / cross - axis : column)
• flex-direction : column : 자식 요소들을 세로 배치한다.
  (Main - axis : columb / cross - axis : row)

🍫 justify-content

주 축(Main-axis)의 정렬 방법을 설정한다.
주 축(Main-axis)이 row일 때는 가로, column일 때 세로라고 생각하면 편하다.

• justify-content : flex-start : items를 시작점(flex-start)으로 정렬
• justify-content : flex-end : items를 끝점(flex-end)으로 정렬
• justify-content : center : itmes를 가운데 정렬
• justify-content : space-between : 시작 item은 시작점에, 마지막 item은 끝점에 정렬되고 나머지 items는 사이에 고르게 정렬됨
• justify-content : space-around : items를 균등한 여백을 포함하여 정렬

<주 축(Main-axis)이 row일 경우 예시>

🍫 align-items

교차 축(cross-axis)의 정렬 방법을 설정한다.
교차 축(cross-axis)이 column일 때는 세로, row일 때 가로라고 생각하면 편하다.

• align-items : stretch : Container의 교차 축을 채우기 위해 Items를 늘림
• align-items : flex-start : items를 시작점(flex-start)으로 정렬
• align-items : flex-end : items를 각 줄의 끝점(flex-end)으로 정렬
• align-items : center : items를 가운데 정렬
• align-items : baseline : items를 문자 기준선에 정렬

<교차 축(cross-axis)이 column인 경우 예시>

설명 이미지 출처 : HEROPY blog (이해하기 쉬운 설명 감사합니다 꾸벅)

🍫 flex의 하위속성(grow, shrink, basis 등) 은 따로 정리하여 다시 포스팅 할 예정