Computer >> 컴퓨터 >  >> 프로그래밍 >> CSS

CSS :focus 완벽 가이드 – 사용법과 실전 예제 총정리

CSS의 :focus 가상 클래스(pseudo-class)는 요소가 포커스 상태에 있을 때 해당 요소를 선택합니다. 사용자가 요소를 클릭하거나 Tab 키로 선택하면 요소가 포커스 상태가 되며, 이때 :focus로 정의한 스타일이 적용됩니다. :focus는 반드시 선택하려는 요소 이름 뒤에 작성해야 합니다.

웹 페이지에서 특정 요소가 포커스를 받았을 때만 스타일을 적용하고 싶은 경우가 종종 있습니다. 예를 들어, 사용자가 폼 필드를 클릭했을 때 해당 입력란에만 테두리를 표시하고 싶다면 어떻게 해야 할까요?

바로 이럴 때 CSS :focus 가상 클래스가 유용합니다. :focus는 사용자가 요소를 클릭하거나 Tab 키로 선택했을 때 스타일을 적용해 줍니다.

이 글에서는 CSS :focus 가상 클래스의 기본 개념과 실제 코드에서 활용하는 방법을 예제와 함께 살펴봅니다. 끝까지 읽으면 :focus를 활용해 포커스된 요소에 스타일을 적용하는 방법을 자유롭게 사용할 수 있게 될 것입니다.

CSS 가상 클래스(Pseudo-Class)란?

가상 클래스는 CSS 선택자에 추가하는 키워드로, 스타일이 적용되기 위해 요소가 가져야 할 상태를 지정합니다. 가상 클래스는 항상 선택자 뒤에 붙습니다.

가상 클래스를 사용하면 요소가 특별한 상태에 있을 때의 규칙을 정의할 수 있습니다. 예를 들어 요소에 포커스가 주어졌을 때, 마우스 커서가 올라갔을 때 등의 상황이 그렇습니다. 이 글에서는 그중에서도 :focus 가상 클래스에 집중해 알아보겠습니다.

CSS :focus 가상 클래스

CSS :focus 가상 클래스는 웹 페이지에서 요소가 포커스를 받았을 때 스타일을 적용합니다. 사용자가 요소를 클릭하거나 Tab 키로 선택하면 해당 요소는 포커스된 요소가 됩니다.

:focus 가상 클래스의 기본 문법은 다음과 같습니다.

textarea:focus {
	border: 1px solid blue;
}

이 코드는 웹 페이지의 모든 <textarea> 요소 주위에 1픽셀 두께의 파란색 실선 테두리를 설정합니다. 단, 이 규칙은 <textarea> 요소가 포커스 상태일 때만 적용됩니다.

코드에서 볼 수 있듯이 가상 클래스는 선택하려는 요소 이름 뒤에 붙습니다. 또한 여러 개의 선택자를 나열할 경우에는, :focus를 적용하고 싶은 각 요소마다 개별적으로 :focus 가상 클래스를 지정해야 한다는 점에 유의하세요.

다음 문법을 살펴보겠습니다.

input, textarea:focus {
	border: 1px solid blue;
}

위 코드의 CSS 규칙은 사용자가 텍스트 영역에 포커스를 맞출 때 모든 <textarea> 태그에 적용되지만, 포커스된 <input> 태그에는 적용되지 않습니다. 이는 :focus가 textarea 선택자에만 붙어 있기 때문입니다.

:focus 선택자가 가장 많이 사용되는 분야는 바로 웹 폼 스타일링입니다. 예를 들어, 사용자가 폼 필드를 클릭했을 때 배경색을 변경하거나 테두리 색상을 바꿔 입력 중인 필드를 시각적으로 강조할 수 있습니다.

:focus CSS 실전 예제

사용자의 이름을 입력받는 웹 폼 필드를 디자인해야 하는 상황을 가정해 보겠습니다. 요구 사항은 다음과 같습니다. 폼 필드가 포커스 상태가 되면 주황색 테두리가 적용되고, 배경색은 연한 회색(lightgray)으로 변경되어야 합니다.

다음 코드로 이 폼 필드를 구현할 수 있습니다.

<html>

<input class="textField" placeholder="First Name">

<style>

.textField:focus {
	background-color: lightgray;
	border: 2px solid orange;
}

위 코드에서는 textField라는 클래스 이름을 가진 HTML <input> 필드를 정의했습니다. 이 입력 필드에는 "First Name"이라는 플레이스홀더 텍스트가 표시됩니다.

사용자가 폼 필드에 포커스를 맞추면 .textField:focus 규칙의 CSS 속성들이 적용됩니다. 이 스타일은 연한 회색 배경색을 설정하고, 폼 필드 주위에 2픽셀 두께의 주황색 실선 테두리를 그려줍니다.

반대로 사용자가 폼 필드에서 포커스를 벗어나면(blur), 이러한 스타일은 더 이상 적용되지 않고 원래 상태로 돌아갑니다.

마무리

:focus 가상 클래스는 사용자가 웹 요소를 포커스 상태로 만들었을 때 스타일을 적용합니다. 특히 폼 필드에 포커스가 맞춰지는 순간 스타일을 트리거하는 용도로 널리 사용됩니다.

:focus는 :hover, :active, :visited처럼 다양한 CSS 가상 클래스 중 하나입니다. 가상 클래스를 사용하는 방법은 간단합니다. CSS 선택자 뒤에 가상 클래스 이름을 지정하기만 하면 됩니다.

CSS를 더 깊이 학습하고 싶다면 :hover, :active, :focus-visible 같은 관련 가상 클래스도 함께 익혀두세요. 이를 조합하면 키보드 사용자까지 고려한 접근성 높은 인터랙티브 UI를 설계할 수 있습니다.