CSS

7. CSS
 http://csszengarden.com
 http://phonophunk.com/

 (1) CSS의 선언
  <1> Selector 와 선언부 (p.text : Selector, {} : 선언부)
   p.text {
    margin: 0;
   }
  <2> Selector는 ,로 구분할 수 있다.  
   p.text,
   span.name {
    color: #666;
   }
  <3> 일반 선택자
   - 공용 선택자 * : 모든 태그 지정
    div.search * {
     vertical-align: middle
    } --> div.search 안의 모든 엘리먼트가 다 적용
   - 타입 선택자 A : 태그 A 지정
   - 클래스 선택자 .A : 클래스가 A인 태그를 지정
   - ID 선택자 #A : 아이디가 A인 태그를 지정
  <4> 복합 선택자
   - 하위 선택자 A B : 태그 A로 감싸져 있는 모든 태그 B 지정
    <ul id="list">
     <li><a href="list.html?id=34&amp;type=blah">item 34</a></li>
     <li><a href="list.html?id=35&amp;type=blah">item 35</a></li>
     ...
     ...
     <li><a href="list.html?id=99&amp;type=blah">item 99</a></li>
    </ul>
    --> a 태그에 속성 지정시
    ul#list a:link,
    ul#list a:visited {
     color: #999;
    }
    ul#list a:hover,
    ul#list a:active {
     color: #000;
    }
    --> 한방에 해결
   - 자식 선택자 A > B : 태그 A로 감싸져 있는 바로 하위단계 B만 지정
    <ul class="depth1">
     <li>
      <a href="about.html">Company</a>
      <ul class="depth2">
       <li>
        <a href="overview.html">Overview</a>
       </li>
       <li>
        <a href="ceo.html">Ceo.html</a>
       </li>
      </ul>
     </li>
    </ul>
    ul.depth1 li {
     background: #f9f9f9;
     border-bottom: 1px solid #ddd;
    }
    ul.depth1>li {
     background: #f9f9f9;
     border-bottom: 1px solid #ddd;
    }
   - 인접 선택자 A + B : 태그 A와 B가 연속으로 나와 있는 것을 지정
    <h2>브라우져 워</h2>

    <p>웹스탠다드를 보다 잘 이해하기 위해서는 브라우져 워에 대해서 짚어볼 필요가
    있습니다.</p>

    <h2>어쩌고 저쩌고</h2>

    <p>또다시 어쩌고 저쩌고</p>

    --> 제목 뒤 첫글자만 크게 하고 싶다면??
    h2+p:first-letter {
     float: left;
     font-size: 2.2em;
    }
  <5> 가상 클래스 선택자
   - :first-child선택자 A:first-child : 태그 A로 감싸져 있는 가장 처음 태그 지정
   - 언어선택자 A:lang(B) : 태그 A중 언어가 B인 태그 지정
   - 링크선택자 A:link : 태그 A중 링크가 걸려있는 것 지정
          A:visited : 태그 A중 링크가 걸려있고, 사용자가 이미 클릭한 태그 지정
   - 동적선택자 A:active : 태그 A중 사용자가 마우스를 누르고 있는 태그 지정
       A:hover : 태그 A중 사용자가 마우스 포인터를 위에 올려놓은 태그 지정
       A:focus : 태그 A중 사용자의 키보드 입력을 받는 태그 지정
  <6> 동적 선택자
   - :first-line선택자 A:first-line : 태그 A의 문단중 첫번째 줄 지정
   - :first-letter선택자 A:first-letter : 태그 A의 문단중 첫번째 글자 지정
   - :before선택자 A:before : 태그 A의 문단 앞을 지정
   - :after선택자 A:after : 태그 A의 문단 뒤를 지정

 (2) CSS 선언 방법
  <1> 외부 선언 (external css) - 우선순위가 낮다.
   <link rel="stylesheet" type="text/css" href="myCss.css" />
  <2> 엘리먼트에 직접 선언 (inline css)
   <div style="padding: 10px; border: 1px solid #eee;">
    <p>contents</p>
   </div>
  <3> 사용자 정의 스타일 (user defined css)
   가장 우선 순위가 높은 선언으로 웹페이지 제작자가 선언하는 것이 아니라 웹사이트를 이
   용하는 사용자가 직접 자신에게 맞는 스타일을 선언하는 방법이다.
 
 (3) CSS 적용의 체크 포인트 4가지
  <1> XHTML이 표준 문법이어야 한다.
  <2> XHTML 문서가 의미와 구조적으로 구성되어야 한다.
  <3> CSS가 표준 문법이어야 한다.
  <4> CSS를 표준대로 잘 구현한 브라우져를 이용해야 한다.

 (4) CSS Editor Firefox plugin
  <1> Web Developer 확장 기능
  <2> HTML Tidy