목적

CSS의 Grid 레이아웃을 연습 및 숙달하기 위함.

동기

이전에 flex 레이아웃 숙달을 위해 부트스트랩 클론 코딩을 했었다.

이번에는 flex와 더불어 인기있는 grid 레이아웃을 숙달하기 위함이다.

뿐만 아니라, 이전에 겪었던 specificity 계산과 클래스 명칭 등 힘든 부분을 개선하기 위해 CSS에 BEM을 적용했다.

specificity를 계산하지 않아도 되는 편리함과 클래스 명칭을 규정대로만 정하면 되기에 매우 효율이 좋았다.

어려운 점

MDN 공식문서에 그리드 부분이 좀 짧게 설명 되어있다.

또한 시각화가 되어있지 않아서 이해하는 데 어려움이 있었다.

하지만 친절하게도(?) 더 좋은 기사를 소개해주고 있었기 때문에 그 기사를 통해 헷갈렷던 부분들이 정리가 되었다.

해당기사의 링크➡️

결과물

• 깃헙 저장소 : 깃헙➡️

• 라이브 데모 사이트 : 깃헙 배포➡️

• 원본 사이트 : 부트스트랩 Album➡️