CSS (Syntax and Selectors)

CSS Syntax and Selectors
참조 : w3schools.com
CSS Syntax

CSS Selectors
The element selector
div {
        color : #FF00FF;
        display : block;
}
소스 내의 모든 <div> 요소를 선택한다.

The ID selector
#contents_box { color : green; }
요소내의 [ id ="contents_box" ] 인 요소를 선택한다.
CSS 에서는 hash(#) 를 사용하여 구분한다.
ID는 페이지 내에서 유일 해야한다.

The class selector
.center { text_align : center; }
요소내의 [ class="center" ] 인 요소를 선택한다.
CSS 에서는 period(.) 를 사용하여 구분한다.
HTML 내에서 class 는 여러 번 지정 될 수 있다.
<div class="center search_box user">
특정 HTML element의 class 만 선택 할 수도 있다.
div.center { text_align : center;}

Grouping selector
같은 스타일을 가진 요소가 있다면 뭉쳐서 표현할 수 있다.
div { color : red; }
p { color : red; }
table { color : red; }

div, p, table { color : red;}

CSS comments
주석 처리는 /* 로 시작하여 */ 로 마친다.
div {
        color : red;
        /* single comment */
        display : block;
}
/* multi-line
   comment
*/

CSS combinators
Descendant Selector
(space)
하위의 모든 요소를 선택한다
아래 예시는 div 요소 내의 모든 p 요소를 선택한다.
div p { color : red; }
HTML
<p> black font </p>
<div>
   <p> red font </p>
   <p> red font </p>
   <h1>
       <p> red font </p>
   </h1>
</div>
<p> black font </p>
Child selector
(>)
지정된 요소의 바로 아래 요소들 만을 선택한다.
아래 예시는 div 를 부모로 하는 p 요소들 만 선택한다.
div > p { color : red; }
HTML
<p> black font </p>
<div>
   <p> red font </p>
   <p> red font </p>
   <h1>
       <p> black font </p>
   </h1>
</div>
<p> black font </p>

Adjacent sibling selector
(+)
지정된 요소와 같은 부모를 가진 바로 다음 요소를 선택한다.
div + p { color : red; }
HTML
<p> black font </p>
<div>
   <p> black font </p>
   <p> black font </p>
   <h1>
       <p> black font </p>
   </h1>
</div>
<p> red font </p>

General sibling selector
(~)
지정된 요소와 같은 부모를 가진 요소들을 선택한다.
div ~ p { color : red; }
HTML
<p> red font </p>
<div>
   <p> black font </p>
   <p> black font </p>
   <h1>
       <p> black font </p>
   </h1>
</div>
<p> red font </p>

Attribute selectors


Pseudo-classes

Selector Levels

CSS Specificity

http://www.nextree.co.kr/p8468/