CSS Selector

type selector 타입 선택자 : element 이름 선택자이다.

P {color:blue;}

id / class selector : id는 하나의 문서에 고유한 id 하나만 쓸 수 있으므로 한 가지만 지정할 때 쓴다.

#id {color:blue;}

class는 그룹으로 묶어서 스타일을 지정할 때 쓰기 좋다.

<p class="test">A</p>
<p class="test">B</p>
<p class="test">C</p>
.class {color:blue;}

* : 모든 element를 선택한다.


A B

descendant selector 자손 선택자 : 자손은 자식, 손자 그리고 그 이후의 모든 후손을 포함한다.

<ol>
	<li>item</li>
	<li>item
<ol>
	<li>item</li>
	<li>item</li>
	<li>item
<ol>
	<li>item</li>
</ol>
<ol>
	<li>item</li>
</ol>
</li>
	<li>item</li>
</ol>
</li>
	<li>item</li>
	<li>item</li>
</ol>
<ol>
	<li>item</li>
	<li>item</li>
</ol>
ol li{color:red;}

selector

A>B

child selector 자식 선택자 : 직계 자식만 선택한다(자식 이후 손자, 후손들은 포함하지 않는다.)

<ul>
	<li>item 1</li>
	<li>item 2
<ol>
	<li>item 1</li>
	<li>item 2</li>
</ol>
</li>
	<li>item 3</li>
</ul>
ul &gt; li {color:red;}

selector

A+B

adjacent sibling selector 인접 형제 선택자 : 같은 부모를 가지고, A 바로 뒤에 오는 B에만 적용한다.

A~B

general sibling selector 일반 형제 선택자 : 같은 부모를 가지고, A 뒤에 오는 B에 적용한다(바로 뒤에 올 필요 없음)

<h3>애국가</h3>
동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세

남산 위에 저 소나무 철갑을 두른듯 바람서리 불변함은 우리 기상일세.
<h3>애국가</h3>
<div>

동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세

남산 위에 저 소나무 철갑을 두른듯 바람서리 불변함은 우리 기상일세.

</div>
<h4>후렴</h4>
<i>후렴 무궁화 삼천리 화려강산 대한 사람 대한으로 길이 보전하세.</i>

<i>후렴 무궁화 삼천리 화려강산 대한 사람 대한으로 길이 보전하세.</i>
h3~p {background-color:yellow;}
h4+i {color:red;}

selector


링크 가상 클래스

    :link : 방문 전 링크 상태
    :visited : 방문 후 링크 상태
    :hover : 마우스 오버 했을 때 상태/ 링크뿐 아니라 모든 element에 적용이 가능하다
    :active : 마우스를 클릭 했을 때 상태/ 링크외에 모든 element에 적용이 가능하다

스타일 적용 순서는 위와 같으며, 순서대로 하지 않을 경우 제대로 스타일이 적용되지 않는 경우가 있으니 주의 해야 한다.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s