TIL: 2022-08-29

⚙️ 오늘 배운 언어

CSS

 

🐹 오늘의 기분

몸 컨디션이 안 좋아서 집중이 어려웠다. 하필이면 나한텐 너무나도 헷갈리는 개념인 Flexbox를 공부하는 날이라 엎친데 덮친격이었음. 그리고 잘 쓰던 의자가 갑자기 푹 꺼진 느낌이 들어 의자도 새로 알아봐야 한다. 당연함. 이 의자 10년 넘음. 이 정도면 유물 수준.. 인터넷으로 사려다가 그래도 직접 앉아보고 사는 것이 좋을 것 같아 언제 한 번 주말에 시간내서 매장에 가봐야겠다. 내 시간... 

오늘은 레이아웃과 플렉스박스를 스스로 공부하고 페어분과 계산기 목업을 만들어보는 것이 하루 일정이었다. 중간에 레이아웃 구현해보는 실습도 있었는데 어찌저찌 완성은 했으나, 이렇게 완성하는 게 과연 맞나..? 싶었다. 이런 프로그램을 만드는 데에는 페어프로그래밍을 어떻게 해야 할 지 감이 오지 않았다. 알고리즘 문제를 풀 때는 그래도 의사코드도 작성해가면서 나름의 방향이 잡혔던 것 같은데... 페어분과 나 둘 다 플렉스를 완전히 이해하지 못한 상황이라 더 어려웠다. 일단 오늘은 와이어프레임부터 짜고 그걸 기반으로 html을 작성해보는 것에서 끝냈다. 내일 CSS 적용해보면서 삽질 실컷 해야지.. 얼른 라이브세션 들으면서 머릿속에 여기저기 흩어져있는 지식들을 정리하고 싶다.

 

🗝 키워드

Flexbox, container, item, 레이아웃, flex, flex-direction, justify-content, align-items, flex-grow, flex-shrink, flex-basis

 

🗣 스스로에게 설명

flexbox는 박스를 유연하게 늘리거나 줄여 레이아웃을 구성하는 방법이다. 

display: flex는 display의 속성값 중 하나이다. (MDN: https://developer.mozilla.org/ko/docs/Web/CSS/display )

** flex를 적용하면 박스는 딱 박스에 담긴 콘텐츠만큼의 공간만 차지한다. **

flexbox는 부모 요소에 적용하는 속성과 자식 요소에 적용하는 속성이 따로 있다. 이걸 목적에 따라 잘 구분해서 적용하는 것이 중요하다.

- 부모 요소에 적용해야 하는 속성 (자식들의 정렬 방식 설정)

flex-direction: 자식 요소들의 정렬 축 설정. (가로 - row(default), 세로 - column)

flex-wrap: 자식 요소들의 줄바꿈을 어떻게 할지 설정 (안 함 - nowrap(default), 함 - wrap)

justify-content: 축과 수평 방향에서 자식 요소들을 어떻게 정렬할 것인지 설정 

align-items: 축과 수직 방향에서 자식 요소들을 어떻게 정렬할 것인지 설정 

- 자식 요소에 적용해야 하는 속성 (각 요소가 차지하는 공간 설정)

flex-grow: 요소의 크기가 얼마나 늘어나도록 할 지 설정

flex-shrink: 요소의 크기가 얼마나 줄어들도록 할 지 설정

flex-basis: 요소의 기본 크기 설정

--> 위 셋은 축약형으로 작성 가능하다. flex에 위 순서대로 써주면 됨. (ex: flex: 0 1 auto <- 기본값)

 

❓ 막히는 or 막혔던 부분

머리로는 알겠는데 막상 적용하려고 하면 머리가 하얘진다 허허

먼저 생각한대로 적용해보고 앗 아니넹 하고 다른 거 적용해보고 이 난리...

자식 요소에 적용하는 flex-grow, flex-shrink, flex-basis가 헷갈린다. flex-basis는 width랑 대체 뭐가 다른 걸까.....

flex-basis에서 0과 auto의 차이 (스택오버플로우에서 관련 질문을 읽었는데 이해가 안 돼서 까먹어버렸다. 다시 봐야지)

justify-content와 align-items가 헷갈렸는데 https://studiomeal.com/archives/197 <- 여기서 어묵꼬치로 비유한 걸 보고 유레카했다. 물론 완전히 이해하려면 더 연습해봐야 한다.

 

🛠 질문 만들기

• 자식 요소들의 줄바꿈을 설정하려면 어떤 속성을 적용해야 하는가?
• 부모 요소에 적용하는 flexbox 속성은 어떤 것들이 있는가?
• 자식 요소에 적용하는 flexbox 속성은 축약형으로 어떻게 작성할 수 있는가?