♣ 선택자의 종류
◆ [1] 태그 선택자
- 태그 이름으로 대상을 선택
- 모든 태그가 다 선택되므로 매우 위험한 선택자이다.
- 디자인의 기초 틀을 잡을 때 사용한다.
h1 {
color: cadetblue;
} ◆ [2] 조건부 선택자
- 특정 조건을 만족하는 대상을 선택
- :first-child는 해당 무리의 최초 태그를 선택(그룹의 첫 번째 코드가 선택된 색상으로 변경됨)
h1:first-child {
color: cyan;
} - :last-child는 해당 무리의 마지막 태그를 선택(마지막 코드가 선택된 색상으로 변경됨)
h1:last-child {
color: aquamarine;
} - :hover는 마우스가 올라갔을 때 선택(선택된 색상으로 비추어짐)
h1:hover {
color: aquamarine;
} - 메인 디자인으로 사용하기 어렵다.
◆ [3] 속성 선택자
- 태그에 부여된 속성을 기반으로 선택
h1[id=test]와 같이 작성하며 태그명(h1)을 생략할 수 있다.- 입력창에서 유용하게 사용할 수 있다.
- ex)
input[name=memberId]
◆ [4] 아이디 선택자
- 태그에 부여된 ID를 기반으로 선택
- 같은 페이지 내에서 딱 1개만 부여할 수 있는 속성
- 같은 아이디는 두 개 이상 있을 수 없다.
- 로고 또는 검색창에서 주로 사용한다.
- sharp(#)을 이용하여 선택이 가능
#test {
color: aquamarine;
} - 아이디만으로 모든 디자인을 하기는 어렵고 특징적인 태그를 디자인 할 때 사용
◆ [5] 클래스 선택자
- 디자인을 모듈화 하기 위해 부여하는 선택자
- 하나의 태그에 여러 개의 클래스를 띄어쓰기로 부여할 수 있다.
- 하나의 클래스를 여러 개의 태그에 부여할 수 있다.
- 점(.)을 사용하여 클래스 이름을 적고 선택할 수 있다.
- ex) .one .two. three
.one {
color: aquamarine;
}
.two{
background-color: yellow;
}
.three {
text-decoration: underline;
} ◆ [6] 연계 선택자
- 특정 기점을 기준으로하여 연관된 태그를 선택
- ex)
div > h1: div의 바로 밑에 있는 태그만 선택(자식 선택자) - ex)
div h1: div의 밑에 있는 모든 태그를 선택(후손 선택자)
div h1 {
color: aquamarine;
} - 클래스 선택자가 제일 핵심이다.
- 그 다음으로 속성 선택자
Backend Developer