CSS 선택자 - 주요 선택자

 

 

CSS 선택자 (CSS selector)란?

   - 하나의 CSS 규칙을 만들때 어떤 html요소를 선택할 지 정의하는 것입니다.

   - https://developer.mozilla.org/ko/docs/Learn/CSS/Building_blocks/Selectors 

CSS 선택자 - Web 개발 학습하기 | MDN

   - CSS 스타일링뿐만이 아닌, javascript를 활용하기 위해서도 선택자를 알고있어야 합니다.

 

 

자주 사용되는 선택자

   - Type Selector

/* Type Selector */

h1{
   color: blue;
}

      > 태그 셀렉터라고도 한다.

      > 태그를 선택자로 사용하는것

      > 모든 태그에 영향을 주므로 일관적인 스타일 적용에 사용한다.

 

   - Class Selector & id Selector

<style>
	/* Class Selector */
    .h1Class{
       color: green;
    }
    
    .red{
       color: red;
    }
    
    /* ID Selector */
    #welcome-title{
    	color: blue;
    }
    
</style>

<h1 class="h1Class"> 클래스 선택자가 적용된 태그입니다. </h1> <!-- color: green 이 적용 -->
<h1 id="welcome-title">아이디 선택자가 적용된 태그입니다. </h1> <!-- ID Selector 인 color: blue 가 적용 -->
<h1> 클래스 선택자가 적용되지 않은 태그입니다. </h1>


<!-- 클래스는 태그에 영향받지 않고 작성할 수 있다. -->
<h1 class="red"> 클래스 red 가 적용되어있습니다. </h1>
<p class="red"> 클래스 red 가 적용되어있습니다. </p>

      > 클래스 명, 또는 아이디 명을 선택자로 사용하는것

      > 클래스는 중복이 가능하지만, 아이디는 중복되지 않은 유니크한 속성으로 사용한다.

         = 클래스 범위가 아이디 범위보다 크다