* CSS는 html과 함께 동작하는 언어로 문서의 요소에 크기 색상 배경 두께등의 시각적 스타일을 제공합니다
* CSS3는 대부분 유명한 브라우저의 최신버전과 통합되고 있지만 아직은 실험단계가 많으며 -moz, -webkit, -ms등의 밴드프리픽스 사용합니다 caniuse.com으로 확인하면 어떤 브라우저에서 사용가능한지 알수 있습니다
1. 전체 선택자 : *
2. 태그 선택자 : 태그
3. 아이디 선택자 : #아이디
4. 클래스 선택자 : .클래스
5. 후손선택자 : 선택자 선택자
6. 자손선택자 > :선택자 > 선택자
여기까지는 일반적으로 알고 계실 것이라 생각하여 자세한 설명은 생략하겠습니다
css의 선택자는 굉장히 많습니다. 다 외울 필요는 없지만 다양한 선택자들을 사용하게 되면 다양하게 활용된다는 사실을 알게 되었습니다.
7. 속성 선택자 기본속성 선택자와 문자열 속성 선택자
1. 기본속성선택자
| 선택자 | 설명 |
| 선택자 [속성] |
특정한 속성이 있는 태그를 선택한다 |
|
선택자 [속성=값][속성=값] |
특정 속성 안의 값이 특정값과 같은 문서객체를 선택한다 |
- <!DOCTYPE html>
- <html>
- <head>
- <title>CSS3 Selector Basic Page</title>
- <style>
- /* input 태그 중에서 type 속성을 text로 갖는 태그의 background 속성에 red 키워드를 적용합니다.*/
- input[type=text] { background: red; }
- /* input 태그 중에서 type 속성을 password로 갖는 태그의 background 속성에 blue 키워드를 적용합니다.*/
- input[type=password] { background: blue; }
- </style>
- </head>
- <body>
- <form>
- <input type="text" />
- <input type="password" />
- </form>
- </body>
- </html>
코드를 실행하면 type의 속성에 따라 다른 스타일이 적용됩니다
2. 문자열 속성선택자
| 선택자 | 설명 |
|
선택자 [속성~=값] | 속성 안의 값을 단어로 포함하는 문서객체를 선택 |
|
선택자 [속성이름*=값] |
속성 중 값이 조금이라도 포함되어있으면 선택 |
|
선택자 [속성이름^=값] |
속성 중 값으로 시작하는 것만 선택 |
| 선택자 [속성이름$=값] |
속성 중 값으로 끝나는 것만 선택 |
- p[name*="my"] {font-size:20px} → my가 포함된 <p>요소에 적용된다. ex.textmycar
- p[name^="my"] {font-size:20px} → my로 시작하는 <p>요소에 적용된다 ex.mycar
- p[name$="my"] {font-size:20px} → my로 끝나는 <p>요소에 적용된다 ex.carmy
- img[src] {border:1px solid red}
- img[src*="my"] {border:1px solid red} → my라는 단어가 조금이라도 포함된 이미지
- img[src^="my"] {border:1px solid red} → my라는 단어가 시작된 이미지
- img[src$="jpg"] {border:1px solid red} → jpg로 끝나는 이미지
- table[border]
8. CSS 자손선택자 >, 동위 선택자 +, ~
> 자손선택자, 이 선택자는 첫번째 요소가 부모인 경우에 두번째 요소를 참조한다.
+ 동일부모상의 형제요소중 다음형제
~ 동일부모상의 형제요소
- <!DOCTYPE html>
- <html>
- <head>
- <title>CSS3 Selector Basic</title>
- <style>
- /* h1 태그의 바로 뒤에 위치하는 ul 태그의 color 속성에 red 키워드를 적용합니다. */
- h1 + ul { color: red; }
- /* h1 태그의 뒤에 위치하는 p태그의 background-color 속성에 orange 키워드를 적용합니다. */
- h1 ~ p { background-color: orange; }
- </style>
- </head>
- <body>
- <h1>h1</h1>
- <ul>
- <li>li-1</li>
- <li>li-1</li>
- </ul>
- <ul>
- <li>li-2</li>
- <li>li-2</li>
- </ul>
- <P>p</P>
- </body>
- </html>
CSS 반응선택자
:hover, :active
CSS 링크선택자
:link, :visited
CSS 상태선택자
:focus
:enabled - 사용 가능한 사용자 인터페이스 요소
:disabled - 사용 불가능한 사용자 인터페이스 요소
:checked - 선택되거나 눌린 라디오 버튼 또는 체크박스
CSS 문자선택자
::first-letter
::first-line
::after
::before
::selection
- h1::first-letter {font-size:250%} → h1의 첫번째 글자 한자만 포인트를 키워라
- p::first-line {font-size:250%} → 단락에서 첫번째 줄의 문장만 포인트를 키워라
CSS 구조적 유사(가상)클래스 :nth-child
- li:nth-child(odd) {background:yellow} → 홀수열의 배경색만 노란색으로 바꿔라
- li:nth-child(even){background:red} → 짝수열의 배경색만 빨강색으로 바꿔라
- li:last-child {padding-bottom:30px} → 마지막 li요소만 하단 여백을 주어라
- :not(p) {margin:0px} → 부정유사클래스, <p>를 제외한 모든 요소에 스타일을 적용해라
- :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) - 괄호 안의 선택자에 매치되지 않는 요소를 선택
'공부 > CSS' 카테고리의 다른 글
| CSS 3장 } 선택자 예시 : 상태선택자 . 보이고 사라지기 (0) | 2012.12.18 |
|---|---|
| CSS 2장 } 선택자 예시 : 상태선택자 . 로그인폼 (0) | 2012.12.18 |
| HTML5 (0) | 2012.12.04 |