1. 속성 선택자 종류
CSS의 속성 선택자는 id, class, name, type 등과 같은 속성 값을 기준으로 HTML 요소를 선택할 수 있게 해줘. 이 선택자는 스타일을 지정할 때 특히 폼 요소나 링크처럼 고유 속성을 가진 요소를 지정하는 데 유용해. 이번 글에서 다양한 속성 선택자와 그 사용법을 살펴보자.
속성 선택자는 속성의 존재 여부, 특정 값 또는 값의 일부를 기준으로 요소를 선택할 수 있도록 여러 카테고리로 나뉘어. 주요 속성 선택자의 종류는 다음과 같아:
- 속성 선택자: 값에 상관없이 특정 속성이 있는 요소를 선택해.
- 속성 값 선택자: 지정된 값과 동일한 값을 가진 속성이 있는 요소를 선택해.
- 시작 값 선택자: 속성 값이 특정 접두사로 시작하는 요소를 선택해.
- 끝 값 선택자: 속성 값이 특정 접미사로 끝나는 요소를 선택해.
- 값 포함 선택자: 속성 값에 특정 문자열이 포함된 요소를 선택해.
- 공백으로 구분된 값 선택자: 공백으로 구분된 특정 단어를 포함하는 속성 값을 가진 요소를 선택해.
- 하이픈으로 구분된 속성 선택자: 속성 값이 특정 단어로 시작하고 하이픈으로 구분된 경우에 선택해.
2. 속성 선택자 (Attribute Selector)
속성 선택자는 값과 상관없이 특정 속성이 존재하는 요소를 선택해. 이 선택자는 특정 속성을 가진 모든 요소를 선택해야 할 때 유용해.
input[type] {
border: 1px solid black;
}
<input type="text">
<input type="password">
<input type="email">
<input>
이 예제에서 type 속성이 있는 모든 <input> 요소가 속성 값과 상관없이 검은색 테두리를 얻게 돼.
3. 속성 값 선택자
속성 값 선택자는 특정 값과 같은 값을 가진 속성이 있는 요소를 선택해. 이를 사용해 특정 값의 속성을 가진 요소들만 선택할 수 있어, 예를 들어 특정 텍스트 상자나 새 탭에서 열리는 링크를 선택할 때 유용해.
input[type="text"] {
background-color: #f0f0f0;
}
<input type="text">
<input type="password">
<input type="email">
여기서 텍스트 상자 <input type="text"> 만이 밝은 회색 배경을 가지게 돼.
4. 속성 시작 값 선택자
속성 시작 값 선택자는 속성 값이 특정 접두사로 시작하는 요소를 선택해. 접두사는 ^= 기호 다음에 지정돼. 이 선택자는 특정 사이트로 연결되는 모든 링크를 선택할 때 유용해.
a[href^="https://example.com"] {
color: green;
}
<a href="https://example.com/page1">example.com 링크</a>
<a href="https://another.com">다른 링크</a>
첫 번째 링크는 "https://example.com" 으로 시작하기 때문에 초록색으로 표시돼.
5. 속성 끝 값 선택자
속성 끝 값 선택자는 속성 값이 특정 접미사로 끝나는 요소를 선택해. 접미사는 $= 기호 다음에 지정돼. 이 선택자는 특정 파일 형식, 예를 들어 .png 이미지를 선택할 때 유용해.
img[src$=".png"] {
border: 2px solid blue;
}
<img src="image1.png" alt="이미지 1">
<img src="image2.jpg" alt="이미지 2">
여기서 .png 확장자를 가진 이미지만 파란색 테두리를 얻게 돼.
6. 속성 값 포함 선택자
속성 값 포함 선택자는 속성 값에 특정 문자열이 포함된 요소를 선택해. 문자열은 *= 기호 다음에 지정돼. 이 선택자는 속성 값에 특정 부분을 포함하는 요소를 선택해야 할 때 유용해, 예를 들어 특정 섹션으로 연결되는 링크.
a[href*="section"] {
font-weight: bold;
}
<a href="https://example.com/section1">섹션 1로 링크</a>
<a href="https://example.com/about">소개</a>
<a href="https://example.com/section2">섹션 2로 링크</a>
"section" 을 href 에 포함하는 링크만 굵은 글씨체로 표시돼.
7. 공백으로 구분된 값 선택자
공백으로 구분된 값 선택자는 공백으로 분리된 특정 단어를 포함하는 속성 값을 가진 요소를 선택해. ~= 기호를 사용해. 이 선택자는 여러 값으로 구성된 속성을 가진 요소를 선택할 때, 예를 들어 특정 클래스를 가진 요소를 선택할 때 유용해.
[class~="featured"] {
background-color: yellow;
}
<div class="featured item">"featured" 클래스가 포함된 요소</div>
<div class="item">일반 요소</div>
<div class="highlight featured">"featured" 클래스를 포함하는 다른 요소</div>
featured 를 클래스 목록에 포함하는 요소만 노란색 배경색을 얻게 돼.
8. 하이픈으로 구분된 속성 선택자
하이픈으로 구분된 속성 선택자는 속성 값이 특정 값으로 시작하고 하이픈으로 구분된 경우에 요소를 선택해. |= 기호를 사용해. 이 선택자는 언어 속성 lang 값을 가진 요소를 선택할 때 유용해.
[lang|="en"] {
color: blue;
}
<p lang="en">영어 텍스트</p>
<p lang="en-us">미국 영어 텍스트</p>
<p lang="fr">프랑스어 텍스트</p>
여기서 lang 속성이 "en" 또는 "en-" 로 시작하는 요소만 파란색으로 표시돼.
9. 다양한 속성 선택자의 예시
아래는 다양한 속성 선택자의 사용을 보여주는 HTML과 CSS 예제야.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 속성 선택자 예시</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input type="text" placeholder="텍스트 입력창">
<input type="password" placeholder="비밀번호">
<input type="email" placeholder="이메일">
<a href="https://example.com/page1">example.com 링크</a>
<a href="https://example.com/section2">섹션 링크</a>
<img src="image.png" alt="PNG 이미지">
<img src="photo.jpg" alt="JPG 이미지">
<div class="featured item">"featured" 클래스가 포함된 요소</div>
<div class="item">일반 요소</div>
<div class="highlight featured">"featured" 클래스를 포함하는 다른 요소</div>
<p lang="en">영어 텍스트</p>
<p lang="en-us">미국 영어 텍스트</p>
<p lang="fr">프랑스어 텍스트</p>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>CSS 속성 선택자 예시</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<input type="text" placeholder="텍스트 입력창">
<input type="password" placeholder="비밀번호">
<input type="email" placeholder="이메일">
<a href="https://example.com/page1">example.com 링크</a>
<a href="https://example.com/section2">섹션 링크</a>
<img src="image.png" alt="PNG 이미지">
<img src="photo.jpg" alt="JPG 이미지">
<div class="featured item">"featured" 클래스가 포함된 요소</div>
<div class="item">일반 요소</div>
<div class="highlight featured">"featured" 클래스를 포함하는 다른 요소</div>
<p lang="en">영어 텍스트</p>
<p lang="en-us">미국 영어 텍스트</p>
<p lang="fr">프랑스어 텍스트</p>
</body>
</html>
/* 속성 선택자 */
input[type] {
border: 1px solid black;
}
/* 속성 값 선택자 */
input[type="text"] {
background-color: #f0f0f0;
}
/* 시작 값 선택자 */
a[href^="https://example.com"] {
color: green;
}
/* 끝 값 선택자 */
img[src$=".png"] {
border: 2px solid blue;
}
/* 값 포함 선택자 */
a[href*="section"] {
font-weight: bold;
}
/* 공백으로 구분된 값 선택자 */
[class~="featured"] {
background-color: yellow;
}
/* 하이픈으로 구분된 속성 선택자 */
[lang|="en"] {
color: blue;
}
GO TO FULL VERSION