CSS

///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

///////////////////////// CSS /////////////////////////

///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

// <style> 태그 안에서 해당 문서의 CSS STYLE 정의 

<style type="text/css"><!--

p.red {color:red; background-color:skyblue; line-height:10px; text_indent:20px}

.yellow {color:yellow}

#red {color:red}

//--></style>

// 태그 내에서 style Attribute(속성) 정의 

<p style="color:red;">ㅎㅎㅎ</p>

<div style="border:5px solid skyblue; background:black; color:white;">내용홍</div>

// 자바스크립트에서 정의

// <link>태그로 CSS문서를 불러서 정의

///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

///////////////////////// Selector (선택자) /////////////////////////

///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

// 선택자 : 요소[속성=속성값]과 일치하는 요소만 선택하여 정의할 수 있도록 한 것 (내 해석^^;) 

( E는 요소(Element), P는 속성(Property), V는 값(Value) )

*     //모든 것

S1 S2     //S2가 S1의 자손인 것

S1 + S2     // S1의 다음(next)에 있고 같은 형제인(같은 부모를 둔) S2인 것

S1 ~ S2     // S1과 형제인(부모가 같은) S2인 것

S1 > S2     // S1을 부모로 둔 S2인 것

E[P=V]     //Element중에서 P의 value가 V인 것

E[P~=V]     //P의 value가 V이거나 공백을 포함한 것

E[P|=V]     //P의 value가 V이거나 V- 형식인 것

E[P^=V]     //P의 value가 V로 시작하는 것

E[P$=V]     //P의 value가 V로 끝나는 것

E[P*=V]     //P의 value가 V를 포함하는 것

#idName     //요소의 id속성의 value가 idName인 것

.className     //요소의 class속성의 value가 className인 것

:enabled

:disabled

:checked

:lang()

:target

:link

:visited

:hover

:active

:focus

:root

:not()

:only-child

:only-of-type

:first-child

:last-child

:first-of-type

:last-of-type

:nth-child()     // nth-child(even) 짝수만,nth-child(even) 홀수만,  

:nth-last-child()

:nth-of-type

:nth-last-of-type

:empty

 

///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

///////////////////////// property(속성) & value(값) /////////////////////////

///////////////////////////////////////////////////////////////////////////

///////////////////////////////////////////////////////////////////////////

// font

// font-family

// font-size

// font-style

// font-variant

// font-weight

// transform

// transform-origin

// transform-style

// perspective

// perspective-origin

// backface-visibility

// transition

// transition-property

// transition-duration

// transition-timing-function

// transition-delay

// animation

// animation-name

// animation-duration

// animation-timing-function

// animation-delay

// animation-iteration-count

// animation-direction

// animation-play-state

// background

// background-attachment

// background-color

// background-image

// background-position

// background-repeat

// background-clip

// background-origin

// background-size

// border

// border-color

// border-style

// border-width

// border-radius

// border-image

// border-image-outset

// border-image-repeat

// border-image-slice

// border-image-source

// border-image-width

// outline

// outline-color

// outline-width

// text-shadow

// box-shadow

// width

// height

// margin

// padding

// box-sizing

// display

// visibility

// opacity

// overflow

// position

// left

// top

// right

// bottom

// z-index

// float

// color

// direction

// letter-spacing

// line-height

// text-align

// text-decoration

// text-indent

// text-transform

// vertical-align

// white-space

// text-overflow

// word-spacing

// word-wrap