• 카테고리

    질문 & 답변

  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

클래스 선택자 질문입니다

21.05.07 23:17 작성 조회수 146

0

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요!
- 먼저 유사한 질문이 있었는지 검색해보세요.
- 서로 예의를 지키며 존중하는 문화를 만들어가요.
- 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

안녕하세요 클래스 선택할떄 궁금한 점이 생겨 질문드립니다.

우선, 제가 가장 최근에 학습한 곳까지의 파일로 예를 들어보겠습니다.

main-add.js에서,

```

const sceneInfo = [
{
// 0
type: 'sticky',
heightNum: 5, // 브라우저 높이의 5배로 scrollHeight 세팅
scrollHeight: 0,
objs: {
container: document.querySelector('#scroll-section-0'),
messageA: document.querySelector('#scroll-section-0 .main-message.a'),
messageB: document.querySelector('#scroll-section-0 .main-message.b'),
messageC: document.querySelector('#scroll-section-0 .main-message.c'),
messageD: document.querySelector('#scroll-section-0 .main-message.d')
},

```

이렇게 되어있습니다. 위코드에선 main-mesage 와 a 클래스를 가지고 있는 태그를 선택하는 거 같았습니다. 다만, 밑에 코드에서 궁금한 점이 생깁니다. 왜냐하면, " '#scroll-section-2 .a' " 부분에서 " '#scroll-section-2 .desc-message.a' " 를 넣으면 style이 없다고 에러가 뜹니다. 전자의 선택자에서는 에러 없이 애니메이션 효과가 잘 됩니다. 다만, 후자에서는 해당 선택자가 값이 없다는 에러가 뜨니까, 뭐가 맞는지 헷갈립니다 ㅠ

분명 html 태그 에서 클래스를 선언한 구조는 위 코드와 아래 코드 둘 다 동일한데...잘모르겠습니다. 제가 어디를 잘못 생각하고 있는지 알려주시면 감사하겠습니다.

```

{
// 2
type: 'sticky',
heightNum: 5,
scrollHeight: 0,
objs: {
container: document.querySelector('#scroll-section-2'),
messageA: document.querySelector('#scroll-section-2 .a'),
messageB: document.querySelector('#scroll-section-2 .b'),
messageC: document.querySelector('#scroll-section-2 .c'),
pinB: document.querySelector('#scroll-section-2 .b .pin'),
pinC: document.querySelector('#scroll-section-2 .c .pin')
},

```

이 밑에는 html 태그입니다

```

...
...
<section class="scroll-section" id="scroll-section-0">
<h1>Airmug Pro</h1>
<div class="sticky-elem main-message a">
<!-- p 는 문단 -->
<p>온전히 빠져들게 하는<br />최고급 세라믹</p>
</div>
...
...
<section class="scroll-section" id="scroll-section-2">
<div class="sticky-elem main-message a">
<p>
<small>편안한 촉감</small>
입과 하나되다
</p>
</div>
<div class="sticky-elem desc-message b">
<p>
편안한 목넘김을 완성하는 디테일한 여러 구성 요소들, 우리는 이를 하나하나 새롭게 살피고 재구성하는 과정을
거쳐 새로운 수준의 머그, AirMug Pro를 만들었습니다. 입에 뭔가 댔다는 감각은 어느새 사라지고 오롯이 당신과
음료만 남게 되죠.
</p>
<div class="pin">

```

course-thumbnail

애플 웹사이트 인터랙션 클론!

답변 2

·

답변을 작성해보세요.

0

1분코딩님의 프로필

1분코딩

지식공유자

2021.05.12

연봉올리기님이 너무 잘 답변해주셨네요!
devsn님 혹시 해결하셨나요?

0

티라미수님의 프로필

티라미수

2021.05.11

안녕하세요? 지나가다가 보게되었는데요.

.desc-message.a 를 넣으면 에러나는 이유는

<div class="sticky-elem desc-message b">

아래 HTML 코드에 선언된 클래스가 .desc-message.b 라서 그런게 아닐까요?

오타 때문에 생긴 것 같은데 다시 한번 시도해보셔요.

그리고 이해하고 계신 부분은 맞습니다.

쿼리셀렉터에서 저렇게 선언하면 해당 id 값을 가진 요소를 먼저 찾은 후

클래스명이 main-message 와 a 를 동시에 갖고 있는 자식 요소를 선택합니다.

이 글과 비슷한 Q&A