pseudo-class

< button >, < a >, < put>등 클릭할 때 스타일을 다르게 줄 수 있다.

cursor: pointer - 마우스 올리면 손모양으로 바뀜

.btn:hover {
	background-color: 색이름;
}

클래스 명 옆에 :hover가 붙으면 마우스를 올렸을때 어떤 스타일을 입힐 지 결정할 수 있다.

.btn:active {

}

:active 는 클릭을 하고 있을 때 적용 할 스타일

.btn:focus {
	
}

:focus 는 클릭 한 이후에 커서가 찍혀있을 때 스타일

클래스 넣어줄때는 순서가 중요하다. 순서대로 안 넣어두면 제대로 작동하지 않는다고 한다..!

:hover
:focus
:active

이 순서로~

색상 뿐만 아니라 border 등등 여러가지 적용 가능하다고 한다.

button 태그 뿐만 아니라 input 태그에도 많이 사용한다고 한다.

a 태그에서 사용법

방문 전 링크 스타일링은 :link

.custom-link:link {
	color: 색상;
 }

방문 후 스타일링은 :visited

.custom-link:visited {
	
}

기타 등등

: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 - 마지막 자식 선택

Object Oriented CSS

class를 만들 때 뼈대용 class, 살점용 class를 따로 만들어서 조립해서 사용하면 유용하다.

예시

.main-btn {
padding: 15px;
font-size: 20px;
border: none;
cursor:pointer;
}

.bg-red {
background: red;
}

<button class="main-btn bg-red">

이런 식으로 기본 뼈대 디자인을 만들어 놓고 색상같은건 따로 넣어준다면 재사용에 유용하다.
CSS양이 줄어들고 유지보수에도 편리하다.

Utility class

.f-small {
	font-size: 12px;
 }
 .f-mid {
 	font-size: 16px;
 }
 .f-lg {
 	font-size: 20px;
 }

BEM

Block__Element--Modifier 룰 (CSS 작명 방식)

하지만 React, Vue로 HTML 다룬다면 딱히 신경 쓸 필요는 없다고 한다.

오늘로써 HTML CSS 초급 인강까지는 끝~~~ 중급모듈부터는 다른 공부들 힘겨워질때마다 머리 식히는 용도로 듣는걸로!