markup24

주로 UI 요소를 효율적으로 정렬하기 위해 사용한다.특히, HTML 구조를 변경하지 않고 Flex 속성에 따라 아이템의 순서 변경이 용이하다.그래서 반응형 페이지를 작성할 때에 그 매력이 더욱 빛을 발한다. item1 item2 item3 item4 item5예시 1) PC 모드에서 목록 표기 (가로 정방향)ul { display: flex; gap: 15px; justify-content: center; align-items: center;} 예시 2) 모바일 모드에서 목록 표기 (세로 정방향)ul { display: flex; gap: 15px; justify-content: center; flex-direction: column;..

CSS에서 grid와 flex는 레이아웃을 구성하는 방법이다. Grid와 Flex의 주요 차이점구분GridFlex레이아웃 방식2차원(행+열) 레이아웃1차원(행 또는 열) 레이아웃주 사용 목적전체 페이지 또는 큰 영역의 배치내부 요소 정렬 및 작은 UI 구성축의 개념행(row)과 열(column) 모두 사용 가능주축(main axis)과 교차축(cross axis) 사용정렬 방식grid-template-rows, grid-template-columns 등을 사용하여 명확한 배치 가능justify-content, align-items로 유연한 정렬요소 크기 조절grid-auto-flow, fr 단위 등으로 자동 조정 가능flex-grow, flex-shrink로 가변적 크기 조정배치 컨트롤특정 위치 지정(g..