[TIL] CSS Break down (Hover, Active, Focus)

Pseudo class selector!!!

기본적으로 호버, 액티브, 포커스 모두 가상 클래스 선택자이다.
이는 결국 사용자와의 상호작용을 위해 사용한다.

Hover

요소위에 마우스를 올렸을 때 적용된다.

.btn {
  border: 2px solid black;
  border-raidus: 4px;
  background: red;
  color: white;
  /* 커서의 모양이 손가락으로 바뀜 */
  cursor: pointer;
  /* 전환을 눈으로 확인 가능 */
  transition: all 1s
}
.btn:hover {
  background: white;
  color: red; 
}

마우스를 오버하면 배경과 글자색이 반전된다!!

Active

요소를 실행할 때 적용된다.

.btn:active {
  background-color:#000;
}

위의 버튼이 눌렸을 때(실행할 때) 배경색상이 검정색으로 바뀐다!!

Focus

요소에 포커스가 있을 때(input, select) 적용된다.

input:focus {
  background-color:rgba(0,0,255,0.1);
}

input:focus::placeholder {
  color:red;
  font-weight:600;
}

input을 클릭하여 포커싱이 되자마자, 배경색상이 바뀌고, placeholder의 문구 색깔과 굵기가 바뀐다!!!(:focus와::placeholder를 섞어서도 쓸 수 있다.)

😎New!!

• 레이아웃 구성시 글들간의 간격은 마진이나 패딩보다는 line-height 를 습관화하자.
• box-shadow : x y 블러 컬러(투명도까지 가능); 띄어쓰기로 구분!
• 가상요소와 가상클래스를 어려워하지 말 것.
  • 가상요소와 가상클래스는 같이 쓸 수 있다.
  • .cont-company .list-coInfo dd:last-child::after
• BEM 방법론의 철저한 규칙을 따랐더라도, 부모를 두개정도 명시해주는 것이, 많은 코드에서 가시화효과가 좋다.
• inline속성들은 float을 알아본다.
• 클래스와 아이디의 이름이 같아도 상관없다.
• CSS Validator css leve3 + SVG 로 오류확인을 할 수 있다.