인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

인프런 커뮤니티 질문&답변

긴장한 곰님의 프로필 이미지
긴장한 곰

작성한 질문수

HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌1)

CSS 키프레임 애니메이션 활용한 실전 예제 제작 02(사각형 좌표 변경 로딩 애니메이션)

nth-chlid로 태그를 지정할 때와 클래스명으로 지정할 때의 차이

작성

·

165

1

# HTML 문서
<body>
    
    <div class="box">
        <span class="box1"></span>
        <span class="box2"></span>
    </div>

</body>
# CSS 문서
.box2 {
    animation-delay0.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

<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 코드를 모두 올려주세요.

긴장한 곰님의 프로필 이미지
긴장한 곰
질문자

친절한 답변 정말 감사합니다! :)

긴장한 곰님의 프로필 이미지
긴장한 곰

작성한 질문수

질문하기