12. [CSS] Pseudo - class

이번 포스팅에서는 [Pseudo-class]에 대해서 알아보겠습니다. 

 

Pseudo-class

.클래스명:예상동작{

}

 

개념을 나열하는 식이 아닌 실제로 만들어보면서 알아보겠습니다. 

 

 

예제1. 버튼 색상 변경

 

버튼은 유저가 누르고 싶게 끔 만들어야 한다. 

1. 원래의 버튼 상태입니다. 

 

 

click 이전, 마우스를 가져다가 올림

2. 버튼에 마우스 커서를 가져다 올렸을 때 색깔을 변하게 합니다. (hover) 

click 중, 마우스를 클릭하고 손가락을 떼기 이전

 

 

 

 

3. 버튼에 마우스 커서를 클릭하고 손가락을 떼기 이전까지 색을 설정합니다. (active) 

 

click 이후, 마우스 클릭하고 손가락 뗀 이후

 

4. 손가락을 뗀 이후, 버튼의 색상 변경입니다. (focus) 

 

 

 

 

 

 

CSS

.btn-style {
    padding: 20px;
    background-color: coral;
    color : white;
    border-radius: 5px;
    border:none;
    font-size : 15px;
    cursor : pointer;
/*  cursor : pointer -> 버튼에 마우스 올리면 손가락 모양으로 변경*/
}

/*순서 : hover -> focus -> active  */
.btn-style:hover{ /* 버튼에 마우스를 올렸을 때*/
    background-color: chocolate;
}

.btn-style:focus { /* Click 후 : 클릭 이후에 버튼의 색깔 변경 */
    background-color: red;
}

.btn-style:active { /* Click 중 :마우스 올리고 클릭~손가락 떼기 전 까지 색 변경*/
    background-color: brown;
}

 

실제로 동작하는 순서 : [hover - active - focus]
코딩하는 순서 : [hover - focus - active]   

실제로 동작하는 순서는 [hover - active - focus] 입니다. 

하지만, 위 순서로 입력하면 제대로 작동을 안할 수 있습니다. 

따라서, [hover - focus - active] 순으로 코딩합시다!

 

예제 2. 링크 디자인 변경

 

HTML

<a class='mylink' href="e">Edit Your shopping Cart</a>

 

CSS

.mylink{ /* 링크 밑줄 제거*/
    text-decoration: none;
}

.mylink:link{ /*링크 클릭 전, 검은색*/
    color : black;
}

.mylink:visited{ /*링크 클릭 후, 아쿠아색으로 변경*/
    color : aqua;
}

 

클릭 전

 

클릭 후