웹표준 html,css,javascript 실무 과정 자료] 선택자

웹표준 html,css,javascript 실무 과정 자료] 선택자

웹표준 html,css,javascript 실무 과정 자료] 선택자

실무개발자를위한 실무교육 전문교육센터학원

www.oraclejava.co.kr에 오시면 보다 다양한 강좌를 보실 수 있습니다.

선택자

■ 선택자의 그룹화

  - 여러 개의 선택자에 동일한 프로퍼티를 지정할 경우 선택자를 ,(콤마)로 구분하여 나열

  - h1, h2, h3 {

    color: blue;

    font-style: italic;

  }

■ 선택자 조합

- 결합자(combinator)로 구분

  * 스페이스, >, +, ~

  * 선택자와 결합자 사이에 공백문자 가능

■선택자 선택자

- 부모 요소에 포함되는 자식 요소에 스타일 적용

 * h1 em {

   color: red;

   }

   ☞ h1 요소에 포함되는 em 요소에 스타일 적용

■ 선택자 > 선택자

  - 부모 요소 직후의 자식 요소에 스타일 적용

  - body > p {

font-size: medium;

}

   ☞ body 요소 자식요소인 p 요소에 스타일 적용

       *다음 자손에 적용이 안된다는 점 유의!

■ 선택자 + 선택자

  - 동일한 부모 요소를 갖는 형제 관계에 있는 요소 중에서 어떤 요소 바로 다음에 나타나는 요소에 스타일 적용

 - h1 + h2 {

  font-style: italic;

   }

       ☞ h1 요소 바로 다음에 나타나는 h2 요소에 스타일 적용

        *h1 요소와 h2 요소 사아에 다른 요소가 있을 경우 적용되지 않는다는 점 유의!

■ 선택자 ~ 선택자

  - 동일한 부모 요소를 갖는 형제 관계에 있는 요소 중에서 어떤 요소 다음에 나타나는 요소에 스타일 적용

  - h1 ~ pre {

    color: blue;

   }

    ☞ h1 요소 다음에 나타나는 pre 요소에 스타일 적용

      *h1 요소 바로 다음에 나타나는지는 관계 없음