css 의 pseudo-class 공부하기 / 버튼 만들기

 

css pseudo-class 를 공부하기 이전에 버튼을 하나 만들어 보겠습니다.

 

 

 

<button class="btn">제출하기</button> .btn {   padding: 15px;   font-size: 25px;   border: none;   border-radius: 10px;   font-family: 'Do Hyeon', sans-serif;   background-color: tomato;   color: white;   cursor: pointer; } .btn:hover {   background-color: brown; } .btn:focus {   background-color: rgb(88, 88, 88); } .btn:active {   background-color: rgb(255, 0, 0);   border: 1px solid black; }

 

pseudo-class 셀렉터를 붙이면 여러 상태에 따른 스타일을 지정해줄 수 있습니다.

hover, focus, active 스타일 넣을 때 순서는 꼭 이렇게 선언해야 잘 동작합니다.

1. hover : 마우스를 올려 놓을 때

2. focus : 클릭 후 포커스 상태일 때

3. active : 누르고 있는 상태일 때

 

 

만약 인풋에 커서가 찍혀 있을 때 스타일을 주고 싶다면?

포커스를 사용하면 됩니다.

input:focus {   border : 2px solid red; }

 

 

a 태그 방문 전, 후에 스타일을 다르게 하고 싶다면??

a:link {   color : red; /*방문 전 링크*/ } a:visited {   color : black; /*방문 후 링크*/ }

 

기타 정리

:any-link /*방문 전, 방문 후 링크 한번에 선택할 때*/ :playing /*동영상, 음성이 재생중일 때*/ :paused /*동영상, 음성이 정지시*/ :autofill /*input의 자동채우기 스타일*/ :disabled /*disabled된 요소 스타일*/ :checked /*체크박스나 라디오버튼 체크되었을 때*/ :blank /*input이 비었을 때*/ :valid /*이메일 input 등에 이메일 형식이 맞을 경우*/ :invalid /*이메일 input 등에 이메일 형식이 맞지 않을 경우*/ :required /*필수로 입력해야할 input의 스타일*/ :nth-child(n) /*n번째 자식 선택*/ :first-child /*첫째 자식 선택*/ :last-child /*마지막 자식 선택*/