선택자를 통해서 해당 css 를 먹히게 한다
1. 태그 선택자
2.클래스 선택자 - .클래스 이름
ex) <p class='test'></p>
.test 이런식으로 접근가능
클래스를 만들어 서로 다른 엘리먼트에 여러 번 적용해서 사용할 수있습니다.
3. 아이디 선택자 - #클래스 이름
ex) <p id='test'></p>
#test 이런식으로 접근가능
클래스 선택자와 달리 다른 태그에 반복해서 적용 불가
아이디라는 엘리먼트 개념은 중복불가하고 고유한 이름만 사용한다
다른페이지에서는 중복 되는 이름 사용가능
자바 스크립트 프로그램에서 값을 얻거나 수정 할 때 사용하기도 합니다 .
4. 하위 선택자
클래스 선택자 안의 또다른 태그에 따로 옵션을 넣어 줄수 잇다
예로
아래와 같을때 div에 스타일을 먹인후 h1와 달리 p에만 다른 스타일을 주고싶다면
.style_div p{
color:white;
}
이다
<div class='style_div'>
<h1>11</h1>
<p> 22</p>
</div>
5. 그룹 선택자 - 선택자 이름만 다르고 스타일 내용을 똑같이 반복하는경우
예로
h1{ font-family:sans-serif}
h2{ font-family:sans-serif}
h3{ font-family:sans-serif}
이것을 h1 , h2 ,h3 {font-family:sans-serif} 와 같이 표현할 수 있다
6.전체 선택자 - 모든 엘리 먼트를 선택할 때 사용 또는 #AB* 이런 경우 AB로 시작되는 모든 아이디가 다 같은 스타일이 먹도록 할 수있다
예로
* {font-size:12px} - 모든 엘리먼트 선택할때
#content* {font-size:12px} #content 라는 이름의 id 선택자가 지정된 엘리먼트에게 다 스타일 먹일때
7. 앵커 유사 클래스 선택자
-. 를 찍고 그다음에 선택자 이름을 적은것을 클래스 선택자라고 하는데 .를 찍은뒤 그위에 . 를 더 찍었을경우 클래스 선택자와 비슷하다고 유사 클래스 라고 한다
:empty 선택자는 엘리먼트안에 아무것도 없는 공백 상태일때 선택이 된다
예로 p:empty{ background:red;} p,엘리먼트 안에 아무것도 없을때 배경색을 빨간색으로 변경합니다
주로 유사클래스 선택자는 하이퍼링크에 스타일을 주기 위해 쓰인다
:link 선택자 - 한번도 방문하지 않은 a 엘리먼트의 링크 선택
:visited 선택자 - 한번이상 방문한 a엘리먼트들의 링크 선택
:hover 선택자 마우스 커서가 a 엘리먼트의 링크 위에 올려 졋을 때 선택
:active 선택자 마우스 버튼을 a 엘리먼트의 링크 위에 클릭 했을 때의 순간을 선택
'HTML' 카테고리의 다른 글
| 컨테이너 안에서 자유롭게 위치 잡기 (0) | 2015.09.06 |
|---|---|
| css 레이아웃 position (0) | 2015.09.06 |
| css 인라인 스타일 ,내부 스타일 , 외부 스타일 (0) | 2015.09.06 |
| h1 h2 h3 태그의 의미 목표 (0) | 2015.09.06 |
| 태그가 올바르게 작성되었는지 여부 확인 (0) | 2015.09.06 |
