CSS 선택자

CSS 선택자

1. 전체 선택자 (Universal Selector)

*{color:red;}

2. 태그 선택자

li{color:red;}

3. 아이디 선택자 - 요소의 id를 속성값으로 선택 

#id{color:red;}

<div id="dog">                #dog{color:red;}

* id는 고유의 값으로 한번밖에 못쓴다. 

4. 클래스 선택자 

<div class="text">              .textt{color:blue;}

* class는 다수로 사용 가능하다. 

- id 와 class 의 성격은 같다. 

- 헷갈린다면 class로 써도 무관함.

id : header, footer, nav, article

선택자 조합 

1. 태그+클래스 

li.class{color:red;}

<div class="test">동해</div>

<p class="test">백두산</p>

div.test{color:red;}

  

2. 아이디+클래스 

<div class="test" id="test">

div.#test.test  

(아이디+클래스는 되는데 클래스 + 아이디는 안된다. ) 

3. 후손(하위) 선택자 

조상

부모

나 - 형제

자식

후손(하위)

div li {

= div 안에 있는 하위선택자 li태그를 선택하라

자식선택자 

자식 요소를 선택 

E>F

div>ul 

인접형제 선택자

.dog_li

일반형제 선택자 : 나를 기준으로 내 다음 형제만 선택

.dog~li

가상클래스 선택자

hover : 마우스 오버시 적용되는 CSS - 기본 요소에 특정 요소가 덮어지는것

마우스를 얹으면 다음 css 적용 될 때 사용.

div{

color:red;

}

div:hover{

color:black;

}

가상요소 선택자

:before           ::before

:after

:가상클래스      ::가상요소 표준 IE9 이상 적용 

* 전체선택자

div 태그 선택자

# id선택자

. class 선택자

div.class 조합 선택자

div>ul 자식 선택자

div ul 후손 선택자

CSS 상속 

<div class="test1">

<ul>

<li>

<ul>

<li>

<div>

</div>

</li>

</ul>

</li>

</ul>

</div>

test1{

color:red;

}

CSS 선택자 우선순위1

1. !important

2. CSS In-line 선언방식

3. id 선택자 #

4. class 선택자 .

5. 태그선택자 div

6. 전체 선택자 *

7. 상위요소에게 상속받은 속성

CSS 선택자 우선순위2

1. div>ul>li>ul>.dog{color:red;}

2. div>ul>li>ul>

3. ul.dog

4. ul>li

상위부터 타고 내려온 것이 우선함

/*주석내용*/

CSS 속성

width, height px, % 

BOX MODEL

margin

div{margin:10px}  - 4방향 동일 

margin-left:10px;

순서 위 우측 아래 좌 (시계방향)

margin:10px 20px 30px 40px

margin-left:30px;

margin:0 0 0 30px;

div{margin:20px 40px} 위, 아래  좌,우 : 위, 아래 좌, 우가 같을 때 쓰는 방식