'기술,예술,사람'에 해당되는 글 11건

  1. 2012.12.04 CSS 1장 } 선택자종류

* CSS는 html과 함께 동작하는 언어로 문서의 요소에 크기 색상 배경 두께등의 시각적 스타일을 제공합니다

* CSS3는 대부분 유명한 브라우저의 최신버전과 통합되고 있지만 아직은 실험단계가 많으며  -moz, -webkit, -ms등의 밴드프리픽스 사용합니다  caniuse.com으로 확인하면 어떤 브라우저에서 사용가능한지 알수 있습니다




1. 전체 선택자 : * 

2. 태그 선택자 : 태그

3. 아이디 선택자 : #아이디 

4. 클래스 선택자 : .클래스

5. 후손선택자  : 선택자 선택자

6. 자손선택자 > :선택자 > 선택자

여기까지는 일반적으로 알고 계실 것이라 생각하여 자세한 설명은 생략하겠습니다

css의 선택자는 굉장히 많습니다. 다 외울 필요는 없지만 다양한 선택자들을 사용하게 되면 다양하게 활용된다는 사실을 알게 되었습니다.


7. 속성 선택자  기본속성 선택자와 문자열 속성 선택자

1. 기본속성선택자

 선택자  설명
 선택자 [속성]

 특정한 속성이 있는 태그를 선택한다

 선택자 [속성=값][속성=값]

 특정 속성 안의 값이 특정값과 같은 문서객체를 선택한다

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>CSS3 Selector Basic Page</title>
  5.     <style>
  6.         /* input 태그 중에서 type 속성을 text로 갖는 태그의 background 속성에 red 키워드를 적용합니다.*/
  7.         input[type=text] { background: red; }
  8.         /* input 태그 중에서 type 속성을 password로 갖는 태그의 background 속성에 blue 키워드를 적용합니다.*/
  9.         input[type=password] { background: blue; }
  10.     </style>
  11. </head>
  12. <body>
  13.     <form>
  14.         <input type="text" />
  15.         <input type="password" />
  16.     </form>
  17. </body>
  18. </html>

코드를 실행하면 type의 속성에 따라 다른 스타일이 적용됩니다


2. 문자열 속성선택자

 선택자 설명

 선택자 [속성~=값]

 속성 안의 값을 단어로 포함하는 문서객체를 선택

 선택자 [속성이름*=값] 

 속성 중 값이 조금이라도 포함되어있으면 선택

 선택자 [속성이름^=값] 

 속성 중 값으로 시작하는 것만 선택

 선택자 [속성이름$=값] 

 속성 중 값으로 끝나는 것만 선택


  1. p[name*="my"] {font-size:20px} →  my가 포함된 <p>요소에 적용된다. ex.textmycar
  2. p[name^="my"] {font-size:20px} → my로 시작하는 <p>요소에 적용된다 ex.mycar
  3. p[name$="my"] {font-size:20px} → my로 끝나는 <p>요소에 적용된다 ex.carmy
  4. img[src] {border:1px solid red} 
  5. img[src*="my"] {border:1px solid red} → my라는 단어가 조금이라도 포함된 이미지
  6. img[src^="my"] {border:1px solid red} → my라는 단어가 시작된 이미지
  7. img[src$="jpg"] {border:1px solid red} → jpg로 끝나는 이미지
  8. table[border] 


8. CSS 자손선택자 >, 동위 선택자  +, ~

자손선택자,  이 선택자는 첫번째 요소가 부모인 경우에 두번째 요소를 참조한다.

동일부모상의 형제요소중 다음형제

동일부모상의 형제요소

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>CSS3 Selector Basic</title>
  5.     <style>
  6.         /* h1 태그의 바로 뒤에 위치하는 ul 태그의 color 속성에 red 키워드를 적용합니다. */
  7.         h1 + ul { color: red; }
  8.          /* h1 태그의 뒤에 위치하는 p태그의 background-color 속성에 orange 키워드를 적용합니다. */
  9.         h1 ~ p { background-color: orange; }
  10.     </style>
  11. </head>

  12. <body>
  13.     <h1>h1</h1>
  14.     <ul>
  15.         <li>li-1</li>
  16.         <li>li-1</li>
  17.     </ul>
  18.         <ul>
  19.         <li>li-2</li>
  20.         <li>li-2</li>
  21.     </ul>
  22.      <P>p</P>
  23. </body>
  24. </html>







CSS 반응선택자

:hover, :active


CSS 링크선택자

:link, :visited


CSS 상태선택자

:focus 

:enabled - 사용 가능한 사용자 인터페이스 요소

:disabled - 사용 불가능한 사용자 인터페이스 요소

:checked - 선택되거나 눌린 라디오 버튼 또는 체크박스


CSS 문자선택자

::first-letter

::first-line 

::after

::before

::selection

  1. h1::first-letter {font-size:250%} → h1의 첫번째 글자 한자만 포인트를 키워라
  2. p::first-line {font-size:250%} → 단락에서 첫번째 줄의 문장만 포인트를 키워라


CSS 구조적 유사(가상)클래스 :nth-child

  1. li:nth-child(odd) {background:yellow} → 홀수열의 배경색만 노란색으로 바꿔라
  2. li:nth-child(even){background:red} → 짝수열의 배경색만 빨강색으로 바꿔라
  3. li:last-child {padding-bottom:30px} → 마지막 li요소만 하단 여백을 주어라
  4. :not(p) {margin:0px} → 부정유사클래스, <p>를 제외한 모든 요소에 스타일을 적용해라
  5. :not(.myclass) {margin:0px} → 부정유사클래스, .myclass가 아닌 것에 스타일을 적용해라

:root - 항상 html요소인 root요소

EF:nth-child(n) - 부모 요소E의 n번째 자식 요소F

EF:nth-of-child(n) - 마지막 항목으로부터 계산해 부모 요소 E의 n번째 자식 요소 F 예)li:nth-last-child(1)은 리스트의 마지막 항목에 매치

E:nth-of-type(n) - 특정 부모 요소 내에서 해당 타입의 요소 중 n번째 요소

E:nth-last-of-type(n) - 부모 요소 내에서 마지막 항목으로부터 계산하는 것을 제외하고 nth-of-type(n)과 같음

E:first-child - 어떤 부모 요소의 첫 번째 자식 요소 E, - :nth-child(1)과 같음

E:last-child - 어떤 부모 요소의 마지막 자식 요소인 E, :nth-last-child(1)과 같음

E:first-of-type - :nth-of-type(1)과 같음

E:last-of-type - :nth-last-of-type(1)과 같음

E:only-child - 부모 요소가 오직 하나의 자식을 둔 요소

E:only-of-type - 부모 요소 내에 지정한 타입이 오직 하나인 요소

E:empty - 자식이 없는 요소, 텍스트 노드도 포함

E:not(exception) - 괄호 안의 선택자에 매치되지 않는 요소를 선택



Posted by uuulike :