[공유] CSS Grid, 당신을 구원하리...

출처 카페 > Design Geeks-웹디..|webpyobum 현대카드 (https://www.hyundaicard.com/index.jsp#none) 중앙에 있는 메트로디자인으로 되어있는 이 컨텐츠를 코딩으로 어떻게 짤까요...

코드를 뜯어보면, div로 크게 두덩어리를 만들고, 그 안에 각각 ul>li로 만듭니다. 어떤건 그 li안에 다시 div를 넣고...

문서로서 맥락이 혼란스러워졌어요. 아 물론, 눈으로 잘보이고 안깨지는게 최우선인것은 맞습니다.

시멘틱한 마크업보다 중요한것은 우리의 퇴근과 건강입니다. 아무렴요.

저 코드를 보면...어떻게든지 table코딩을 할수 없다는 신념이 느껴지면서도 애처로움이 느껴지는 코드랄까요... 뭐 저라고해서 크게 더 좋은 코드로 짯을것 같진 않아요...

적어도 grid를 알기전이라면 말입니다... grid를 쓰면 마크업이 매우 심플해집니다. ul>li 로 끝납니다! 정말입니다!

예제입니다. https://jsbin.com/fipaquribi...