Selector(선택자)
CSS는 HTML요소의 style을 정의한다. 여러 방법중에 style 태그에 모아서 사용할때 style을 적용하고자하는 HTML요소를 특정할 방법이 필요한데 이 역할을 Selector가 한다.
=> Selector는 style을 적용할 HTML요소를 특정하는 역할.
Selector에도 여러 종류가 있다
1. 전체 Selector
- HTML 문서 내의 모든 요소를 선택
사용법 :
*{
내용
}
전체 Selector에 의해 3개의 p태그 내용이 파란색으로 변한것을 확인할 수 있다.
2. 태그 Selector
-지정된 태그를 요소로 선택한다.
사용법
태그명{
내용
}
p태그 전체를 빨간색으로 div태그 전체를 파란색으로 만들게 된다.
실행결과
3. ID Selector
-태그에 id를 부여해서 id를 선택하게 한다. ID는 중복이 불가능하고 만약 중복시켰을시 가장 먼저 부여된 태그에만 적용된다.
사용법
<태그 id="아이디지정"> <태그/>
-태그에 id를 부여하고
스타일태그에서
#"아이디지정"{
내용
}
태그에 id를 부여하고
style태그에서 지정된 아이디를 지정하고자 할때는 #id로 아이디를 지정한다
지정한 아이디에만 style을 적용시켰기 때문에 id가 부여되지 않은 태그들은 같은 태그여도 style이 변하지 않았다.
4. class Selector
- 태그에 class를 부여하여 같은 class로 묶인 태그들을 한번에 지정한다.
사용법
<태그 class="클래스명"> 내용</태그>
- 태그에 class명을 부여하고
style태그에서
.클래스명{
내용
}
묶고자 하는 태그에 같은 이름의 클래스명을 부여한다.
스타일에서 .클래스 명으로 원하는 스타일을 설정한다.
클래스명이 같은 클래스에 모두 적용된다(태그가 달라도 적용)
태그가 달라고 클래스명이 같아서 적용된 것을 확인할 수 있다.
태그명.클래스이름 으로 설정하면 클래스이름이 같더라도 태그가 같지 않으면 적용되지 않는다
p태그와 같은 클래스로 묶였지만 적용되지 않은 모습을 확인할 수 있다.
5. Attribute Selector
- 지정된 속성을 갖는 모든 요소를 선택한다.
사용법
스타일태그에서
셀렉터[속성="값"]으로 특정한 태그를 지정해서 사용
input에서도 타입에 따라서 특정 타입을 지정할 수 있다.
2개의 p 태그도 하나는 div의 자식인 p와 그냥 p를 구분해서 지정할수도 있다.
div>p는 div의 자식인 p를 의미하며 div p로 생략해서 사용할 수도 있다.
실행내용