3.CSS selector(기본,복합)

css selector

• html요소들중에서 스타일을 적용할 요소를 선택하는데 사용되는 문법입니다.

---

1. 기본 선택자(tag, id, class)

• 하나의 선택자만 사용할 때

  <span id = "spanId" class = "span_class"> what color apply?</span>

• 예시를 들기위해 위와 같은 html요소를 선언했습니다.

1.1 tag selector

• html태그{ 적용할 스타일 } 구조를 가집니다.
• 문서내의 지정된 모든 태그를 선택합니다.

span{
  color : red;
}

1.2 id selector

• #설정한 id이름{ 적용할 스타일 } 구조를 가집니다.
• 동일한 id이름을 가진 모든 요소를 선택합니다.

#spanId{
  color : green;
}

1.3 class selector

• .설정한 class이름{ 적용할 스타일 } 구조를 가집니다.
• 동일한 class 이름을 가진 모든 요소를 선택합니다.

.span_class{
  color : blue;
}

1.4 이외 기본 selector들

• https://www.w3schools.com/cssref/css_selectors.asp

---

2. 복합 선택자

• 두개 이상의 선택자를 사용할 때

<section>
  <p>section 태그 속 p 태그입니다.</p>
  <span id = "spanId" class = "span_class">
    <p>span 태그 속 p 태그입니다.</p>
  </span>
  <div id = "divId" class = "div_class">
    <p>div 태그 속 p 태그입니다.</p>
  </div>
</section>

2.1 그룹 선택자(,)

#spanId , .divId{
 color : red;
}

• 콤마(,)를 기준으로 모든 선택자에 스타일을 적용합니다.
• 위의 경우 span 내부 p 태그, div 내부 p 태그에 빨간색이 적용됩니다.

2.2 자식 선택자(>)

section > p{
  color : green;
}

• >를 기준으로 표현하며, 부모 요소에 포함된 요소들 중 바로 아래 자식 요소에게만 스타일을 적용합니다.
• 위의 경우 "section 태그 속 p 태그입니다"에 초록색이 적용됩니다.

2.3 자손 선택자(공백)

section p{
  color : blue;
}

• 공백을 기준으로 표현하며, 부모 요소에 포함된 모든 하위 요소에 스타일을 적용합니다.
• 위의 경우 section 내부 p 태그, span 내부 p 태그, div 내부 p 태그에 파란색이 적용됩니다.

2.4 이외 복합 selector들

• https://gist.github.com/magicznyleszek/809a69dd05e1d5f12d01