사용자 도구

사이트 도구


wiki:css:css_note:css_pseudo-class

문서의 이전 판입니다!


CSS Pseudo-classes

  • description : CSS Pseudo-classes
  • author : 오션
  • email : shlim@repia.com
  • lastupdate : 2021-03-29


What are Pseudo-classes?

의사 클래스(Pseudo classes, 쑤도우 클래스)는 요소의 특별한 샅애를 정의하기 위해 사용합니다.

예를 들어,

  • 사용자 마우스가 올려졌을 때 요소를 스타일링 하는 것
  • 방문(visited) 및 미방문(unvisited) 링크를 다르게 스타일링 하는 것
  • 포커스(focus)를 받을 때 요소를 스타일링 하는 것

에 사용할 수 있습니다.

Syntax

의사 클래스의 구문은 하기와 같습니다.

selector:pseudo-class { property: value; }


Anchor Pseudo-classes (의사클래스 고정하기)

링크는 다양한 방식으로 표시됩니다.

예제

CSS Links

CSS Links

This is a link 02

Note: a:hover come after a:link and a:visited in the CSS definition in order to be effective.

Note: a:active MUST cone after a:hover in the CSS definition in order to be effective.


Note:
a:hoverCSS 정의에서 a:linka:visited 뒤에 와야 효과적입니다.
a:activeCSS 정의에서 a:hover 뒤에 와야 효과적입니다.
의사 클래스 이름은 대소문자를 구분하지 않습니다.

Pseudo-classes and CSS Classes

의사 클래스는 CSS 클래스와 결합될 수 있습니다.

예제의 링크 위로 마우스를 가져 가면, 색상이 변경됩니다.

예제

Pseudo-clsses and CSS Classes

When you hover over the first link below, it will change color:

CSS Syntax

CSS Tutorial


Hover on <div>

다음은 <div> 요소 위의 :hover 의사 클래스를 사용하느 예제입니다.

예제

Mouse over the div element below to change its background color:

Mouse Over Me


Simple Tooltip Hover

<hover> 요소 위에 마우스를 가져가면 툴팁(tooltip) 처럼 <p> 요소를 나타냅니다.

예제

Hover over me to show the p element

Tada! Here I am!

/volume1/web/dokuwiki/data/attic/wiki/css/css_note/css_pseudo-class.1617014433.txt.gz · 마지막으로 수정됨: 2022/03/10 19:52 (바깥 편집)