Front End Develop Front End Develop

1 2 ... BEM(css 방법론 중 하나, Block-Element__Method)을 이용해서 작성했습니다. .hex-grid__list { display: grid; list-style-type: none; margin: 0; padding: 0; } 위와 같이 만들어져야 하는 것입니다. .hex-grid__list { display: grid; list-style-type: none; margin: 0; padding: 0; grid-template-columns: 1fr 2fr 1fr 2fr 1fr 2fr 1fr 2fr 1fr 2fr 1fr; } 반복을 피하기 위해서 다시 한번 리팩토링 합니다. .hex-grid__list { --amount: 5; display: grid; list-style..

modern css 2탄! flex 와 grid와 각각 동일한 높이 만들기를 해보도록 하겠습니다. FLEX .flexbox { display: flex; // 높이를 가득 채우기 .element { height: 100%; } } GRID .grid { display: grid; // 기본축을 세로로 변경 grid-auto-flow: column; // 높이를 가득 채우기 .element { height: 100%; } } flexbox와 유사하게 직계 자식은 높이가 같지만 자식은 flexbox 솔루션에서와 같이 높이 정의를 추가해야합니다. 어떤 방법이 더 나을까요? 순전히 동일한 높이 요소를 해결하기 위해 flexbox의 장점은 기본 축이 즉시 나란히 열을 활성화하는 반면 그리드는 명시적으로 설정해야한..