Pseudo-classes

시작하며...

 css 스타일을 쓰다보면, 마우스클릭 후 발생하는 효과 혹은 테이블에 특정 컬럼에 마우스를 가져갔을때 효과등 동작에 대한 효과에 대해서 수행하는 경우가 빈번이 발생합니다. 각 태그 정의 후에 관련한 동작들은 항상 쓰고 있으나, 정리를 하지 못하여, 정의와 사용법에 대해서 정리해 보았습니다.

 

CSS Pesudo-classes는 사용자가 활성화한 요소(버튼)을 나타냅니다. 마우스를 사용하는 경우, "활성" =Active는 보통 마우스 버튼을 누르는 순간부터 뗴는 시점을 의미합니다.

 

:active

<a>,<button>과 함꼐 사용합니다.  뒤에 오는 (:link, :hover, :visted)가 덮어씁니다. 

디자인하려면, LVHA-순서(:link -> :visited -> :hover -> :active ) 따라 씁니다. :active 규칙을 다른 모든 링크 규칙들보다 뒤에 배치합니다. 

<p>
<a href="#"> 링크 사이트는 빨간색</a>
이 문단은 클릭하는 동안 배경색은 회색
</p>

a:link{color : blue;} /* 방문하지 않은 링크*/
a:visited { color : purple} /* 방문한 링크*/
a:horver{ background : yellow}/* 마우스 올린 링크*/
a:active { color : red} /* 활성화 링크*/

 

:focus

일반적으로 사용자가 클릭하거나, 탭을 눌러서 선택되었을 상황이 Focus가 됩니다

<input class="red-input" value="I'll be red when focused."><br>
<input class="blue-input" value="I'll be blue when focused.">

.red-input:focus {
  background: yellow;
  color: red;
}

.blue-input:focus {
  background: yellow;
  color: blue;
}

 

 

::after, ::before

CSS에서 ::after는 선택한 요소의 맨 마지막 자식으로 Pseucode 요소를 하나 생성 합니다.

보통 content 속성과 함께 짝지어, 요소에 장식용 콘텐츠를 추가 할 때 사용 합니다. 

기본형식은 아래와 같이 사용됩니다.  

a::after{
 content: "->";
}

a::before{
 content: "<-";
}

간단한 예제로는 아래와 같습니다.

<p class="boring-text">적당히 평범하고 심심한 글입니다.</p>
<p>지루하지도 흥미진진하지도 않은 글입니다.</p>
<p class="exciting-text">MDN 기여는 쉽고 재밌습니다.</p>

.exciting-text::after {
  content: " <- 흥미진진!";
  color: green;
}

.boring-text::after {
  content: " <- 먼지풀풀";
  color: red;
}

content 속성을 활용하여, 자유롭게 텍스트와 이미지등을 추가 할수 있습니다. 

javascript 없이 tooltip 구현도 가능합니다.

data-descr 사용자 설정 데이터 속성을 사용하여 툴팁을 구현합니다.