[CSS] - 선택자

1. CSS를 통한 일괄 적용

 - Selector(선택자)에 css를 적용

 - 문장 구조 설명

a{       color: blueviolet;       text-decoration:none;     }

  * a → selector(선택자) 

 

  ** color: blueviolet → declaration(선언 및 효과)

     text-decoration:none → declaration(선언 및 효과)

 

  *** color, text-decoration:none → property(속성)

 

  **** blueviolet, none → value(속성 값 또는 값)

 

 

See the Pen CSS - a by hbkuk (@hbkuk) on CodePen.

 

 

2. CSS 적용을 위한 선택자 class

 - class 적용 예

  * CSS 적용을 위해 이름 앞에 .(콤마)를 기입

  **  class 선택자는 중복사용이 가능

  *** class - class 적용순서는 상대적으로 앞쪽에 배치된 명령이 우선순위가 높음. 

See the Pen CSS - class by hbkuk (@hbkuk) on CodePen.

 

 

3. CSS 적용을 위한 선택자 id

 - id 적용 예

  * CSS 적용을 위해 이름 앞에 #(샵)을 기입

  **  id 선택자는 중복사용이 불가능, 한번만 등장해야하는 규칙이 존재

  *** 선택자 class - id 간 적용순서는 id가 우선이다.

        =>why? 코딩을 할 때 상대적으로 포괄적인 부분을 진행하고, 구체화 시키는 방향으로 진행하라는 의미

 

See the Pen CSS - id by hbkuk (@hbkuk) on CodePen.