CSS의 속성 선택자(Attribute Selector)를 사용하면 특정 속성을 가진 HTML 요소에 원하는 스타일을 적용할 수 있습니다. 예를 들어 입력 필드의 type 값에 따라 각각 다른 디자인을 입히는 것이 가능하며, 클래스나 ID를 일일이 부여하지 않아도 되어 코드가 훨씬 깔끔해집니다.
속성 선택자의 기본 문법
속성 선택자에는 다음과 같은 규칙이 있습니다.
p[lang] − lang 속성을 가진 모든 p(문단) 요소를 선택합니다.
p[lang="fr"] − lang 속성값이 정확히 "fr"인 모든 p 요소를 선택합니다.
p[lang~="fr"] − lang 속성값에 "fr"이라는 단어가 포함된 모든 p 요소를 선택합니다. (공백으로 구분된 여러 값 중 하나일 때 유용)
p[lang|="en"] − lang 속성값이 정확히 "en"이거나 "en-"으로 시작하는 모든 p 요소를 선택합니다. (언어 코드 매칭에 주로 사용)
예제: CSS 속성 선택자로 폼 스타일링
다음은 속성 선택자를 활용해 텍스트 입력창, 비밀번호 입력창, 제출 버튼을 각각 다르게 스타일링한 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
input[type="text"] {
width: 300px;
display: block;
margin-bottom: 10px;
background-color: rgb(195, 250, 247);
font-size: 18px;
padding: 15px;
border: none;
}
input[type="submit"] {
padding: 10px;
font-size: 18px;
border: none;
outline: none;
background-color: rgb(75, 163, 16);
color: white;
}
input[type="password"] {
width: 300px;
padding: 10px;
background-color: red;
color: white;
border: none;
}
</style>
</head>
<body>
<h1>Css attribute selector example</h1>
<form>
<label for="fname">First name:</label><br />
<input type="text" id="fname" name="fname" value="Ron" />
<label for="lname">Last name:</label><br />
<input type="text" id="lname" name="lname" value="Shaw" />
<label for="pass">Password:</label><br />
<input type="password" id="pass" name="pass" value="password" />
<input type="submit" value="Submit" />
</form>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
텍스트 입력창(input[type="text"]): 너비 300px, 연한 청록색 배경, 15px 패딩이 적용되어 여유 있는 입력 환경을 제공합니다.
비밀번호 입력창(input[type="password"]): 빨간색 배경에 흰색 글자가 적용되어 텍스트 필드와 시각적으로 구분됩니다.
제출 버튼(input[type="submit"]): 초록색 배경에 흰색 텍스트로 강조되어 클릭을 유도합니다.
정리
속성 선택자는 HTML 구조를 수정하지 않고도 요소의 속성값만으로 대상을 정밀하게 선택할 수 있는 강력한 도구입니다. 특히 폼 컨트롤처럼 input 태그가 반복적으로 사용되는 경우, type 속성값에 따라 스타일을 분기 처리하면 유지보수성과 가독성이 크게 향상됩니다.