본문 바로가기
Coding/CSS

CSS - 선택자(selector)

by z쿳쿳z 2020. 5. 7.
728x90
반응형

선택자(Selector)

 - HTML에 있는 element를 선택자로 불러서 <style></style> tag 안에 효과를 넣어서 HTML 효과를 줄 수 있다.

 - 선택자를 지정해주는 방식은 name, id, class가 있다.

  *tag를 선택자로 부를땐, tag를 <> 기호 없이 써주고 선언을 한다.

  *id를 선택자로 부를땐, #을 써주고 선언을 한다.

*class를 선택자로 부를땐, .을 써주고 선언을 한다.

Cascasding은 우선순위를 가지고 있다.

 - CSS 효과는 우선 순위를 가지고 있다.

  * id > class > tag

  *div 태그에 선택자에 대해 폰트 빨간색 효과를 주었지만, 우선 순위에 의해서 id 선택자로 준 효과와 class 선택자로 준 효과 적용

  *id와 class 선택자가 둘다 있을 때, id가 우선순위로 선정된다.

  *class 선택자는 나중에 나온 것을 우선순위로 갖는다.

Color : red가 나중에 적용되었기에 결과는 빨간색 적용

  * '*' HTML에 있는 모든 태그들에 대해 효과를 넣는다.

  *하지만 태그에 들에 효과를 넣기 때문에, id > class > tag 우선순위는 적용된다.

 

id와 class 차이

 - class 는 중복 사용이 가능하다.

  *id는 중복해서 같은 id 를 사용할 수 없다.

  *class는 중복해서 사용이 가능하며, 여러개의 이름을 가질 수 있다.(여러개의 이름은 띄워쓰기로 구분할 수 있다.)

 

728x90
반응형

'Coding > CSS' 카테고리의 다른 글

CSS - 위치(float, column)  (1) 2020.05.07
CSS - Position  (1) 2020.05.07
CSS - Box model(*중요*)  (1) 2020.05.07
CSS - 설명 및 기초  (1) 2020.05.07