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