CSS - 문제 미리보기

문제 1282

medium
다음 CSS의 차이점으로 올바른 것은? ```css /* 코드 A */ h2 + p { margin-top: 0; } /* 코드 B */ h2 ~ p { margin-top: 0; } ```
A. A는 모든 p, B는 첫 번째 p만 선택
B. A는 첫 번째 p만, B는 모든 p 선택
C. 둘 다 동일한 효과
D. A는 자식 p, B는 형제 p 선택

정답: B

Adjacent vs General Sibling Combinator의 차이: + (Adjacent Sibling Combinator): • 바로 다음에 오는 형제 요소만 선택 • 첫 번째 인접 요소에만 적용 • "immediately following" 개념 ~ (General Sibling Combinator): • h2 이후의 모든 형제 p 요소 선택 • 순서대로 오는 모든 형제 요소에 적용 • "subsequent siblings" 개념 HTML 예시로 이해하기: ```html

제목

첫 번째 단락

← A(+)와 B(~) 모두 선택
다른 요소

두 번째 단락

← B(~)만 선택

세 번째 단락

← B(~)만 선택 ``` 결과 비교: • h2 + p: 첫 번째 단락만 `margin-top: 0` 적용 • h2 ~ p: 모든 p 단락에 `margin-top: 0` 적용

💡 학습 팁

이 문제를 포함한 CSS 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.