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 가상 클래스는 checkbox와 radio 타입에서 선택된 상태에 있을 때 적용돼. 이건 선택된 요소를 스타일링해서 더 눈에 띄게 만들어 줘.
사용 예시:
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: 선택된 요소의 테두리 색을 변경해줘
GO TO FULL VERSION