인프런 커뮤니티 질문&답변
작성한 질문수 25
nth-chlid로 태그를 지정할 때와 클래스명으로 지정할 때의 차이
작성
·
168
1
# HTML 문서
<body>
<div class="box">
<span class="box1"></span>
<span class="box2"></span>
</div>
</body>
# CSS 문서
.box2 {
animation-delay: 0.5s;
}
영상에서 제시해주신 것처럼 span에 클래스명을 붙이지 않고 한 것이 아니라 각각의 span 태그에 클래스명을 붙이고
해봤습니다. 그런데 .box span:nth-child(2){ animation-delay: 0.5s;} 라고 하면 영상과 똑같은 결과가 나오는데
.box2 {animation-delay: 0.5s;}를 사용하면 박스가 계속해서 하나만 움직입니다. .box span:nth-child(2)나 .box2나
결국 똑같은 것을 지칭하는 것 아닌가요? 왜 하나는 정상적으로 박스 2개가 움직이고 하나는 박스 1개만 움직일까요 ㅠㅠ
답변 1
2
코딩웍스(Coding Works)
지식공유자
<div class="box">
<span class="box1"></span>
<span class="box2"></span>
</div>
질문글에 적어주신 것 처럼 .box span:nth-child(2)나 .box2나 결국 똑같은 것을 지칭하는 것이 맞습니다. 뭔가 잘 안되신다면 다른 문제인 듯 합니다.
현재 html에서 span .box1, .box2라고 클래스 네임을 주는건 좋은 html 코딩은 아닙니다. 좋은 CSS는 클래스네임 사용을 최소화하면서 html 엘리먼트를 선택하는 것이기 때문에 아래처럼 html 깨끗하게 만들고 CSS 선택하는 것이 좋습니다.
<div class="box">
<span></span>
<span></span>
</div>
.box span:nth-child(1) {...}
.box span:nth-child(2) {...}
.box1 {...}
.box2 {...}
위의 2가지 선택자 방식은 동일하게 작동합니다. 다만 위에 있는건 html에 클래스 네임을 따로 주시 않은 방식이라 좀 더 간결한 코딩이 됩니다.
혹시 안되시면 html, css 코드를 모두 올려주세요.
친절한 답변 정말 감사합니다! :)