#006. 멋있게 배치하는 방법 flex, grid 배우기

😎 오늘의 잘한점

액션

실습할 내용을 미리 예습한 후, 수업에서 진행되는 코드와 어떤 차이점이 있는지 파악하였다.

칭찬

코드에는 정답이 없지만 더 나은 코드를 작성하기 위해 노력하는 거 최고야!! 👍

여러가지 방법을 알아두고, 그 방법 중에 나한테 맞는 코드, 웹 접근성을 고려한 것, 가독성이 좋은 코드를 찾아가자

---

✔️ 오늘의 개선점

문제

layout을 flex로 구현하는 과제를 잘 수행은 했지만, 불필요한 CSS 처리가 있었다.

원인

간단하게 처리할 수도 있었지만 큰 단위의 레이아웃과 단순한 방법들이 먼저 생각이 났었다.

물론 특정 코드만이 정답은 아니기 때문에 틀린건 아니지만 아쉬움이 느껴졌다.

액션 플랜

1. flex를 사용할 때는 flex-basis, flex-grow 속성들을 사용하여 유연한 flex의 특징을 잘 살릴 수 있다.
2. 모든걸 flex처리하지 않고 필요한 부분에만 적용해도 된다.
3. 코드를 작성할 때 중복을 방지할 수 있는지, 불필요하게 동작되는 코드가 있는지 고민하며 작성하자!

---

💡 오늘의 배운점

배움

• flex
  • align-content를 사용할 때의 주의점: 여러줄로 이루어진 플렉스 컨테이너에만 동작하므로 flex-wrap: wrap | wrap-reverse 속성값을 주어야한다.
  • flex-grow와 flex-basis를 같이 사용하게 되면 flex-grow에 의해 플렉스 아이템이 컨테이너에서 일정 비율의 공간을 차지하게 되므로 flex-basis가 제대로 적용되지 않는다.
    flex-basis는 flex-item의 기본 공간을 설정하는 것이므로 컨테이너의 사이즈에 따라 flex-item의 사이즈는 유연하게 조절될 수 있다. 따라서 적용이 되지 않는 것이 아니라 flex-grow를 사용했을 때는 flex-basis의 크기보다 얼마나 커질 수 있는지 설정하는 것이다.
• grid
  • grid-template-columns grid-template-rows
  • repeat() minmax() auto-fill auto-fit gap
  • grid-area
  • grid-template-areas / grid-aria

float보다 flex를 많이 사용하는 이유

flex는 '유연하다'고 많이 애기한다. 컨테이너의 크기에 따라 그 공간에 맞춰서 아이템의 크기가 늘어나거나 줄어드는 점 때문이다.

예를 들어 한국어 사이트에서 외국어로 번역될 때 텍스트 길이 등이 변경될 수 있다. 그럴 경우, float로 구현하게 되면 레이아웃이 깨질 수 있기 때문에 유연하게 동작하는 flex를 많이 사용한다.

우리나라 사이트에는 아직 float 를 사용하는 곳도 많은데, 글로벌 사이트의 경우 flex 사용이 많은 이유가 그 때문일 수도 있다고 생각한다.

의미

평상시에 코드에 사용했던 flex와 grid를 별도의 고민없이 사용해왔다는 것을 깨달았다.

왜 사용해야 하는지, 다른 방법으로는 구현할 수는 없는지 인지하는 것이 중요하다.

오늘을 마지막으로 레이아웃에 관련된 HTML/CSS 내용이 끝이 나면서 불과 며칠 전 프로젝트에 작성해둔 레이아웃 코드에 수정할 부분이 보였다.

이번 HTML/CSS 과정을 통해 그동안 놓쳤던 웹 호환성, 가독성, 태그의 의미를 알 수 있어서 좋았다😀