인접 형제 셀렉터

Coddy HTML 여정의 CSS Mastery 섹션에 포함된 레슨 — 43개 중 4번째.

인접 형제 선택자(+)는 특정 요소 바로 뒤에 오는 요소의 스타일을 지정하는 데 사용됩니다. 두 요소는 반드시 동일한 부모를 가져야 하며, "인접"은 "서로 바로 옆에 있음"을 의미합니다.

예를 들어:

<h2>Heading</h2>
<p>This paragraph is styled</p>

다음 CSS를 사용하면:

h2 + p {
  font-weight: bold;
}

이 단락은 h2 요소 바로 뒤에 오기 때문에 스타일이 적용되었습니다.

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.

챌린지

쉬움

농구 경기를 설명하는 <h2> 요소 바로 뒤에 오는 단락(<p>)만을 대상으로 하는 CSS 선택자를 만드세요. 이 단락들의 스타일을 blue font color와 18px font size로 설정하세요.

치트 시트

인접 형제 선택자(+)는 특정 요소 바로 뒤에 오는 요소를 스타일링합니다. 두 요소는 반드시 동일한 부모를 가져야 합니다.

구문:

element1 + element2 {
  /* 스타일 */
}

예제:

h2 + p {
  font-weight: bold;
}

이것은 h2 요소 바로 뒤에 오는 단락을 대상으로 합니다.

직접 해보기

<html>
<head>
    <title>Adjacent Sibling Selector</title>
    <style>
        /* CSS solution goes here */
        
    </style>
</head>
<body>
    <h2>Basketball Game Overview</h2>
    <p>The basketball game was an exciting match between the **Los Angeles Lakers** and the **Golden State Warriors**, featuring intense offense and solid defense from both teams.</p>
    
    <p>During the first half, the Lakers held a slight lead, with LeBron James making key plays, while Stephen Curry of the Warriors kept the game tight with impressive three-pointers.</p>
    
    <p>This paragraph is not directly after an h2, so it should not be affected.</p>
    
    <p>In the second half, the Warriors fought back, with Klay Thompson hitting critical shots, but the Lakers secured their win with solid defense and a game-winning dunk by Anthony Davis.</p>
</body>
</html>

실력 점검

이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.