반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>속성 선택자 - 특수 선택자(포함되는것 : 비슷한 것 선택)</title>
<style>
/* 값이 단어인것들을 선택 */
img[alt~="blank"] {
border: 5px solid red;
}
</style>
</head>
<body>
<!-- 빈 이미지(더미 이미지)를 인터넷에서 가져오는 링크 소개 -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>속성 선택자 - 특수 선택자(문자열을 속성값으로 시작할 경우 선택)</title>
<style>
/* 속성의 값이 white 이거나 white-로 시작되는 태그(요소)를 선택 */
img[alt|="white"] {
border: 5px solid red;
}
</style>
</head>
<body>
<!-- 빈 이미지(더미 이미지)를 인터넷에서 가져오는 링크 소개 -->
<!-- css에서 표준명명법 : 단어와 단어사이는 -(마이너스, 대쉬)를 붙인다. -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>속성 선택자 - 특수 선택자(부분 문자열로 시작하는 것 선택)</title>
<style>
/* 부분 문자열로 시작되는 태그(요소)를 선택 */
/* 코딩 : ^(문자열의 시작을 의미) */
img[alt^="wh"] {
border: 5px solid red;
}
</style>
</head>
<body>
<!-- 빈 이미지(더미 이미지)를 인터넷에서 가져오는 링크 소개 -->
<!-- css에서 표준명명법 : 단어와 단어사이는 -(마이너스, 대쉬)를 붙인다. -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>속성 선택자 - 특수 선택자(부분 문자열로 끝나는 것 선택)</title>
<style>
/* 부분 문자열로 끝나는 태그(요소)를 선택 */
/* 코딩 : $(문자열의 끝을 의미) */
img[alt$="1"] {
border: 5px solid red;
}
</style>
</head>
<body>
<!-- 빈 이미지(더미 이미지)를 인터넷에서 가져오는 링크 소개 -->
<!-- css에서 표준명명법 : 단어와 단어사이는 -(마이너스, 대쉬)를 붙인다. -->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>속성 선택자 - 특수 선택자(부분 문자열로 포함되는 것)</title>
<style>
/* 부분 문자열이 포함되는 태그(요소)를 선택 */
/* 처음/중간/마지막 전부 모두 선택 됨 */
/* 코딩 : *(문자열의 끝을 의미) */
img[alt*="an"] {
border: 5px solid red;
}
</style>
</head>
<body>
<!-- 빈 이미지(더미 이미지)를 인터넷에서 가져오는 링크 소개 -->
<!-- css에서 표준명명법 : 단어와 단어사이는 -(마이너스, 대쉬)를 붙인다. -->
</body>
</html>
반응형
'CSS > CSS 이론' 카테고리의 다른 글
| [CSS] display 속성 (0) | 2023.08.09 |
|---|---|
| [CSS] 가상선택자 (0) | 2023.08.09 |
| [CSS] 인접한 형제 선택자 (0) | 2023.08.09 |
| [CSS] 웹 폰트 적용하기 (0) | 2023.08.09 |
| [CSS] Inline Style (0) | 2023.08.09 |