-
간단하게 카드 리스트 간격 주기 (feat. 오늘의집)CSS 2022. 11. 23. 16:30728x90
프로젝트를 진행할 때 카드 사이에 간격을 주는 것은 대부분의 프로젝트에서 빠지지 않는 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