웹프로그래밍/css

CSS선택자

zelkova 2014. 7. 25. 19:15

<목차로 돌아가기>



선택자란?

CSS 선택자는 HTML요소들을 조작하기 위해서 사용된다고 배웠습니다


CSS 선택자는 요소(element)선택자 이외에도 id, classes, grouping 등등이 있습니다. 이번 블로그에서는 기본 선택자 외의 선택자에 대해서 알아봅시다.


아래의 예제는 HTML요소들을 가운데로 정렬하고 색깔을 빨강색으로 지정하는 예제입니다.



전체 선택자

현재 있는 모든 요소들을 선택하여 속성값을 지정할수 있습니다.


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style> 
  5. *{
  6.     text-align:center;
  7.     color:red;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <p>가나다라마바사</p>
  13.     가나다라마바사
  14. </body>
  15. </html>




요소(element) 선택자

이 선택자는 요소의 기본적인 이름을 사용하는 선택자 입니다.

HTML의 요소인 <P>을 사용한다면 아래와 같이 사용할 수 있습니다.


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style> 
  5. P{
  6.     text-align:center;
  7.     color:red;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <p>가나다라마바사</p>
  13.     가나다라마바사
  14. </body>
  15. </html>





하위 선택자

div안의 p태그만 영향을 받게 됩니다.


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style> 
  5. div p{
  6.       text-align:center;
  7.       color:blue;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <div><p>가나다라마바사</p></div>
  13. <p>가나다라마바사</p>
  14.     가나다라마바사
  15. </body>
  16. </html>






id 선택자

주로 header나 content 등 한 페이지에 한 번만 들어가는 로고나 상단 메뉴 하단정보등의 스타일과 같은 특별한 요소를 정의할 때 id를 사용합니다.


ID선택자는 한 가지만 지정해서 사용하는 선택자 이고 하나의 문서에 고유한 id하나밖에 사용할 수 밖에 없습니다.


body태그안에 한번만 사용해야 하는데 그렇지 않으면 웹표준 테스트에서 오류가 난다고 합니다.


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style> 
  5. #para1{
  6.       text-align:center;
  7.       color: blue;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <div id="para1">
  13. <p>가나다라마바사</p>
  14.     </div>
  15.     <div>
  16. <p>가나다라마바사</p>
  17.     </div>
  18. <p>가나다라마바사</p>
  19.     가나다라마바사
  20. </body>
  21. </html>




클래스 선택자

그룹으로 묶어서 스타일을 지정할 때 사용하는 스타일 형식입니다.

여러개의 태그에 동시에 적용될 수 있으므로 몇번이고 재사용이 가능합니다.

반복적으로 사용되는 스타일이나 id로 정의해준 구역에 세부 스타일을 정의할때 사용한다.


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style> 
  5. .center{
  6.       text-align:center;
  7.       color:blue;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <div class="center">
  13. <p>가나다라마바사</p>
  14.     </div>
  15.     <div>
  16. <p>가나다라마바사</p>
  17.     </div>
  18. <p>가나다라마바사</p>
  19.     가나다라마바사
  20. </body>
  21. </html>




그룹선택자

 그룹 선택자는 뜻에서 용도를 알 수 있습니다. 

HTML요소들을 한꺼번에 지정하는 방법입니다.


  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <style> 
  5. h1, span, div p{
  6.       text-align: center;
  7.       color: red;
  8. }
  9. </style>
  10. </head>
  11. <body>
  12. <div class="center">
  13. <p>가나다라마바사</p>
  14.     </div>
  15.     <div>
  16. 가나다라마바사
  17.     </div>
  18. <span>가나다라마바사</span>
  19.     가나다라마바사
  20. </body>
  21. </html>




기타선택자


선택자는 Type(element),Universal(*),class/id,attribute(속성),가상요소/가상클래스,선택자결합(하위,자식,인접) 등으로 구성된다.

PatternMeaningS5C8F3.6O11I9bI8I7I6
#idid로 지정된 요소 선택OOOOOOOO
.classclass로 지정된 요소 선택OOOOOOOO
EE 요소를 선택OOOOOOOO
E:link방문하지 않은 E를 선택OOOOOOOO
E:visited방문한 E를 선택OOOOOOOO
E:hover마우스가 올라가 있는 동안 E를 선택OOOOOOOO
E:active마우스 클릭 또는 키보드(enter)가 눌린 동안 E를 선택OOOOOOOX
E:focusfocus가 머물러 있는 동안 E를 선택OOOOOOXX
E:first-lineE 요소의 첫 번째 라인 선택OOOOOOOX
E:first-letterE 요소의 첫 번째 문자 선택OOOOOOOX
*모든 요소 선택OOOOOOOO
E[foo]‘foo’ 속성이 포함된 E를 선택OOOOOOOX
E[foo=”bar”]‘foo’ 속성의 값이 ‘bar’와 일치하는 E를 선택OOOOOOOX
E[foo~=”bar”]‘foo’ 속성의 값에 ‘bar’가 포함되는 E를 선택OOOOOOOX
E[foo|=”en”]‘foo’ 속성의 값이 ‘en’ 또는 ‘en-‘ 으로 시작되는  E를 선택OOOOOOOX
E:first-child첫 번째 자식 요소가 E라면 선택OOOOOOOX
E:lang(fr)HTML lang 속성의 값이 ‘fr’로 지정된 E를 선택OOOOOOXX
E::beforeE 요소 전에 생성된 요소 선택OOOOOOXX
E::afterE 요소 후에 생성된 요소 선택OOOOOOXX
E>FE 요소의 자식인 F 요소 선택OOOOOOOX
E+FE 요소를 뒤의 F 요소 선택OOOOOOOX
E[foo^=”bar”]‘foo’ 속성의 값이 ‘bar’로 정확하게 시작하는 요소 선택OOOOOOOX
E[foo$=”bar”]‘foo’ 속성의 값이 ‘bar’로 정확하게 끝나는 요소 선택OOOOOOOX
E[foo*=”bar”]‘foo’ 속성의 값에 ‘bar’를 포함하는 요소 선택OOOOOOOX
E:root문서의 최상위 루트 요소 선택OOOOOXXX
E:nth-child(n)그 부모의 n번째 자식이 앞으로부터 지정된 순서와 일치하는 E 라면 선택OOOOOXXX
E:nth-last-child(n)n번째 자식이 뒤로부터 지정된 순서와 일치하는 요소가 E 라면 선택OOOOOXXX
E:nth-of-type(n)E 요소 중 앞으로부터 순서가 일치하는 n번째 E 요소 선택OOOOOXXX
E:nth-last-of-type(n)E 요소 중 끝으로부터 순서가 일치하는 n번째 E 요소 선택OOOOOXXX
E:last-childE 요소 중 마지막 자식이라면 E 선택OOOOOXXX
E:first-of-typeE 요소 중 첫번째 E 선택OOOOOXXX
E:last-of-typeE 요소 중 마지막 E 선택OOOOOXXX
E:only-childE 요소가 유일한 자식이면 선택OOOOOXXX
E:only-of-typeE 요소가 같은 타입이면 선택OOOOOXXX
E:empty텍스트 및 공백을 포함하여 빈 자식을 가진 E를 선택OOOOOXXX
E:targetE의 URI의 대상이 되면 선택OOOOOXXX
E:enabled활성화된 폼 컨트롤 E요소 선택OOOOOXXX
E:disabled비활성화된 폼 컨트롤 E요소 선택OOOOOXXX
E:checked선택된 폼 컨트롤(라디오버튼,체크박스)을 선택OOOOOXXX
E:not(s)s가 아닌 E 요소 선택OOOOOXXX
E~FE 요소가 앞에 존재하면 F를 선택OOOOOOOX

<표 1> CSS 버전에 따른 선택자의 종류와 브라우저별 지원여부 – CSS1 – CSS2 – CSS3





반응형
저작자표시

'웹프로그래밍 > css' 카테고리의 다른 글

CSS 배경 스타일  (0) 2014.07.27
CSS 삽입방법  (0) 2014.07.25
CSS - 메뉴 제작하기  (0) 2014.06.09
필터 효과  (0) 2011.02.18
레이어  (0) 2011.02.18

'웹프로그래밍/css'의 다른글

  • 현재글CSS선택자

관련글

티스토리툴바