반응형 화면배치2 CSS Flex레이아웃 item 적용 속성 Flex레이아웃으로 화면을 구성하는 방법에는 2가지가 있다. 1. 컨테이너에 적용하는 속성 2. 아이템에 적용하는 속성 이렇게 두 가지로 나뉘는데, 오늘은 2. 아이템에 적용하는 속성에 대해 다뤄보겠다. 배우면서 복습하는 차원에서 포스팅을 하는 거라 많이 부족하지만😰 누가 봐도 최대한 이해가 될 수 있도록 작성해 보겠습니다!!😝😝 아이템에 적용하는 속성 아이템에 적용하는 속성에는 flex-basis, flex-grow, flex-shrink 속성이 있다. 1. flex-basis : 메인 축상의 길이로, 아이템들의 기본 크기를 설정한다. 컨테이너의 flex-direction 값에 따라 달라진다. flex-direction이 row일 때는 너비(기본값), column일 때는 높이. 1️⃣auto : 기본값.. 2024. 1. 8. CSS Flex 레이아웃 컨테이너 적용 속성 CSS의 레이아웃을 구성하는 요소에는 여러 가지가 있다. 화면배치를 쉽고 유연하게 사용하기 위해서는 이러한 속성들을 이용한다. 이전에는 float나 inline-block 등을 이용한 방식들이 쓰였지만 현재는 flex와 gird를 보편적으로 많이 쓴다. ❗참고❗ float란? 원래는 웹페이지에서 이미지를 어떻게 배치할 것인가에 대한 속성으로 쓰였지만, 현재는 레이아웃용으로 태그와 클래스 등의 요소들을 웹페이지에서 어떻게 구성할 것인가로 많이 쓰인다. inline-block란? display속성에서 inline속성과 block속성의 특징을 모두 가지고 있는 속성 inline 속성 처럼 흐름을 따라 나열되지만, block속성처럼 width, height를 이용해 크기 설정이 가능하다. 이를 활용하여 레이아웃.. 2024. 1. 7. 이전 1 다음 반응형
