[TIL] 01.28 제품 리스트 레이아웃 정렬

이번 주 동안은 제품 리스트의 레이아웃을 잡는 작업을 계속 진행을 했다. 

첫번째 그림과 같은 카드형과 두번째 그림과 같은 리스트형 총 두가지 형태로 만들어야 했고 카드형일 경우 640px 이상일 경우 3줄 이하일 경우엔 2줄로 나올 수 있도록 레이아웃을 조절해야 했다. 

 

둘다 flex를 사용하여 정렬을 맞춰 주었다. 

 

카드형은 이미지가 들어갈 공간을 이미지를 감싸고 있는 tag에 padding 값을 주어서 공간을 만들고 이미지는 살짝 작게 들어가야했기 때문에 %로 이미지 크기를 맞추어 주었다. 

 

리스트형은 이미지가 고정폭으로 들어 갔기 때문에 좀더 쉽에 작업을 할 수 있었다. 카드형의 방법을 그대로 가로로 돌려서 사용해 주었다.