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 |