개발 요정🧚‍♀️ 용덕대게

오늘은 HTML & CSS flex 정리를 더 해보려고 합니다. flex-basis, flex-grow, flex-shrink에 대해서요. 내용은 beam camp의 강사님의 강의를 바탕으로 하고 있습니다. 더 많은 내용을 원하시면 https://www.youtube.com/@veamcamp flex-basis 초기 값을 정할 수 있는 키워드인 flex-basis부터 해보겠습니다. 하숙집에 3명이 같이 살고 있습니다. 이친구들이 살고 있는 방의 크기를 늘리고 싶다면 어떻게 해야 할까요??? width를 주는 방법과 flex-basis의 값을 주면 됩니다! 방이 넓어 졌네요. ㅎㅎ 그럼 둘(flex-basis, width)의 차이는 무엇일까요??? 차이는 축에 있습니다. flex-direction이 row..

웹페이지 혹은 어플리케이션 화면을 만들때 우리는 수평적 요소들에 대한 배치를 할때 고민을 합니다. float, grid, flex중에 어떤 것을 사용할지에 대한 것을 말이죠. 우리가 많이 사용하는 요소들 예를 들어 div, p, footer등은 블럭의 개념으로 표시됩니다. 이 친구들은 블럭요소로 화면의 width를 다 차지해 버립니다. 요소들을 옆에 두지 않고 밑에(?)두죠. 이런 비 사교적인 친구들을 사교적으로 만들수 있는 flex에 대한 설명을 해보겠습니다. 이미지에서 주축과 교차축 flex-direction이 보이시나요??? 이것들은 화면에 보이는 컨테이너들 즉 요소들을 어떻게 배치하느냐에 중요한 키워드 들입니다. flex-direction 컨테이너 내 아이템을 배치할 때 주축 및 방향을 지정합니다..