꾸매코딩

Grid란? Flex가 한 방향 레이아웃 시스템(1차원)이라면 Grid는 두 방향(가로-세로) 레이아웃 시스템(2차원)이다. Flex도 충분히 좋은 기술이지만, 좀 더 복잡한 레이아웃을 위해 CSS Grid를 사용할 수 있다. Grid의 구조 부모 요소와 자식 요소로 구분된다. 부모 요소를 Grid Container(그리드 컨테이너), 자식 요소를 Grid Item(그리드 아이템)라고 부른다. "부모(컨테이너)는 Grid의 영향을 받는 전체 공간을 의미하고, 설정된 속성에 따라 각각의 자식(아이템)들이 배치된다." 1 2 3 4 5 6 7 8 9 Grid의 속성 - 부모(컨테이너)에 적용하는 속성 - 자식(아이템)에 적용하는 속성 Grid 부모(컨테이너)에 적용하는 속성 grid 컨테이너 설정 displ..

Flex란? Flex(플렉스)는 Flexible box, Flexbox라고 불린다. Flex는 레이아웃 배치 전용 기능으로 고안되었다. Flex가 나오기 전 사용하던 float, inline-block 등을 이용한 기존 방식보다 훨씬 강력하고 편리한 기능이 많다. Flex의 구조 부모 요소와 자식 요소로 구분된다. 부모 요소를 Flex Container(플렉스 컨테이너), 자식 요소를 Flex Item(플렉스 아이템)라고 부른다. "부모(컨테이너)는 Flex의 영향을 받는 전체 공간을 의미하고, 설정된 속성에 따라 각각의 자식(아이템)들이 배치된다." 1 2 3 4 5 Flex의 속성 - 부모(컨테이너)에 적용하는 속성 - 자식(아이템)에 적용하는 속성 Flex 부모(컨테이너)에 적용하는 속성 flex ..