존재 여부 및 정확한 값
Coddy의 CSS 선택자 코스 레슨 — 15개 중 12번째.
이 레슨에서는 속성 존재 여부 및 정확한 값 선택자에 대해 배웁니다. 속성 선택자는 속성의 존재 여부나 속성의 정확한 값을 기반으로 요소를 선택하는 데 사용됩니다.
속성 존재 선택자:
속성 존재 선택자는 값에 관계없이 특정 속성을 가진 요소를 대상으로 합니다. 대괄호 안에 속성 이름을 넣어 표시합니다.
예시:
/* "target" 속성을 가진 모든 요소를 선택합니다 */
[target] {
color: blue;
}정확한 값 선택자:
정확한 값 선택자는 특정 속성과 특정 속성 값을 가진 요소를 대상으로 합니다. 대괄호 안에 속성 이름 뒤에 등호와 원하는 값을 넣어 표시합니다.
예시:
/* "data-type" 속성 값이 "important"인 요소를 선택합니다 */
[data-type="important"] {
font-weight: bold;
}코드 예시:
HTML:
<p>This is a <span target="link">link</span> element.</p>
<p data-type="important">This is an important paragraph.</p>CSS:
[target] {
text-decoration: underline;
}
[data-type="important"] {
color: red;
}이 예시들은 CSS 속성 선택자가 속성의 존재 여부나 정확한 값을 기반으로 요소를 선택하고 해당 스타일을 적용하는 방식을 보여줍니다.
챌린지
쉬움속성 선택자(attribute selectors)를 사용하여 간단한 HTML 양식의 스타일을 지정하는 과제를 맡게 되었습니다.
속성 선택자를 사용하여 다음 스타일을 적용하세요:
type속성이 "text"로 설정된 입력 필드에green테두리를 추가하세요.type속성이 "email"로 설정된 입력 필드의 배경색을lightblue로 변경하세요.type속성이 "password"로 설정된 입력 필드의 텍스트 색상을red로 만드세요.
직접 해보기
<!DOCTYPE html>
<html>
<head>
<title>Styled Form</title>
<style>
/* Apply styles to form fields based on attribute values */
</style>
</head>
<body>
<form>
<label for="name">Name:</label>
<input type="text" name="name" id="name">
<label for="email">Email:</label>
<input type="email" name="email" id="email">
<label for="password">Password:</label>
<input type="password" name="password" id="password">
<input type="submit" value="Submit">
</form>
</body>
</html>