
[CSS] 지그재그로 배치하기 (nth-of-type)
·
개발💻/CSS
css도 자꾸 자꾸 까먹어서 좀 기록 할만한 것들은 기록해보려고 한다 오늘은 지그재그로 요소를 배치하는 방법에 대해 알아보겠다 요런식으로 만들고싶다고 해보자 가장 먼저 드는 생각은 1,3번 그리고 2,4번에 따로 스타일을 주는게 좋지 않을가 싶다 뭐 그렇게 해도 되지만 nth-of-type이란걸 이용하면 더 간단하게 스타일을 작성할수 있다!! 그럼 어떻게 쓰는건지 한번 봐보자 왼쪽 오른쪽 왼쪽 오른쪽 먼저 이렇게 코드를 작성해 줬고 지금 화면은 이렇게 생겼다 그럼 2,4번만 오른쪽으로 보낼수 있도록 스타일 부분을 작성해 보겠다 .wrap div:nth-of-type(2n) { transform: translateX(100px); } 이걸 스타일 부분에 추가해주면 이러한 모습이 된다 지금 2n이 들어가 있..