Guidelines
Practice
Guidelines

결합자(Combinator)

결합자는 CSS 선택자를 결합하여 보다 복잡한 선택자를 생성하는 방법입니다.

이전에 배운 결합자를 복습해 보겠습니다.


  1. 타입 결합자: 여러 타입의 요소를 선택합니다.

    • 예: p, h1
    CSS
    p,
h1 {
  font-weight: bold;
}

  2. 클래스 결합자: 여러 클래스를 가진 요소를 선택합니다.

    • 예: .my-class, .your-class
    CSS
    .my-class,
.your-class {
  color: blue;
}

  3. 인접 형제 결합자: 한 요소 바로 다음의 형제 요소를 선택합니다.

    • 예: p + h1
    CSS
    p + h1 {
  margin-top: 10px;
}

  4. 일반 형제 결합자: 한 요소 뒤의 모든 형제 요소를 선택합니다.

    • 예: p ~ h1
    CSS
    p ~ h1 {
  text-decoration: underline;
}

결합자 코드 예시

HTML
<body>
  <p>첫 번째 문단</p>
  <h1>제목 1</h1>
  <h1 class="my-class">제목 2</h1>
  <p class="your-class">두 번째 문단</p>
  <div id="my-id">내 ID</div>
  <div id="your-id">너의 ID</div>
</body>
CSS
.my-class {
  color: red;
}

#my-id {
  font-size: 24px;
}

p + h1 {
  background-color: lightblue;
}

h1.your-class {
  font-weight: bold;
}

#your-id {
  text-decoration: underline;
}

이 예시에서 CSS는 다음과 같이 적용됩니다.

  • 모든 <p> 및 <h1> 요소는 굵게 표시됩니다.

  • my-class와 your-class 클래스를 가진 요소는 파란색으로 표시됩니다.

  • my-id 및 your-id ID를 가진 요소의 글꼴 크기는 18px입니다.

  • <p> 바로 다음에 오는 <h1>은 위쪽 여백이 10px입니다.

  • <p> 뒤에 있는 모든 <h1>은 밑줄이 있습니다.


코드의 별표로 강조된 부분을 따라 입력해 보세요.

Guidelines

AI Tutor

Publish

Design

Upload

Notes

Favorites

Help