선택자
: 스타일을 적용하고자 하는 HTML 요소를 선택하는 역할
h1, p, span, div, a, ... → 일반적인 태그를 선택자로
•
h1, p {
color: red;
}
⇒ 여러 개의 선택자를 , 를 이용하여 스타일을 한번에 지정 가능
단순 선택자 (<style> 속)
•
타입 (Type) : 해당 태그를 가지는 모든 요소에 스타일을 적용 (head에)
ex - p { color: red;}
•
클래스 (Class) : 비슷한 특징을 갖는 요소를 지정하여 묶을 수 있음, 여러 번 사용이 가능, 클래스 이름으로 스타일을 적용, 같은 클래스 이름이면 모두 적용 (head에 class 선택자, body의 각 요소에 class 이름 붙임)
ex - .contents { font-size: 24px; }
...
<p class="contents">이것은 두번째 단락입니다.</p>
•
아이디 (Id) : Id로 스타일을 적용, 해당 Id 하나에 적용(Id는 단 하나), HTML 문서 내에서 동일한 아이디는 존재할 수 없음, 다른 요소와 구분되는 점을 만들어줌 (head에 Id 선택자, body의 각 요소에 Id 이름 붙임)
ex - #snow { background-color: yellow; }
...
<h2 id="snow">작은 여정입니다.</h2>
•
전체 (Universal) : 모든 요소에 스타일을 적용, 모든 요소에 적용하기 때문에 속도 저하 가능성 있음
ex - * { color: red; }
•
속성 (Attribute) : 특정 속성을 소유하는 모든 요소에 스타일을 적용
- 선택자[속성명="속성값"] { color: red; }
ex - a[target="_blank"] { color: red; }
복합 선택자
•
자식 선택자 : 선택자A의 모든 자식 중 선택자B와 일치하는 요소 선택
- 선택자A > 선택자B { color: red; }
ex - article > p { color: red; }
•
후손 선택자 : 선택자A의 모든 후손 중 선택자B와 일치하는 요소 선택
- 선택자A 선택자B { color: blue; }
ex - article p { color: blue; }
pseudo 클래스 (단순 선택자)
: 요소의 특별한 상태를 지정할 때 씀 (가상의 클래스)
- 선택자:pseudo-class {
속성: 속성값;
}
⇒ 개발자 도구에서 볼 수 있음
•
:link : 방문하지 않은 링크일 경우
ex - a:link { color: yellow; }
•
:visited : 방문한 링크일 경우
ex - a:visited { color: green; }
•
:hover : 요소에 마우스가 올라와 있을 경우
ex - a:hover { background-color: blue; }
•
등