반응형 Gap2 CSS Grid layout 컨테이너 속성 Grid 레이아웃이란? 2차원(가로, 세로)의 레이아웃 시스템이다. 가로,세로에 관계없이 item을 container에 배치하여 레이아웃을 만든다. grid 레이아웃의 장점 행과 열을 모두 정렬하고 이동하는데 많은 도구를 제공하여, 안정된 디자인과 자유로운 요소배치를 가질 수 있다. 이러한 grid 레이아웃의 특징을 이용하여 웹페이지를 구성한다면 고차원적이면서 편리한 화면 설계가 가능하다. grid 레이아웃의 속성 grid는 flex layout과 마찬가지로 컨테이너에 적용하는 속성과 아이템에 적용하는 속성으로 나뉜다. flex layout과 grid layout 차이 flex : 가로 또는 세로를 주축으로 하여 레이아웃 배치(1차원) grid : 가로와 세로에 관계없이 레이아웃 배치(2차원) 1. gr.. 2024. 1. 12. CSS Flex 레이아웃 컨테이너 적용 속성 CSS의 레이아웃을 구성하는 요소에는 여러 가지가 있다. 화면배치를 쉽고 유연하게 사용하기 위해서는 이러한 속성들을 이용한다. 이전에는 float나 inline-block 등을 이용한 방식들이 쓰였지만 현재는 flex와 gird를 보편적으로 많이 쓴다. ❗참고❗ float란? 원래는 웹페이지에서 이미지를 어떻게 배치할 것인가에 대한 속성으로 쓰였지만, 현재는 레이아웃용으로 태그와 클래스 등의 요소들을 웹페이지에서 어떻게 구성할 것인가로 많이 쓰인다. inline-block란? display속성에서 inline속성과 block속성의 특징을 모두 가지고 있는 속성 inline 속성 처럼 흐름을 따라 나열되지만, block속성처럼 width, height를 이용해 크기 설정이 가능하다. 이를 활용하여 레이아웃.. 2024. 1. 7. 이전 1 다음 반응형
