반응형

css도 자꾸 자꾸 까먹어서 좀 기록 할만한 것들은 기록해보려고 한다

 

오늘은 지그재그로 요소를 배치하는 방법에 대해 알아보겠다

요런식으로 만들고싶다고 해보자

 

가장 먼저 드는 생각은 1,3번 그리고 2,4번에 따로 스타일을 주는게 좋지 않을가 싶다

 

뭐 그렇게 해도 되지만

 

nth-of-type이란걸 이용하면 더 간단하게 스타일을 작성할수 있다!!

그럼 어떻게 쓰는건지 한번 봐보자

 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="wrap">
        <div>왼쪽</div>
        <div>오른쪽</div>
        <div>왼쪽</div>
        <div>오른쪽</div>
    </div>
</body>
<style>
.wrap {
    width: 200px;
    height: 400px;
    margin-top: 100px;
    margin-left: 600px;
    background-color: rgb(243, 242, 242);
}
.wrap div {
    width: 90px;
    height: 90px;
    border: 2px solid red;
    margin-bottom: 5px;
    color: aliceblue;
    background-color: blue;
}
</style>
</html>

먼저 이렇게 코드를 작성해 줬고

지금 화면은 이렇게 생겼다

 

그럼 2,4번만 오른쪽으로 보낼수 있도록 스타일 부분을 작성해 보겠다

 

.wrap div:nth-of-type(2n) {
    transform: translateX(100px);
}

이걸 스타일 부분에 추가해주면

 

이러한 모습이 된다

지금 2n이 들어가 있는 부분에는

even,odd같은 특정 키워드를 넣을수도 있고

정수를 넣을수도 있고 an+b 같은 식을 넣을수도 있다

 

한번에 내가 원하는 규칙에 있는 요소들을 다룰수 있어서 

 

여러곳에서 다양하게 활용이 가능할 것 같다

 

부디 도움이 되셨기를~

반응형
저작자표시 비영리

'개발💻 > CSS' 카테고리의 다른 글

[CSS] ::before 와 ::after 알아보기(:first-child,:last-child)  (5) 2023.11.17

티스토리툴바