CSS 쉽게 배우기 | Pseudo Class(수도 클라스) 1

CSS Pseudo Selector (수도 선택자) - CSS state(상태) 배우기

 

지금까지 여러가지의 CSS속성들과 사용방법, 그리고 반응형 디자인까지 알아봤습니다

그러나 한가지 아쉬운게 있다면, 스타일들이 재미가 없다는거죠

스타일들이 다 고정되있고, 뭔가 생동감이 없달까?

 

그래서 이번편에서는 지금까지 배운것들을 활용하면서 스타일에 생동감을 주는걸 알아볼게요

생동감을 주는데는 두가지 방법이 있는데요

하나는 요소의 상태에 따라서,

다른 하나는 애니메이션 입니다

 

이번편에서는 요소의 상태에 따라서 스타일을 바꾸는걸 알아볼거에요

 

CSS에서 요소의 상태란?

시작하기전에 먼저 집고 넘어갈게있죠?

요소의 상태란 뭘 말하는걸까요?

 

요소의 상태는 유저의 행동과 상호작용 하는걸 말합니다

유저가 마우스를 움직일때, 클릭할때, 키보드를 사용할때 CSS는 그 상태를 알수있고

그 상태를 이용해서 요소의 스타일에 변화를 줄수 있습니다

 

CSS에서는 이걸 pseudo selector (수도 선택자)라고 부릅니다

수도 선택자는 pseudo-class (수도 클래스)에 해당하는 속성이라고 할수있겠네요

수도 클래스에는 상태에 관련된 선택자, 일반 선택자의 연장선, 이렇게 두가지의 속성들이 있습니다

이번 편에서는 상태에 관련된 선택자들만 알아볼게요

 

코드 샘플들로 어떤 상태들이 있는지 알아볼게요

 

:hover (호버)

호버 상태는 마우스 커서가 요소 위에 올려져있는 상태를 말합니다

클릭한 상태아니고, 그냥 올려져있는 상태입니다

사용법은

div:hover{
	...
}

#input:hover {
	...
}

.container:hover {
	...
}

이렇게 선택자에 붙여서 사용하면 됩니다

 

그럼 이 선택으로 뭘 할수있을까요?

많은걸 할수있죠

배경색을 바꾼다던지, 넓이를 바꾼다던지, 등등

 

요소에 호버 선택자를 사용하여 자녀요소 또는 형제요소의 스타일에 변화를 줄수도 있습니다

.box:hover > .child-box {
	...
}

 

아래 샘플에서 확인해보세요

 

 

:focus (포커스)

포커스는 키보드 이벤트 또는 기타 사용자 입력을 허용하는 요소에만 허용됩니다

포커스 상태는 유저가 요소를 클릭했을때, 또는 사용자 입력이 요소에 주목되 있을때 나타나는 상태입니다

예를 들자면 <input>을 클릭했을때, 버튼을 클릭했을때, 키보드 탭(Tab)키로 요소에 초점이 맞춰졌을때, 요소의 포커스 상태를 사용할수 있습니다

 

호버 상태와 마찬가지로 자녀요소 또는 형제요소의 스타일을 바꿀수 있습니다

아래 샘플에서 확인해보세요

 

 

 

:active (액티브)

액티브 상태는 포커스와는 달리 거의 모든 요소와 사용가능합니다

액티브 상태는 요소를 클릭한 상태입니다

클릭을 놓는순간 이 상태는 해지됩니다

따라서 클릭을 유지하고 있는 상태에서만 사용할수있습니다

 

거의 모든 요소에 사용이 가능하지만 주로 포커스처럼 사용자 입력이 가능한 요소에 사용됩니다

액티브 역시 자녀요소 또는 형제 요소의 스타일을 바꿀수 있습니다

아래 샘플에서 확인해보세요

 

 

 

:visited (방문됨)

방문됨 상태는 링크에만 적용되는 상태입니다

링크만 가지고있는 유일한 두가지 상태가 있는데, 클릭 전과 후 입니다

스타일이없는 링크의 색은 파란색이고

클릭후에는 보라색으로 변합니다

 

주로 링크의 스타일은 클릭 전과 후가 같도록 스타일되는데

만약 유저가 클릭한 링크들을 알아보는게 중요한 케이스에 유용하게 사용할수있는 상태입니다

 

아래 샘플에서 확인해보세요

 

 

 

:checked (선택됨)

이 상태는 선택 요소에 사용할수있는 상태입니다

여기서 선택 요소는 <input type="radio"> 와 <input type="checkbox">를 말합니다

<select>요소에는 적용되지 않습니다

 

<input> 요소에만 사용되기 때문에 주로 본 요소나 형제 요소의 스타일을 바꿀때 사용됩니다

아래 샘플에서 확인해보세요

 

 

 

오늘은 HTML요소의 상태를 사용한 CSS를 알아봤습니다

이 상태들을 잘 이용해서 생동감있는 디자인을 해보세요

 

궁금한게있으면 댓글 남겨 주세요

 

 

수고하셨습니다

 

 

끝!