웹표준가이드(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) ⇒ 우선 순위 가장 높음
  유저 직접 선언

  [출처] 웹표준가이드(4) / css선택자와 선언종류|작성자 마그리뜨