CSS Flex2 [CSS] grid레이아웃 grid 레이아웃 CSS 레이아웃의 흐름 : Float > Flex > Grid grid 레이아웃 시스템의 구조 flex는 1차원적 배열 구조 : row, column 방향 택 1 flex를 여러번 중첩시켜서 사용하여 구조를 짠다. grid는 2차원적 배열 구조 : row와 column 레이아웃 동시 설정 가능 grid 속성 요소의 속성을 grid로 변경 grid-line, grid-number grid-template-rows grid의 행의 개수 및 크기를 지정할 수 있다. grid-template-rows : 1fr 2ft 200px grid-template-columns grid의 열의 개수 및 크기를 지정할 수 있다. fr : fraction(분수)의 약자, grid-template에서 사용할 .. 2024. 4. 9. [CSS] flex 레이아웃 flex레이아웃 CSS 레이아웃 배치에 중점을 두고 고안되었기 때문에 기존의 float 방식보다 훨씬 수월하고 간단하게 레이아웃을 잡을 수 있다. 요소의 속성을 flex로 변경 display : flex flex-direction : row(기본값) | columns justify-content : 중심축 방향 정렬 flex-start(기본값), flex-end, center, space-around, space-between, space-evenly align-items : 중심축 반대 방향 정렬 stretch(기본값), flex-start, flex-end, center ⭐️ align-items는 flex-item이 한 줄 일 때 우선 적용! 두 줄 이상일 때에는 align-content라는 다른 .. 2024. 4. 8. 이전 1 다음
