네이버 페이지를 클론 코딩 작업을 진행했다.

네이버 페이지를 보면 일정한 간격과 칸으로 나열된 것을 볼 수 있다. 이런 경우 flex 혹은 grid로 작업을 한다. 개발하면서 일정한 간격으로 나열되면 grid 그 외의 경우에는 flex를 많이 사용하는데 이번 작업에서는 grid로 작업을 진행했다.

뉴스 레이아웃은 모두 동일한 크기이다. 하지만 쇼핑 레이아웃은 모두 일정하지 않다.

일정한 크기의 리스트를 가진 초록색과 그 외의 레이아웃인 주황색으로 나눌 수 있다. 이와 같은 방법은 flex를 사용하여 2개로 나눈 후 각 섹션에 flex 혹은 grid로 작업을 할 수 있다. 하지만 이번 작업에서는 flex로 나누지 않고 처음부터 전체 레이아웃을 grid를 사용해서 작업했다.

grid 적용하기

코드는 다음과 같다.

HTML
...
<div id="main-shopping-grid">
	<div class="item">
    	<div class="image"></div>
    	<div class="text">신을수록 편안한 12월 득템 찬스</div>
    </div>
    <div class="item">
    	<div class="image"></div>
        <div class="text">역대급3종SET룩 최대90%까지!?</div>
    </div>
    ...
	<div class="item">6</div>
    <div class="item">7</div>
    <div class="item">
    	<div class="image"></div>
        <div class="text">양면 스타일링! 신상 최대24%</div>  
    </div>
    <div class="item">
        <div class="image"></div>
        <div class="text">원단이 좋은 옷~브랜드 그이상!</div>  
    </div>
    ...            
</div>
...

grid를 적용하는 div 안에 총 13개의 div를 만들었다.

CSS
...
#main-shopping-grid {
  margin-top: 18px;
  display: grid;
  grid-template-rows: 90px 95px 170px;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 250px;
  column-gap: 8px;
}

먼저 grid를 적용한 전체 div는 하늘색과 보라색 선을 기준으로 나누어주었다. grid-template-rows로 각 크기에 맞게 나누어주었다. 그 다음 grid-template-columns로 동일한 상품 리스트는 1fr로 그 외의 부분은 250px로 칸을 나누었다.

grid로 칸을 나누었지만 여전히 사진과 다른 모양을 하고 있다.

여기서 설정해주는 것이 바로 grid-row이다. grid-row로 상품이 있는 곳의 범위를 설정해 주는 것이다. grid-row를 지정할 요소를 선택한 후 1 / span 2를 적용한다. 2칸을 1칸으로 적용할 것이라는 의미이다. 보라색 선 기준으로 위, 아래 크기는 동일하다. 따라서 하늘색 선으로 나누어진 곳을 하나로 묶는다면 보라색 선 기준으로 동일한 크기가 나열되는 것을 알 수 있다. 그래서 적용한 것이 1 / span 2이다.

CSS
...
.item:nth-child(1), .item:nth-child(2), .item:nth-child(3), .item:nth-child(4), 
.item:nth-child(5) {
  grid-row: 1 / span 2;
}
...

결과

---

회고를 하며

HTML, CSS 복습하는 과정으로 네이버 클론 코딩을 진행해보았다. grid 적용부터 grid-template-rows, grid-template-columns, grid-row까지 생소하게 느껴졌다. 작성한 개발 일지와 자료를 찾아보면서 복습하는 시간을 가질 수 있었다. 개발은 꾸준히 학습하는 것이 중요하다. 오늘 공부했다고 끝나는 것이 아니라 추후 다시 정리한 것을 보면서 복습하는 시간을 가져야겠다.