본문 바로가기

Development/HTML

웹표준가이드(4) / css선택자와 선언종류

출처 : http://blog.naver.com/maglitt/60052974527

css제대로 사용하기

 

01 / html과 css의 관계

    • html : 컨텐츠의 내용과 구조 표시
      • 컨텐츠가 문단인지<p>, 인용문인지<blockquote>, 리스트형태<ul>인지에 따라 적합한 엘리먼트로 표기
      • 컨텐츠가 문서내에서 가지는 의미에 따라 <div>와 적절한 id, class 속성표기(나타내고자 하는 컨텐츠를 의미에 맞게 기술하여 웹페이지로의 접근성을 높이는 방법으로 markup을 만드는 것이 웹표준의 목적)
      • 웹표준의 목적 : 컨텐츠의 의미에 맞게 기술하여 웹페이지로의 접근성을 높이는 방법으로 markup하는 것.

    • css : 문서의 내용과 표현을 분리하는것
      • 문서의 내용은 html로 작성하고 표현은 css로!!

 

 

02 . css의 일반선택자

    • 일반선택자(selector) 종류
      • (*) : 공용선택자 ㅣ 모든 태그에 적용
      • (a) : 타입선택자 ㅣ 태그 <a> 지정 
      • (.A) : class 선택자 ㅣ 클래스가 A인 태그에 적용
      • (#A) : id 선택자 ㅣ 아이디가 A인 태그에 적용


    • (*)공용선택자
       * {
          margin: 0;
          padding: 0;
       }
      페이지 내의 모든 <h1>,<h2>,<p>,<form>,<blockquote> 등의 브라우져 기본 마진과 패딩을 가지고 있는 엘리먼트들의 여백을 없앤다.

       div.search * {

                          vertical-aling: middle;

       }

      div.search안의 모든 엘리먼트가 세로로 가운데 정렬이 되게 된다.


    • (a)타입선택자 : 해당엘러먼트를 선택하여 속성 부여

    • 클래스선택자 : 한페이지에서 여러번 사용가능

    • 아이디선택자 : 한페이지에 한번만 사용할 수 있다. 




03. 복합선택자(ie6/win 지원 x)

    • 종류
      • A B : 하위선택자 ㅣ 태그 A로 감싸져 있는 모든 태그 B 지정
      • A > B : 자식선택자 ㅣ 태그 A로 감싸져 있는 바로 아래 자식 태그 B 지정
      • A+B : 태그 A와 B가 연속으로 나와 있는 것을 지정

     
     
     
    • A B : 하위선택자
      • A 하위에 있는 B선택
      • id selector와 함게 사용하여 중복선언을 피함
      • 불필요한 class를 줄인다.

//하위선택자의 예//

 

<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>

 

------------------   ▼   아래와 같이 스타일적용 ▼ ---------------------------

ul#list a:link,
ul#list a:visited {
color: #999;
}
ul#list a:hover,
ul#list a:active {
color: #000;
}

 

 

    • A > B : 자식선택자
      • A 태그 바로 아래 있는 자신에게만 영향을 준다.
      • 중첩된 <ul>을 사용할때 유리

        //자식선택자의 예//
      • <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과 ul.depth2의 <li>에 스타일을 적용할 경우
                        ul.depth2의 <li>까지 스티일이 적용
                         ul.depth1 li {
                        background: #f9f9f9;
                        border-bottom: 1px solid #ddd;
                        }

                   

                   ul.depth1>li {
                  background: #f9f9f9;
                  border-bottom: 1px solid #ddd;
                  }

                  child selector를 사용해 주면 첫번째 뎁스의 <li>만

                  선택을 해서 스타일을 적용 할수 있다. (ie6에서는 x)

                   

                    • A+B : 인접선택자 (ie6에서는 x )

                      //인접선택자의 예//

                      <h2>브라우져 워</h2>
                      <p>초기 windows(win95?) 사용자는
                      윈도우를 설치 하더라도 … 즉 많은 브라우져가 있었고 IE 에 의한 독점이 이루어지지
                      않고 서로 시장 점유율을 높이려고 노력하던 시대를 Browser War 라고 합니다.</p>

                      <h2>브라우져 독점의 폐단과 우리의 웹시장</h2>

                      <p>우리의 웹시장이 IT 에 대한 지원과 더불어 엄청난 속도로 발전을 했다는 것은
                      모든 사람이 아는 사실입니다. ...사람들은 MS 의 IE 에서 돌아가는 javascript 를 구현하고 MS 에서 제시하는 방법론을 아무 저항없이 받아 들였습니다.</p>


                      제목 다음 문단의 첫글자를 <span>등을 이용하지 않고 크게 하고자 할 경우
                      h2+p:first-letter {
                      float: left;
                      font-size: 2.2em;
                      }

                   

                   

                   

                   

                  04 / 가상클래스 선택자

                    • p:first-child{background: #4788c4;} ⇒ ( first-child 수도 클래스)
                      • p태그로 감싸 있는 것중 가장 처음 태그에 적용
                      • 리스트의 디자인을 만들때 유용
                      • ie6에서는 x
                    • P:lang(ko-KR) {background: $4788c4;} ⇒ (언어 수도 클래스)
                      • 언어가 (ko-KR)인 p엘리먼트를 선택한다.
                      • 문서에 여러 언어가 있을 경우 스타일 적용에 적합
                      • ie6에서는 x
                    • a:link, a:visited ⇒ 링크수도 클래스
                      • html4.01 또는 xhtml1.0의 경우 a엘리먼트에 해당
                    • a:active, a:hover, a:focus ⇒ 동적수도 클래스
                      • focus는 ie6에서는 x

                   

                   

                   

                  05 / 속성선택자(ie6지원 x)

                    • p[foo], p[foo="warning"], p[foo~="warning"], p[langl="en"]
                      • foo라는 속성과 warning값을 가진 p엘리먼트 선택

                      • <input type="text" />

                        <textarea></textarea>

                        ----------------------[스타일적용]------------------------

                        input[type="text"], textarea {

                             border: solid 1px #eee;

                        }

                   

                   

                   

                   

                  06 / 동적선택자

                   

                    • :link, :visited, :hover, :active, :focus 수도클래스
                      • 일반적으로 링크<a>에서 사용하지만 tr 등 다른 엘리먼트에서도 사용가능

                        //동적선택자를 이용//javascript없이 마우스 오버시 td색을 바꿀수 있다.

                        tr:hover td {

                                        background: #eee;

                        }


                      • input, select에 적용해서 자신의 위치를 알려줄 수 있다.
                    • :first-child 수도 클래스
                      • first-child 수도 클래스로 첫번째 엘리먼트를 선택하여 디자인 적용에 동적기능 부여
                      • focus 수도 클래스의 리스트 예제에서 <li> 엘리먼트에 border-top 속성을 사용하여 원하는 결과물을 얻기 힘들다 이때 first-child수도 클래스를 사용하면 쉽게 해결 가능<ie6지원 x>

                        <style type="text/css">
                        li {
                        border-top: 1px solid #999;
                        padding: 0.2em 0;
                        }
                        li:first-child {
                        border-top: 0 none;
                        }
                        </style>


                    • :first-line, :first-letter 수도 클래스
                      • :first-line ⇒ 첫번째 라인 선택 가능
                      • :first-letter ⇒ 첫번째 글자를 선택 가능
                      • :first-line과 first-letter 모두 first-child와 달리 특정 엘리먼트를 필요로 하지 않는다

                        <style type="text/css">
                        p {
                        margin: 3em;
                        line-height: 1.6em;
                        font-family: AppleMyungJo, serif;
                        }
                        p:first-line {
                        text-decoration: underline;
                        }
                        p:first-letter {
                        float: left;
                        font-weight: bold;

                        font-size: 3.5em;
                        }
                        </style>

                         

                        ---------------------------------------------------------------------

                        <body>
                        <p>원칙은 매사가 순조롭고 편안할 때는 누구나 지킬 수 있다. 그런데 원칙을 원칙이게
                        하는 것은 어려운 상황, 손해를 볼 것이 예상되는 상황에서도 그것을 지키는 것이다.
                        앞으로도 나는 원칙을 지키기 위해 어떤 손해를 보게 될지 모른다. 하지만 나의
                        판단기준과 선택은 크게 달라지지 않을 것이다. - 안철수</p>
                        </body>

                   

                   

                   

                   

                  CSS 선언방법 3가지 

                  • 외부선언 (external css)  우선 순위 가장 낮음
                     <link rel="stylesheet" type="text/css" href="test.css" />
                    문서안에 포함 (embeded css)

                    <head>

                    <style type="text/css">

                    이곳에 선언

                    </style>

                    </head>

                  • 엘리먼트 직접 선언 (inline css)
                     <div style=""></div>
                  • 사용자 정의 스타일 (user defined css)  우선 순위 가장 높음
                    유저 직접 선언