|
Javascript & JQuery & CSS > 가상클래스 - :link, :visited, :active, :hover, :focus, :not, :after, :before, nth-child(n) :nth-last-chil
A:link - 방문한 적이 없는 하이퍼링크
A:visited - 방문한 적이 있는 하이퍼링크
A:active - 실행 하이퍼링크 (마우스를 눌렀을 때의 상태)
A:hover - 마우스가 하이퍼링크로 올라갔을 때
1. 가상 클래스란 무엇일까?
가상 클래스는 슈도 클래스(pseudo class)라고도 하며, 웹 문서의 소스에는 실제로 존재하지 않지만 필요에 의해 임의로 가상의
선택자를 지정하여 사용하는 것을 말한다.
CSS3 이전에도 텍스트 링크의 밑줄을 없애거나 텍스트 링크의 색상을 원하는 색상으로 고정하기 위해서 몇 가지 가상 클래스가 사용되었다.
2. :link 선택자
문서 안의 하이퍼링크 중 사용자가 아직 방문하지 않은 링크에 스타일을 적용한다.
텍스트 링크는 기본으로 파란색 글자와 밑줄로 표시되며, 링크의 밑줄을 없애거나 색상을 바꾸려고 할 때 :link 선택자를 사용한다.
예)
a:link {
color:black;
text-decoration:none;
}
※ 위의 예는 a 태그로 링크를 건 부분 중 텍스트 링크를 밑줄 없이 검은색으로 표시하는 스타일을 정의한 것이다.
3. :visited 선택자
문서의 링크 중 한 번 이상 방문한 링크에 대한 스타일을 적용한다. 방문한 텍스트 링크는 기본으로 purple로 표시되며,
사용자가 방문했던 링크도 일반 텍스트 링크와 색상이 달라지지 않게 하려면 :visited 선택자를 사용하여 조절한다.
예)
a:visited {
color:black;
}
※ 위의 예는 a 태그로 링크를 건 부분 중 방문했던 링크는 검은색으로 표시하는 스타일을 정의한 것이다.
4. :active 선택자
해당 요소가 활성화되었을 때 스타일을 지정한다. 링크 요소를 예로 들자면, 링크를 클릭했을 때 스타일 지정할 경우에 사용한다.
예)
a:active {
color:black;
}
※ 위의 예는 a 태그로 링크를 건 부분을 클릭하는 순간 검은색 글자로 표시하는 스타일을 정의한 것이다.
5. :hover 선택자
해당 요소 위로 마우스 포인터를 올려놓았을 때 스타일을 지정한다. 롤오버 효과(rollover)를 만드는 선택자이며 CSS1부터 정의되어 있다.
예)
a:hover {
color:red;
text-decoration:underline;
}
※ 위의 예는 a 태그로 링크를 건 부분 중 텍스트 링크 위로 마우스 포인터를 올려놓으면 밑줄과 함께 빨간색으로 표시되도록 정의한 것이다.
6. :focus 선택자
해당 요소에 포커스가 맞춰졌을 때의 스타일을 지정한다.
아이디를 입력하기 위해 텍스트 필드 안에 마우스 커서를 갖다 놓거나 [TAB] 키를 눌러 초점을 이동했을 때 포커스가 맞춰진다. 이 선택자는 CSS2에 정의되어 있다.
예1)
p:focus {
background-color:yellow;
}
※ 위의 예1은 p 태그로 지정한 텍스트 단락 위로 마우스 포인터를 올려놓거나 키보드의 [TAB] 키를 눌러 텍스트 단락까지 왔을 때
텍스트 단락의 배경색을 바꾸는 스타일을 정의한 것이다.
7. :root 선택자
:root 선택자는 문서 내 루트 요소에 스타일을 적용한다.
HTML 문서에서는 루트 요소가 HTML이므로 HTML 요소에 스타일이 적용된다. 웹 문서 구조에서 최상단 요소는 <html> 태그이다.
문서 안에 전체적으로 똑같이 적용할 스타일이 존재할 경우 :root 라는 선택자를 사용해서 지정할 수 있다. :root 선택자는 CSS3부터 정의되었다.
8. :nth-child(n)와 :nth-last-child(n)
웹 문서에서 특정 부분에 스타일을 적용하려면 class나 id 선택자를 사용해 이름을 붙여주고 해당 클래스나 id에 대한 스타일을 정의하면 된다.
하지만 여러 개의 항목이 일렬로 나열된 경우, class나 id를 사용하지 않고 스타일을 지정할 항목이 몇 번째에 있는지 따져서 스타일을 적용할 수 있다.
주로 메뉴 항목에 이 선택자를 사용한다. 예를 들어, 세 번째에 존재하는 메뉴 항목이든 끝에 있는 메뉴 항목이든, 위치에 따라 원하는 요소를 찾아 스타일을 지정할 수 있다.
위치에 따라 스타일을 적용하는 선택자는 해당 요소들이 모두 한 부모 요소를 가지고 있어야 한다. (문서 구조 상 모두 같은 레벨에 있는 요소라는 의미이다.)
:nth-child(n)는 n번째 자식 요소에 스타일을 적용하고,
:nth-last-child(n)은 끝에서부터 세어 n번째 자식 요소에 스타일을 적용한다. an+B와 같이 수식을 사용할 수 있는데,
이때 n값은 0에서부터 차례대로 정수를 대입해서 계산한다. 이 선택자들은 CSS3에 정의되어 있다.
※ :nth-child 선택자는 다음과 같이 다양히 활용 가능하다
/* div 요소 안에서 3번째 자식 요소인 p요소에 스타일 적용 */
div p:nth-child(3)
/* div 요소 안에서 홀수 번째로 나타나는 자식 요소인 p 요소에 스타일 적용 */
div p:nth-child(odd), div p:nth-child(2n+1)
/* div 요소 안에서 짝수 번째로 나타나는 자식 요소인 p 요소에 스타일 적용 */
div p:nth-child(even), div p:nth-child(2n+0), div p:nth-child(2n)
9. :nth-of-type(n), :nth-last-of-type(n) 선택자
p 태그가 여러 개 나열되어 있거나 li 태그가 여러 개 나열되어 있고 각 태그에 id나 class를 사용하지 않는다면,
몇 번째에 있는 p 태그처럼 몇 번째 있는 항목인지를 지정해 스타일을 적용한다. :nth-of-type(n)은 앞에서 세어서 n번째 요소이며,
:nth-last-of-type(n)은 끝에서부터 세어 n번째 나타나는 요소에 스타일을 적용한다.
10. :first-child, :last-child 선택자
:first-child는 첫 번째 자식 요소에 적용할 스타일이다.
:last-child는 마지막 자식 요소에 적용할 선택자이다.
:first-child는 CSS2.1부터, :last-child는 CSS3에 정의되어 있다.
11. :fist-of-type, :last-of-type
형제 관계에 있는 요소 중에서 first-of-type은 첫 번째 요소에 스타일을 적용한다.
형제 관계에 있는 요소 중에서 last-of-type은 마지막 요소에 스타일을 적용한다.
예1)
p:first-of-type {
color:blue;
}
※ 레벨이 같은 p 요소들 중 첫 번째 p 요소의 글자색을 파란색으로 지정하는 선택자이다.
예2)
p:last-of-type {
color:red;
}
※ 레벨이 같은 p 요소들 중 마지막 p 요소의 글자색을 빨간색으로 지정하는 선택자이다.
12. :only-child, :only-of-type
:only-child는 부모 요소 안의 자식 요소가 유일하게 하나일 때 스타일을 적용한다.
:only-of-type은 :only-child와 비슷한데 해당 요소가 유일한 요소일 때 스타일을 적용한다.
:only-child와 :only-of-type은 CSS3부터 정의되어 있다.
p:only-child {
color:blue;
}
※ 위의 예는 자식 요소가 오직 p 요소밖에 없을 때 p 요소의 글자를 파랑색으로 한다.
p:only-of-type {
font-weight:bold;
}
※ 위의 예는 p 요소가 오직 하나밖에 없을 때 p요소의 글자를 진하게 표시한다.
13. :target 선택자
웹 문서에서 같은 사이트의 페이지나 다른 사이트 페이지로 이동할 때 링크를 사용하고, 같은 문서 안에서 다른 위치로 이동할 때는 앵커(anchor)를 사용한다.
:target 선택자를 사용해 앵커로 연결된 부분, 즉 앵커의 목적지가 되는 부분의 스타일을 지정한다.
예)
#intro:target {
background-color:red;
}
※ 위의 예에서 앵커 이름이 #intro인 곳으로 링크하게 될 경우 #intro의 배경색을 빨간색으로 표시한다.
14. :enabled, :disabled, :checked
:enabled와 :disabled는 요소 중 사용할 수 있는 상태(:enabled)와 사용할 수 없는 상태(:disabled)의 스타일을 지정한다.
여러 줄의 텍스트를 입력할 수 있는 텍스트 영역 필드(textarea 필드)는 게시판 입력 화면으로 사용할 때, 사용자가 입력할 수
있도록 enabled 상태이지만, 회원 약관 등을 보여줄 땐 사용자가 내용을 보기만 해야 하므로 disabled 상태로 만들 수 있다.
이때 :enabled와 :disabled 가상 클래스 선택자를 사용하여 사용할 수 있는 상태와 사용할 수 없는 상태 각각에 맞도록 스타일을 적용할 수 있다.
:checked 클래스 선택자는 라디오 버튼이나 체크박스가 체크되었을 때 적용할 스타일을 지정한다. 이 클래스 선택자들은 CSS3부터 정의되었다.
예)
textarea:disabled {
cursor:pointer;
}
※ 위의 예에서 textarea인 텍스트 영역에 내용을 쓸 수 없는 상태일 경우, 해당 영역에 마우스 포인터를 가져가면 내용을 입력할 수
있는 커서로 변하지 않고 포인터 형태로 표시하는 스타일을 정의한 것이다.
15. ::before, ::after
특정한 요소의 내용 앞(::before) 혹은 뒤(::after)에 지정한 내용을 만들 수 있다. 요소의 앞 혹은 뒤에 텍스트나 이미지 등을 추가할 수 있다. CSS2부터 정의되었다.
예)
p::before {
content:"내용:";
}
※ 위의 예는 p 태그로 지정한 모든 텍스트 단락 맨 앞에 "내용:" 이라는 내용을 추가한다.
16. ::selection
사용자가 마우스로 선택했을 때 커서가 드래그되어 선택되는 영역의 스타일을 지정한다. CSS3부터 정의되었다.
예)
::selection {
color:#00ff00;
}
※ 마우스로 텍스트 부분을 드래그했을 때 해당 색상을 지정한다.
17. :not
:not 선택자는 부정의 의미를 가진다. not은 "괄호 안에 있는 요소를 제외한" 이란 의미를 가진다.
예를 들어보자. :not(p)라고 한다면 p 태그가 적용되지 않는 모든 부분에 대해 스타일을 정의하는 것이다.
예1)
:not(h1) {
color:red;
}
※ 위의 예1은 h1 요소가 아닌 모든 요소의 글자색을 빨간색으로 지정하는 스타일이다.
|
|
||||
|
이메일 문의 : cak0280@nate.com Copyright 2000 By ENTERSOFT.KR All Rights Reserved. |