2nd Project 기억하고 싶은 코드 (1) : 요소 벽돌 쌓기 🚛

LEE JIYUN·2020년 8월 8일
1

2ndProject

목록 보기
1/3

화요일 다섯 시간을 허비 공부했던 이미지 요소 벽돌쌓기!

1. Display: grid

요소의 크기가 일치한다면 Grid를 이용 시 아주아주 쉽고 차곡차곡 예쁘게 쌓을 수 있다!
일정한 높이의 요소들에 Grid를 적용하고 싶다면 여기를 참고하면 좋을 것 같다. 아주 친절하게 설명되어 있다.
하지만 요소의 크기가 다른 경우😢 grid를 사용하면 같은 열에 놓인 셀의 높이가 동일해지기 때문에 높이가 낮은 요소 아래에는 여백이 생긴다. ( 아래 예시는 B 요소의 높이만 다르지만 모든 요소의 높이가 달라지면 더 지저분해진다. )

이걸 해결하려고 노력해보았으나 cell의 높이를 DB로부터 읽어올 수백 개의 서로 다른 이미지 높이에 맞게 설정하는 게 쉬운 일이 아니었고 여기에 시간을 더 투자할 수는 없어서 대안을 찾다가 적절한 Library를 발견했다.

2. Masonry Library

Masonry Library는 설치까지 끝내고 살펴보고 있었는데 사실 1차에 시간에 쫓겨 Accordion Library를 사용하면서 직접 코딩하지 못한 아쉬움이 있었던 터라 Library를 사용하는 것은 뭔가 탐탁치 않았다. 그리고 뭔가 다른 방법이 있을 것 같았기 때문에 Document 읽는 것을 그만두고 승현님께 도움을 청했다!!! ( 멘토찬스 )

3. HTML과 CSS만으로 해결!? : MultiColumn Layout

multi-column은 사실 내 필요를 완전히 충족시키는 해결방법은 아니었지만, 어쨌든 원하는 틀을 잡을 수 있었다.
대략적인 구조는 다음과 같다. 설명도 필요없어 보인다. 생각보다 너무 간단해서 조금 허무했다........... 😇 ...

<Columns>
  <CardFrame>
    각 figure가 담고 있을 내용 (image, description 등)
  </CardFrame>
  <CardFrame>
    각 figure가 담고 있을 내용 (image, description 등)
  </CardFrame>
  <CardFrame>
    각 figure가 담고 있을 내용 (image, description 등)
  </CardFrame>
  .
  .
  .
<Columns>
      
const Columns = styled.div`
  width: 1320px;		// 모든 column을 담는 너비
  column-width: 416px;
  column-gap: 5px;		
`
const CardFrame = styled.figure`
  display: inline-block;
  width: 100%;
`

Figure : image + image와 관련된 정보 grouping하는 SemanticTag

figure의 부모 (Columns)

column-count : 3; ( column 수 ) /*or*/ column-width : 416px; ( column 너비 )
column-gap : 5px; ( column 간 간격 )

figure (CardFrame) : block

display : inline-block; 
( image와 description이 분리되지 않도록 block 태그인 figure에 inline 속성 부여 )
margin : 0; ( 기본적으로 margin 값을 가지고 있으므로 )
margin-bottom : 15px;

figure img : inline

width : 100%

하지만 이 방법에는 큰 문제가 있었는데, 요소의 나열 순서가 내가 의도한 바와 다르다는 것.

1.이런순서가아니라2.이런순서로나열됨
1 →2 →3 ↩︎1 ↓4 ↓7 ↓
4 →5 →6 ↩︎2 ↓5 ↓8 ↓
7 →8 →9 ↩︎3 ↗️6 ↗️9 ↗️

이 프로젝트에서는 순서가 크게 중요하지 않아 이대로 진행하지만 그게 아니었다면 Masonry Library로 되돌아 갔을 것 같다. 그래서 프로젝트를 끝내고 Refactoring을 할 때는 Library를 이용하거나 Grid를 조금 더 연구해서 같은 결과를 Rendering할 수 있도록 다양한 시도를해보고 싶다!

0개의 댓글