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