필라델피아 시작점.
커널 다운로드 (아래의 작업들 부터는 루트 권한으로 진행합시다.)
커널 컴파일
주위에 도움이 되길 바라며...
선택자
l 공통선택자
n 공통 선택자(Universal Selector)는 *로 표현되는 선택자
n * { color: gray; }
n 모든 element 에 color: gray; 라는 스타일을 지정한다는 의미
l 타입선택자
n p, div, span, table, td, form...등과 같은 HTML 태그를 선택하는 선택자
n p { color: gray; }
l ID 선택자(ID Selector)
n #이라는 지시어를 사용하면서 element의 아이디값을 지정
n #gray_text { color: gray; }
n id 값이 gray_text 인 element에만 스타일이 적용
l class 선택자
n .이라는 지시어를 사용하면서 element의 클래스값을 지정
n 특정 element에만 스타일을 지정한다는 의미로 ID 선택자와 차이점이라면 클래스의 경우는 한 문서에 동일한 이름의 클래스가 여러개 위치해도 괜찮으나 아이디는 유일해야 한다는 차이가 있다
n .gray_text { color: gray; }
n 클래스 값이 gray_text 인 element에만 스타일이 적용
l 혼용
n .u_list li {line-height:150%;}
Block-level/inline-level
l div(block-level element)와 span(inline-level element) element
l block-level element인 div element를 연속으로 2개를 넣으면 각각 한라인을 차지
l inline-level element는 한줄에 옆으로 여러개가 위치 가능
l block-level element는 inline-level element를 포함할 수 있지만 반대의 경우는 불가
l block-level elements
n p / h1~h6 / ul / ol / pre / dl / div / noscript / blockquote / form / hr / table
n fieldset / address
l inline-level elements
n samp / kbd / var / cite / abbr /acronym / a / img / object / br / script / map / q / sub
n sup / span / bdo / input / select / textarea / label / button
CSS 를 이용한 마우스 커서 모양 지정
l <p style="cursor:auto">Auto</p>
l <p style="cursor:crosshair">Crosshair</p>
l <p style="cursor:default">Default</p>
l <p style="cursor:pointer">Pointer</p>
l <p style="cursor:move">Move</p>
l <p style="cursor:e-resize">e-resize</p>
l <p style="cursor:ne-resize">ne-resize</p>
l <p style="cursor:nw-resize">nw-resize</p>
l <p style="cursor:n-resize">n-resize</p>
l <p style="cursor:se-resize">se-resize</p>
l <p style="cursor:sw-resize">sw-resize</p>
l <p style="cursor:s-resize">s-resize</p>
l <p style="cursor:w-resize">w-resize</p>
l <p style="cursor:text">text</p>
l <p style="cursor:wait">wait</p>
l <p style="cursor:help">help</p>
링크색상
l a:link는 방문한적이 없는 일반적인 링크를 의미
l a:visited는 방문한 적이 있는 링크를 의미
l a:active는 클릭하는 순간을 의미합니다. 클릭
l a:hover는 마우스를 올렸을때를 의미합니다. 위의 예제에서도 볼 수 있듯이 이 부분을 강조