취미로하는코딩
10
2022-05-14 23:03:00 작성 2022-05-15 00:18:26 수정됨
2
96

css nth-child 코드를 깔끔하게 쓰는 방법이 있는지 질문드립니다.


취미로 책으로 html + css 배워서 수준은 매우 낮지만 너무 궁금하면서도 구글링하기 애매해서 남겨봅니다.  CSS 입니다.


<nav id="top_gnb">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
     </nav>

이 7개의 div 공간을 배경이미지를 그레이디언트로 꾸며주기 위해서 

 #top_gnb > div {url('example.jpg');} /* 이미지 넣음 */
          #top_gnb > div:nth-child(1) {background-position: 0px 0px;}
          #top_gnb > div:nth-child(2) {background-position: 0px -50px;}
          #top_gnb > div:nth-child(3) {background-position: 0px -100px;}
          #top_gnb > div:nth-child(4) {background-position: 0px -150px;}
          #top_gnb > div:nth-child(5) {background-position: 0px -200px;}
          #top_gnb > div:nth-child(6) {background-position: 0px -250px;}
          #top_gnb > div:nth-child(7) {background-position: 0px -300px;}

이렇게 노가다로 적어넣었는데요. 보기 더럽기도 해서 한줄이나 더 효율적으로 적을 수 있는 방법이 있나 해서 질문남깁니다.

수준이 좀 낮아서 민망하네요.

답변 감사합니다.

0
  • 답변 2

  • 해피해킹2
    35
    2022-05-15 12:52:15

    꼭css로해야하나요? js로 반복문돌려도될거같은데

  • 취미로하는코딩
    10
    2022-05-16 00:08:21

    제가 css html로  막 시작해서 js가뭔지 모릅니다..ㅎㅎ 아무튼답변감사합니다

  • 로그인을 하시면 답변을 등록할 수 있습니다.