==============================================================================
링크와 관련된 가상 클래스 선택자
- 링크는 사용자에게 보일 때는 링크가 걸린 텍스트나 이미지일 뿐이지만, 실제로 링크에는 링크 위로
마우스를 올려놓았을 때나 링크를 클릭했을 때처럼 여러 가지 상황들이 존재
- 눈에 보이지는 않지만 링크와 관련해서 정의해야할 선택자들
:link 선택자 |
- 문서 안의 하이퍼링크 중에서 사용자가 아직 방문하지 않은 링크에 스타일을 적용 - 링크의 밑줄을 없애거나 색상을 바꾸려고 할 때 :link 선택자를 사용 |
ex) a:link { color:black; text-decoration:none; } |
:visited 선택자 |
- 링크 중에서 한 번 이상 방문한 링크에 대한 스타일을 적용 |
ex) a:visited { color:black; } |
:active 선택자 |
- 해당 요소가 활성화되었을 때의 스타일을 지정 - 링크 요소를 예로 들면, 링크를 클릭했을 때의 스타일을 지정할 경우에 사용 |
ex) a:active { color:black; } |
:hover 선택자 |
- 해당 요소 위로 마우스 포인터를 올려놓았을 때의 스타일을 지정 - 흔리 롤오버(rollover)를 만드는 선택자 |
ex) a:hover { color:red; text-decoration : underline; } |
:focus 선택자 |
- 해당 요소에 초점이 맞쳐졌을 때의 스타일을 지정 - 다음 예는 <p> 태그로 지정한 텍스트 단락 위로 마우스 포인터를 올려놓거나 TAB 키를 눌러 텍스트 단락까지 왔을 때(초점이 맞춰졌을 때) 텍스트 단락의 배경색을 바꾸는 스타일을 정의 |
ex) p:focus { background-color : yellow; } |
==============================================================================
==============================================================================
위치를 기준으로 하는 가상 클래스 선택자
- 메뉴를 만들 때 주로 <ul>태그와 <li>태그를 이용해 메뉴 항목을 표시
- 메뉴 표시 중에서 두 번째 메뉴 항목의 스타일을 바꾸고 싶다면 <ul> 태그의 두 번째 <li>태그 스타일을 지정,
가장 마지막에 있는 메뉴 항목의 스타일을 바꾸고 싶다면 마지막 <li>, 또는 끝에서 첫 번째<li> 태그의 스타일을 지정
- 즉 요소가 몇 번재 있느냐에 따라 스타일을 다르게 지정 가능
:root 선택자 |
- :root 선택자는 문서 안의 루트 요소에 스타일을 적용 - HTML 문서에서는 루트 요소가 HTML이므로 HTML 요소에 스타일이 적용 |
- 웹 문서 구조에서 최상단 요소, 즉 뿌리가 되는 부분은 <html> 태그 |
:nth-child(n) 와 :nth-last-child(n) 선택자 |
- 웹 문서에서 특정 부분에 스타일을 적용하려면 class나 id 선택자를 이용해서 이름을 붙여주고 클래스나 id에 대한 스타일을 정의하면 됨 - 하지만 여러 개의 항목이 일렬(가로나 세로)로 나열되어 있는 경우, class나 id를 사용하지 않고 스타일을 지정할 항목이 몇 번째에 있는지 따져서 스타일 적용 가능 - 주로 메뉴 항목에 이 선택자를 사용 - 즉 세 번째 있는 메뉴 항목이든 끝에 있는 메뉴 항목이든, 위치에 따라 원하는 요소를 찾아 스타일 지정 가능 - 위치에 따라 스타일을 적용하는 선택자는 해당 요소들이 모두 같은 한 부모 요소를 가지고 있어야함. - 문서 구조로 표시했을 때 모두 같은 레벨에 있는 요소라는 의미 - :nth-child(n) 는 n번째 자식 요소에 스타일을 적용 - :nth-last-child(n) 는 끝에서부터 세어 n번째인 자식 요소에 스타일을 적용 |
ex) div p:nth-child(3) => div 요소 안에서 3번째 자식 요소인 p 요소에 스타일 적용(세 번째 요소가 p 요소여야함...) ex) div p:nth-child(odd), div p:nth-child(2n+1) => div 요소 안에서 홀수 번째로 나타나는 자식 요소인 p요소에 스타일 적용 ex) div p:nth-child(even), idv p:nth-child(2n+0), div p:nth-child(2n) => div 요소 안에서 짝수 번째로 나타나는 자식 요소인 p 요소에 스타일 적용 |
:nth-of-type(n), :nth-last-of-type(n) 선택자 |
- 각 태그에 id나 class를 사용하지 않았다면, 몇 번째 있는 <p> 태그 또는 몇 번째 있는 <li> 태그처럼 몇 번째 있는 항목인지를 지정해서 스타일을 적용 - :nth-of-type(n) 은 앞에서 세어서 n번째 요소 - :nth-last-of-type(n) 은 끝에서부터 세어 n번째 나타나는 요소에 스타일을 적용 |
:first-child, :last-child 선택자 |
- :first-child는 첫 번째 자식 요소에 적용할 스타일 - :last-child는 마지막 자식 요소에 적용할 선택자 |
:first-of-type, :last-of-type 선택자 |
- 형제 관계에 있는 요소 중 first-of-type 첫 번째 요소, last-of-type 는 마지막 요소 |
ex) p:first-of-type { color : blue; } => 레벨이 같은 p 요소들 중 첫 번째 p 요소의 글자색을 파란색으로 지정 ex) p:last-of-type {color : red; } => 레벨이 같은 p 요소들 중 마지막 p 요소의 글자색을 빨간색으로 지정 |
:only-child, :only-of-type 선택자 |
- :only-child 는 부모 요소 안의 자식 요소가 유일하게 하나일 때 스타일을 적용 - :only-of-type 는 :only-child 와 비슷한데 해당 요소가 유일한 요소일 때 스타일을 적용 |
ex) p:only-child { color:green; } => 자식 요소가 오직 p 요소밖에 없을 때(다른 자식 요소가 있으면 안 됨) p 요소의 글자색을 녹색으로 표시 ex) p:only-of-type { font-weight : bold; } => p 요소가 오직 하나밖에 없을 때(다른 자식 요소가 있어도 됨) p 요소의 글자를 진하게 표시 |
:target 선택자 |
- 같은 사이트의 페이지나 다른 사이트의 페이지로 이동할 때 링크를 이용 - 같은 문서 안에서 다른 위치로 이동할 때는 앵커(anchor)를 이용 - :target 선택자를 이용해 앵커로 연결된 부분, 즉 앵커의 목저지가 되는 부분의 스타일 지정 가능 |
ex) #intro:target { background-color : yellow; } => 앵커 이름이 #intro 인 곳으로 링크하게 될 경우 #intro 의 배경색을 노란색으로 표시 |
:enabled, :disabled, :checked 선택자 |
- :enabled나 :disabled 가상 클래스 선택자를 사용하면 enabled 상태일 때와 disabled 상태일 때 각각에 맞도록 스타일을 선언 - :checked 클래스 선택자는 라디오 버튼이나 체크박스가 체크되었을 때 적용할 스타일을 지정 |
ex) textarea:disabled { cursor : pointer; } => textarea 인 텍스트 영역에 내용을 쓸 수 없는 상태일 경우(disabled), 그 영역에 마우스 포인터를 가져가면 내용을 입력할 수 있는 커서로 변하지 않고 포인터 형태로 표시하는 스타일을 정의 |
==============================================================================
==============================================================================
그 외의 가상 클래스
::before, ::after 선택자 |
- 특정한 요소의 내용 앞(::before)이나 뒤(::after)에 지정한 내용을 설정 |
ex) p::before { content : "내용"; } => <p> 태그로 지정한 모든 텍스트 단락 맨 앞에 "내용:" 이라는 내용을 추가 |
::selection 선택자 |
- 사용자가 마우스로 선택했을 때 커서가 드래그되어 선택되는 영역의 스타일을 지정 |
ex) ::selection { color : #00ff00; } => 마우스로 텍스트 부분을 드래그했을 때 해당 색상을 지정 |
:not 선택자 |
- 부정의 의미 - 여기에서의 not은 "괄호 안에 있는 요소를 제외한" 이란 의미 - 예를 들어, :not(p)라고 한다면 <p>태그가 적용되지 않는 모든 부분에 대해 스타일을 정의 |
ex) input:not([type="text"]) { width : 150px; } => input 요소 중 type 값이 "text"가 아닌 요소 너비를 150px로 ex) :not(h1) { color : blue; } => h1 요소가 아닌 모든 요소의 글자색으 파란색으로 지정 |
==============================================================================
'프로그래밍 정리 > Html5' 카테고리의 다른 글
| [Html5] CSS3와 브라우저 접두사(prefix) (0) | 2015.06.22 |
|---|---|
| [Html5][style] 선택자, 속성 선택자 (0) | 2015.06.18 |
| [Html5] '<input>태그' - type 속성 (0) | 2015.06.12 |
| [Html5] object 매개변수 종류 (0) | 2015.06.10 |
| [Html5] table - 태그 속성 (0) | 2015.06.06 |