-
카테고리
-
세부 분야
웹 개발
-
해결 여부
미해결
nth-child(n) 정확히 어느때에 쓰이는건가요??
20.11.17 14:08 작성 조회수 133
0
강의마다 자주쓰이는데 왜 쓰이는건지 잘 모르겠네요...
그냥 css에 child말고
.ilbuni1 {
code
}
.ilbuni2 {
code
}
.ilbuni3 {
code
}
이런식으로 쓰면 코드중복이 심해져서
nth-child 를 사용하는건가요?
답변을 작성해보세요.
2
1분코딩
지식공유자2020.11.18
예를들어, 아래와 같은 목록이 있다고 한다면..
<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) 이런 식으로 수식도 들어갈 수 있어서 활용 범위가 무궁무진 하답니다.
답변 1