⭐선택자(selector)
- CSS를 좌우하는 2가지 중요한 요소가 있는데 그 중 하나는 효과이고 다른 하나가 바로 '선택자'이다.
- 선택자에 지정될 효과를 declaration이라고 하고 이는 '선언'이라는 뜻이 있음.
a(선택자){ color:red;(속성:값/property,value)<- 선언효과 }<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CSS</title> <style> ** "CSS 내용"** </style> </head> <body> </body> </html>< style>
HTML문법이나 동시에 CSS 내용이므로 CSS의 언어의 문법에 맞게 처리해야함!
즉, style이라는 속성은 값으로 반드시 CSS화과가 들어온다!
< /style>
// 주석처리모양도 다름!(/* */)
-
선택자 우선순위
선택자는 일반태그, class, id가 있음.
id 선택자 > class 선택자 > 태그 선택자
#a : id값이 a인 값
.a : class값이 a 값 -
선택자 표현
선택자 여러개 선택 : , (콤마)
ex. 색깔 표현
h1,h2,h3 {
color: darkblue;
}동시에 선택 : li.key
ex. class값이 key인 모든 값 선택
li.key {
color: skyblue;
} 내부 선택
ex. ul내부 안의 모든 li선택
ul li {
font-style: italic;
}상태별 선택 : (콜론)
ex. 모든 li중 마우스가 올려진 것을 선택
li:hover { /*hover는 마우스가 위에 있을 때 */
background-color: coral;
color: white;
}
Tina🌙