css flex2 [CSS] Flexbox 한 방에 정리하기! 가변적인 레이아웃을 손쉽게 만들고 정렬하기 위해 꼭 알아야 할 개념이 바로 플렉스박스(Flex Box)입니다. 이번 장에서는 플렉스박스에서 사용하는 기초 용어와 사용법을 쉽고 간단하게 정리해 보았습니다.플랙스박스는 CSS의 레이아웃 기술 중 하나로, 공식명칙은 Flexible Box Layout이며, 일반적으로는 FlexBox라고 줄여서 부릅니다😊 📌1. 기초 용어1) 플렉스 컨테이너(flex container) , 플랙스 아이템(flex items)플렉스 컨테이너는 부모 요소를, 플렉스 아이템은 그 안에 포함된 자식 요소들를 의미합니다. 부모 요소를 플렉스 컨테이너로 설정하면, 내부의 자식 요소들은 자동으로 플렉스 아이템이 되어 유연하게 크기와 위치가 조정되는 구조로 작동합니다.2) 주축(Main .. 2025. 6. 15. HTML/CSS] flex- box로 요소 배치하기 CSS로 원하는 형태의 레이아웃을 만드는 건 생각보다 쉽지 않습니다. Position, Float, Table 등을 이용해서 레이아웃을 하면 복잡하고 시간도 많이 걸립니다. 이걸 도와주는 친구가 바로 '플렉스 박스 레이아웃'입니다. '플렉스 박스 레이아웃'을 사용하면 박스 높이를 동일하게 맞추거나 아이템의 사이즈에 상관없이 동일한 간격으로 배치하는 일 등이 쉬워집니다. 1. Flex -box는 'container'와 'item'으로 이루어져 있습니다. 'container'와 'item'에는 들어가는 속성들도 아래처럼 다른데요 ㅎㅎ 오늘은 몇가지만 살펴보겠습니다. contariner속성에는 display, flex-flow, justify-content, align-content, align-item 등이.. 2021. 8. 21. 이전 1 다음
