• 카테고리

    질문 & 답변

  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

css 질문

22.12.25 19:41 작성 조회수 163

0

 

<section class="album">
      <div class="disk">
        <div class="disk_inner"></div>
      </div>
      <a href="https://www.youtube.com/watch?v=nM0xDI5R50E" target="blank" class="coverImg">
        <img src="./image/iu_0.jpg" alt="">
      </a>
    </section>

강사님 ! html 코드를 css에서

.contentWrap .album .coverImg img 이렇게

.contentWrap의 자손 .album의 자손 .coverImg의 자손 img 으로 불러오는 것과

.coverImg img로 불러오는것과 값이 같은데 저렇게 불러오는 이유가 따로 있나용?

course-thumbnail

인터랙티브 개발 실무 끝장내기 [역량 강화편]

크롬 개발자 도구 활용한 개발 방법

강의실 바로가기

답변 1

답변을 작성해보세요.

0

코딩일레븐님의 프로필

코딩일레븐

지식공유자

2022.12.25

안녕하세요

원하는 object 를 더 정확하게 select 하기 위해서 입니다.

위 구조처럼 이미지가 하나라면 .coverImg img 이런식으로 해도 무방합니다.

하지만 아래와 같은 구조라면 문제가 발생할 수도 있습니다.

<section class="album">
      <div class="disk">
        <div class="disk_inner"></div>
        <img src="./image/disk.jpg" alt="disk image">
      </div>
      <a href="https://www.youtube.com/watch?v=nM0xDI5R50E" target="blank" class="coverImg">
        <img src="./image/iu_2.jpg" alt="아이유">
      </a>
      <img src="./image/button.jpg" alt="버튼">
    </section>

예를들어 .contentWrap img 라고 하면 원했던 a 태그 아래에 있는 iu_2.jpg 오브젝트가 아니겠죠?

물론 조금 줄여서 .contentWrap .coverImg img 이런식으로 줄여도 됩니다.

상황에 따라 달라지니 참고해서 사용하시면 됩니다.

이 글과 비슷한 Q&A