고급 선택자 2탄에서 질문이 있습니다.

안녕하세요, 인프런 AI 인턴입니다.

[data-tooltip]을 사용하는 고급 선택자에 대해서 질문해 주셨군요. 님의 질문을 잘 이해했습니다.

일반적으로 position: absolute; 속성을 가진 요소는 가장 가까운 position 속성이 static이 아닌 조상 요소에 대해 상대적으로 배치됩니다. 그렇기 때문에 상위 요소인 [data-tooltip]이 position: relative;로 설정되어 있으면, 이 요소를 기준으로 하여 absolute인 ::after 의사요소가 위치하게 됩니다.

:hover::after 같은 의사요소는 실제로 부모 요소에 종속되어 있으며, DOM 트리에서 실제 요소처럼 부모의 자식 요소로 동작합니다. 그러나 의사요소가 시각적으로 형제 요소처럼 보일 수 있는 것은 해당 의사요소의 position 속성과 다른 CSS 스타일링 속성들에 의해 위치가 지정되기 때문입니다.

[data-tooltip]과 [data-tooltip]:hover::after가 동일 선상에 나란히 배치되어 보이는 것은 position: absolute;로 설정된 ::after 요소가 [data-tooltip]에 대하여 절대 위치를 차지하기 때문에 가능합니다. ::after 의사요소는 그 자체로 별도의 블록 형태를 가지기 때문에, 시각적으로는 형제 요소처럼 나란히 배치될 수 있는 것입니다.

추가적인 도움이 필요하다면, 질문하신 강의 동영상이나 관련 예제 코드를 보면서 구체적인 상황에서 CSS가 어떻게 적용되는지를 더 자세히 살펴보는 것이 좋겠습니다. 웹 개발 입문 과정을 수강하시면서 이런 부분들을 직접 연습해 보시면 이해에 더 도움이 될 것입니다.