• 빠른 이동을 원하시면, 아래 키워드를 클릭하세요!

🌿 커스텀 토글

이벤트 관련 가상 선택자 hover, active, focus, checked

이벤트 관련 가상 선택자는 특정 상태나 이벤트에 따라 스타일을 적용하는 기능을 제공합니다! 사용자와

• hover

  사용자가 마우스를 특정 요소 위에 올렸을 때 적용되는 스타일을 정의할 수 있습니다. 주로 버튼, 링크 와 같은 요소에 사용하여 사용자에게 피드백을 주기 위해 사용 된답니다.

  button:hover {
  	background-color: lightblue; // 마우스 올렸을 때 배경색이 변경됩니다.
  }
  

• active

  사용자가 요소를 클릭하고 있는동안(클릭이 한 번 되었을 경우) 적용되는 스타일을 정의합니다. 클릭할 수 있는 버튼, 링크에 대해 눌리는 효과를 주어 사용자에게 피드백을 제공하게 됩니다.

  button:active {
  	 transform: scale(0.95);// 마우스 클릭했을때 약간 작아집니다.
  }
  

• focus

  요소가 포커스 된 상태일 때 적용하는 스타일을 정의할 수 있습니다. 주로 키보드나 마우스를 통해 사용자가 요소를 선택할때 사용됩니다. 입력필드나 버튼 등을 클릭했을 때 사용하여, 사용자에게 현재 선택된 요소를 알려줄 때 사용되요.

  input:focus {
      border: 2px solid blue; /* 입력 필드에 포커스가 갔을 때 테두리 색상 변경 됩니다. */
  }
  

• checked

  체크박스나 라디오 버튼 같이 선택 가능한 요소가 선택 되었을 때 적용되는 스타일을 정의합니다. 사용자에게 어떤 것이 선택되었는지를 보여줄 수 있어요.

  input[type="checkbox"]:checked {
      background-color: green; /* 체크박스가 선택되었을 때 배경색 변경 합니다.*/
  }
  

디자인 관련 가상선택자 after, before

::after 와 ::before 가상 선택자는 요소의 컨텐츠 앞이나 뒤에 추가적인 내용을 삽입할 수 있게 해주는 기능입니다. 주로 특정 스타일을 적용할 때 사용되고 있어요. 이를 통해 디자인을 더욱 풍부하게 만들고, 사용자 경험을 향상시킬 수 있답니다.

• ::after

  선택한 요소의 컨텐츠 뒤에 가상의 컨텐츠를 추가 하는데 사용됩니다. 주로 장식적 요소나, 추가적인 정보를 삽입할 때 활용됩니다. 실제 HTML 마크업을 변경하지 않고도 요소의 뒤에 내용을 추가할 수 있습니다. content 속성을 통해 정의됩니다.

  h2::after {
      content: " ✔"; /* 체크 표시를 추가 */
      color: green;  /* 체크 표시의 색상 */
  }
  

• ::before

  선택한 요소의 컨텐츠 앞에 가상의 컨텐츠를 추가하는데 사용됩니다. 아이콘, 장식, 텍스트 등을 추가하여 요소를 꾸미거나 강조하는데 사용 됩니다.

  h1::before {
      content: "★ "; /* 별표를 추가 */
      color: gold;    /* 별표 색상 설정 */
  }
  

📝 실습 코드