DevLog

`flex-basis`, `flex-shrink`와 `flex-grow`는 flex child 요소에게 직접 줄 수 있는 css 속성으로, 각각 아이템의 기본 크기, 화면의 변화에 따라 flex item이 얼마나 수축(크기 감소)하고 팽창(크기 증가)할지를 정의한다. 해당 속성들은 flexible한 반응형 디자인을 설계할 때 유용하게 사용할 수 있다. flex-shrink `flex-shrink`는 box가 화면 공간을 넘어갈 경우에 box 크기를 어떻게 조정할 것인가를 결정하는 속성이다. flexbox의 크기를 줄여서 공간이 부족할 때, 자식 element 중 어떤 box의 크기를 얼마나 줄일지 정의할 수 있다. ✅ 기본값 `flex-shrink: 1;` 모든 자식 요소가 똑같은 비율 크기로 줄어든다...

처음 css 배울 때 이름이 비슷비슷해서 늘 헷갈렸던 세 가지 속성 `align-items`, `align-self`, `align-content` 한 눈에 비교하기! align-items 내부 자식 요소들을 cross-axis(교차축)를 기준으로 정렬하는 flex 속성. flex container (부모 엘리먼트)에 속성을 명시할 것! Flexbox 바로 알기(2) - main axis와 cross axis 상에서 요소 위치 결정하기 :: justify-content, align-items, flex-di Flexbox의 Main axis와 Cross axis flexbox는 주축(main axis)과 교차축(cross axis)을 기준으로 자식 요소의 위치 속성을 제어한다. 이때 default로 주축..

Flex-wrap 요소들 사이에 wrapping이 일어나지 않게 하려면 `flex-wrap`을 수정하자! ✅ wrapping : 요소들이 정해진 width를 넘어가서 다른 줄에 영향을 미치는 것 flex-wrap 속성의 기본 값 nowrap은 기본적으로 flexbox 내부의 모든 아이템이 한 줄에 있도록 한다. ⇒ 아이템들의 너비가 화면 전체 너비를 넘어가게 되면 임의로 width를 줄여서 크기 조정! flex-wrap: nowrap; ⇒ 모든 요소들을 한 줄에 있게 하기 위해 고정된 width 값이 변경된다. flex-wrap: wrap; ⇒ 요소들의 고정 width값이 유지되고, 화면이 작아질 경우 다음 줄로 넘어간다. flex-wrap: wrap-reverse; ⇒ 화면이 작아질 경우 요소들이 윗줄..

Flexbox의 Main axis와 Cross axis flexbox는 주축(main axis)과 교차축(cross axis)을 기준으로 자식 요소의 위치 속성을 제어한다. 이때 default로 주축은 수평 방향, 교차축은 수직 방향을 나타내며, 각 방향에 따라 적용되는 위치 속성값이 달라진다. 주축에 있는 item에 적용되는 속성: justify-content 교차축에 있는 item에 적용되는 속성: align-items justify-content main-axis(주축, default: horizontal)상에 있는 자식 요소들의 위치를 변경하는 flex 속성 대표적인 property values justify-content: center; : 주축 기준 중앙정렬 justify-content: sp..

Display 화면에 렌더링 되는 요소들을 어떻게 보여줄지 결정하는 CSS 속성 모든 웹사이트는 Box(영역)로 이루어져 있다! 웹사이트를 분할해보면 각 content들의 영역이 나눠지는 것을 볼 수 있는데 이것을 box라고 하고, 각 box는 display 속성값에 따라 화면 상에서 다르게 보여진다. Block 가장 기본적인 box는 `` 태그이며, `div`의 기본 display 속성은 `block`이다. Block box 옆에는 어떤 것도 올 수 없다. box가 있는 그 한 줄이 온전히 box의 영역으로 할당되기 때문! 그래서 따로 줄바꿈을 해주지 않더라도 다음 요소가 알아서 아래로 밀려나는 모습을 볼 수 있다. ``뿐만 아니라 ``, ``, ``, `` 등으로 만들어진 box도 마찬가지 ⇒ 이렇게..