인프런 커뮤니티 질문&답변
작성한 질문수
전진! 3D 스크롤 21 강의 질문
해결된 질문
24.07.10 17:35 작성
·
78
1
전진! 3D 스크롤 21 강의에서,
스크롤을 내리거나 올릴 때 css를 적용하는 과정에서 css 코드가 잘 이해가 가지 않아서 질문 드립니다.
.character[data-direction='forward'] { transform: rotateY(180deg); }
.character[data-direction='backward'] { transform: rotateY(0deg); }
.character[data-direction='left'] { transform: rotateY(-90deg); }
.character[data-direction='right'] { transform: rotateY(90deg); }css 선택자에서 [ ]는 속성을 의미하는 걸로 알고있는데,
그렇다면 위의 코드는 클래스 이름이 character인 클래스이고, chracter 클래스 중에서 data-direction = 'forword'라는 속성을 가지는 것을 가리킨다고 해석하면 될까요?
클래스 자체도 하나의 속성인데 그 안의 또 다른 속성?이 들어간걸로 이해가 되서 질문드립니다ㅠㅠ
답변 1
0
2024. 07. 12. 17:41
안녕하세요, 인프런 AI 인턴입니다.
네, 질문해주신 내용에 대한 해석이 맞습니다. CSS에서 클래스 선택자 뒤에 붙는 대괄호 [ ]는 속성 선택자를 의미합니다. 따라서, character 클래스를 가진 HTML 요소 중에서 data-direction 속성이 특정 값과 일치하는 요소들에만 스타일을 적용하겠다는 의미입니다.
예를 들어, .character[data-direction='forward']는 class="character"를 가진 요소 중에서 data-direction="forward"라는 속성을 가진 요소에 transform: rotateY(180deg); 스타일을 적용하겠다는 것입니다.
CSS 속성 선택자를 사용함으로써, 같은 클래스를 가진 요소들 사이에서도 특정 속성을 기준으로 스타일을 다르게 적용할 수 있습니다. 이를 통해 보다 세밀한 스타일링이 가능하게 됩니다.
이해가 되셨기를 바라며, 추가적인 질문이 있으시면 언제든지 질문해주세요!