애드블럭 종료 후 보실 수 있습니다.

ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • 간단하게 카드 리스트 간격 주기 (feat. 오늘의집)
    CSS 2022. 11. 23. 16:30
    728x90

    프로젝트를 진행할 때 카드 사이에 간격을 주는 것은 대부분의 프로젝트에서 빠지지 않는 UI입니다.

    그리고 그런 카드 리스트의 간격이 카드의 위치마다 달라지기 때문에 다양한 CSS를 이용하여 구현합니다.

    // exam 1
    
    & li + li {
      margin-left: 20px;
    }
    
    // exam 2
    
    & li {
      margin-right: 20px;
      
      &:nth-child(3n) {
        margin-right: 0px;
      }
    }
    
    // exam 3
    
    & li:not(:last-child) {
      margin-right: 20px;
    }

    exam 1처럼 앞에 li가 있을 경우에만 margin을 20px 주는 방식도 있고,

    exam 2처럼 특정 배수의 카드마다 margin을 재할당 해 주는 방식,

    exam 3처럼 줄 단위로 설정한 뒤 마지막 카드를 제외하고 margin을 할당해 주는 방식 등이 있습니다.

     

    가장 간편하면서도 직관적으로 간격을 주는 방법을 소개하겠습니다.

    // card section
    
    const CardWrapper = styled.ul`
      ...
      margin: 0 -10px;
    `;
    
    // card
    
    const Card = styled.li`
      ...
      margin: 0 10px;
    `;

    카드 전체를 감싸는 section을 만들고 그곳에 여백이 들어간 값을 음수로 설정합니다.

     

    그리고 실제 card에는 내가 설정할 여백을 설정해 줍니다.(ex. 카드 사이 간격 20px이라면 10px씩)

    그럼 간단하게 카드의 여백을 설정할 수 있습니다.

     

    'CSS' 카테고리의 다른 글

    px vs rem  (0) 2024.03.01
    버튼의 크기는 고정한 채 선택 영역만 늘리기  (0) 2022.10.26
    효과적인 CSS애니메이션 활용  (0) 2021.10.07

    댓글

Designed by Tistory.