윤코딩 윤코딩

flex-basis, flex-grow, flex-shrink item이 차지하는 크기(row 방향일 때에는 width, column 방향일 때에는 height)를 container의 크기 변화에 따라 바뀔 수 있도록 설정이 가능 기본적으로 item의 content box가 차지하는 크기를 제외한 여백이 늘어나거나 줄어드는 방식임 Flex Grow flex-grow 속성은 기본적으로 0으로 설정되어있으며, 각 item마다 값을 주게 되면 container내의 flex-grow 값의 합에 대한 비율을 유지하면서 늘어남 실제로 늘어나는 부분은 item의 내용이 차지하는 크기(예시에서 텍스트가 차지하는 크기)를 제외한 나머지 여백임 Flex Shrink flex-shrink 속성은 기본적으로 1으로 설정되어있..

Flex 란? 레이아웃을 더 쉽게 배치할 수 있도록 고안된 display 속성 부모 요소인 container와 내부에 자식 요소인 item으로 이루어짐 Flex-direction flex레이아웃은 가로(row) 또는 세로(column) 방향을 가질 수 있으며, 설정해주지 않으면 가로(row) 방향이 기본값 item이 거꾸로 배치되도록 변경할 수 있음 row-reverse 또는 column-reverse Main축과 Cross축 📌Justify-content 와 Align-items ✔ Justify-content는 Main축, Align-item는 Cross축에 적용되는 속성 ✔ 처음 배웠을 때 Main 축을 꼬치, item을 어묵에 비유하여 배운 기억이..ㅋㅋ justify-content는 어묵을 정렬..

Display 속성 mdn 문서 - CSS display display 속성은 요소를 블록 혹은 인라인 요소 중 어떤 방법으로 취급될지와, flow, grid, flex처럼 자식 요소를 배치할 때 사용됨 display 속성의 값은 block, inline, inline-block, flex, grid 등이 있음. 📌display: block 블럭처럼 위에서 아래로 쌓이는 특징이 있음. , , , , , 등의 요소는 대표적인 block 속성 가로 영역을 모두 차지하기 때문에 block 특성을 가진 요소와 인접된 요소는 양 옆으로 배치될 수 없음. width, height, margin, padding의 설정이 가능 📌display: inline 각 요소를 인접된 요소의 양 옆으로 나열할 수 있음. , , ..

px(pixel) 모니터나 스마트폰에서 하나의 화소에 해당하는 부분. 화면에 표시되는 가장 작은 단위 고정된 단위로, 크기가 변하지 않음 em 상대적인 단위로, 해당 단위가 사용되고 있는 요소에 의해 사이즈가 결정 요소에 font-size 속성이 정의되어있지 않다면 부모 요소의 사이즈를 따라감 개발자 도구로 보면 h1 태그의 폰트 사이즈가 2em으로 되어있다. 2em이 32px로 표현되어 있는데, 이는 h1태그의 부모요소인 body태그가 기본적으로 16px의 사이즈를 갖기 때문. rem 상대적인 단위로, 최상위 엘리먼트인 Root의 사이즈를 기준으로 사이즈가 결정 html에서 최상위 요소는 html태그(기본적으로 16px의 사이즈를 가짐) body태그의 폰트 사이즈를 32px로 바꾸고 em과 rem 비교..