• 카테고리

    질문 & 답변
  • 세부 분야

    웹 개발

  • 해결 여부

    미해결

nth-child(n) 정확히 어느때에 쓰이는건가요??

20.11.17 14:08 작성 조회수 133

0

강의마다 자주쓰이는데 왜 쓰이는건지 잘 모르겠네요...

그냥 css에 child말고

.ilbuni1 {

    code

}

.ilbuni2 {

    code

}

.ilbuni3 {

    code

}

이런식으로 쓰면 코드중복이 심해져서 

nth-child 를 사용하는건가요?

답변 1

답변을 작성해보세요.

2

예를들어, 아래와 같은 목록이 있다고 한다면..

<ul>
    <li>아이템</li>
    <li>아이템</li>
    <li>아이템</li>
    <li>아이템</li>
    <li>아이템</li>
    <li>아이템</li>
    <li>아이템</li>
    <li>아이템</li>
    <li>아이템</li>
</ul>

두번째 li에만 특정 디자인을 적용한다든지,
짝수번째 li에 모두 특정 디자인을 적용한다든지 할 때 nth-child를 유용하게 사용할 수 있습니다.
짝수번째 li에 모두 노랑 배경색을 칠한다고 한다면,
li:nth-child(even) { background: yellow; }
(홀수라면) li:nth-child(odd) { background: yellow; }
이렇게만 하면 끝나는데,

특정 클래스를 사용한다면
<ul>
    <li>아이템</li>
    <li class="special">아이템</li>
    <li>아이템</li>
    <li class="special">아이템</li>
    <li>아이템</li>
   ....
</ul>
이런 식으로 모두 추가해주어야 하니까요~
꼭 nth-child를 써야한다는건 아니지만, 상황에 따라 더 편한 경우가 있어서 그럴 때에 쓴다고 생각하시면 됩니다.
nth-child의 괄호 안에는, 숫자 뿐만 아니라
nth-child(3n+1) 이런 식으로 수식도 들어갈 수 있어서 활용 범위가 무궁무진 하답니다.