CodeGym/행동/Frontend SELF KO/요소의 상태 스타일링

요소의 상태 스타일링

사용 가능

10.1 가상 클래스 :focus

CSS 가상 클래스는 요소를 다양한 상태에서 스타일링 할 수 있는 멋진 도구야. 이걸 활용하면 사용자와 웹 페이지의 폼 및 다른 인터랙티브 요소들과의 상호작용을 개선할 수 있어. 가상 클래스 :focus, :hover, :disabled, 그리고 :checked를 입력 요소 (<input>) 스타일링에 어떻게 사용할 수 있는지 알아보자.

:focus 가상 클래스는 폼 요소가 포커스를 받을 때 적용돼. 보통 요소를 클릭하거나 Tab 키를 사용해 이동할 때 발생하지. 포커스된 요소 스타일링은 사용자가 폼에서 더 잘 탐색할 수 있도록 도와줘.

사용 예시:

CSS
input:focus {
  border-color: #4A90E2;
  box-shadow: 0 0 5px rgba(74, 144, 226, 0.5);
  outline: none;
}
HTML
<form>
  <label for="name">이름:</label>
  <input type="text" id="name" name="name">
</form>

설명

  • border-color: 요소가 포커스를 받을 때 테두리 색을 변경해
  • box-shadow: 요소 주위에 그림자 효과를 추가해 강조해줘
  • outline: 기본 브라우저 테두리를 없애고 커스텀 스타일로 바꿔줘

10.2 가상 클래스 :hover

:hover 가상 클래스는 사용자가 요소 위에 마우스를 올릴 때 적용돼. 이건 요소와 상호 작용할 때 시각적 피드백을 제공하는 데 유용해.

사용 예시:

CSS
input:hover {
  border-color: #50E3C2;
  background-color: #F0F8FF;
}
HTML
<form>
  <label for="email">이메일:</label>
  <input type="email" id="email" name="email">
</form>

설명

  • border-color: 요소 위에 커서가 있을 때 테두리 색을 변경해
  • background-color: 커서가 있을 때 요소의 배경색을 변경해줘

10.3 가상 클래스 :disabled

:disabled 가상 클래스는 비활성화되어 사용자와 상호작용할 수 없는 폼 요소에 적용돼. 이건 사용자가 요소가 비활성화됐다는 걸 이해하는 데 도움이 돼.

사용 예시:

CSS
input:disabled {
  background-color: #E0E0E0;
  color: #A0A0A0;
  cursor: not-allowed;
}
HTML
<form>
  <label for="username">사용자 이름:</label>
  <input type="text" id="username" name="username" disabled>
</form>

설명

  • background-color: 비활성화된 요소의 배경색을 변경해 비활성화 상태를 나타내
  • color: 비활성화된 요소 안의 텍스트 색을 변경해
  • cursor: "not-allowed" 상태로 커서를 설정해 요소가 사용 불가임을 시각적으로 나타내줘

10.4 가상 클래스 :checked

:checked 가상 클래스는 checkboxradio 타입에서 선택된 상태에 있을 때 적용돼. 이건 선택된 요소를 스타일링해서 더 눈에 띄게 만들어 줘.

사용 예시:

CSS
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: #4A90E2;
  border-color: #4A90E2;
}
HTML
<form>
  <label>
    <input type="checkbox" name="option" checked>
    옵션 1
  </label>
  <label>
    <input type="checkbox" name="option">
    옵션 2
  </label>
  <label>
    <input type="radio" name="choice" checked>
    선택 1
  </label>
  <label>
    <input type="radio" name="choice">
    선택 2
  </label>
</form>

설명

  • background-color: 선택된 요소의 배경색을 변경해
  • border-color: 선택된 요소의 테두리 색을 변경해줘
1
과제
Frontend SELF KO,  레벨 9레슨 4
잠금
필드 포커스
필드 포커스
1
과제
Frontend SELF KO,  레벨 9레슨 4
잠금
커서 올리기
커서 올리기
코멘트
  • 인기
  • 신규
  • 이전
코멘트를 남기려면 로그인 해야 합니다
이 페이지에는 아직 코멘트가 없습니다