고정 헤더 영역
상세 컨텐츠
본문
반응형
[속성] 선택자 - 지정한 속성에 스타일 적용하기
- 지정한 속성을 가진 요소를 찾아 스타일을 적용할 수 있다.
<html>
<head>
<meta charset="utf-8">
<style>
a[href] {
background: blue;
color: white;
}
</style>
</head>
<body>
<ul>
<li><a href="#"></a>메뉴 1</li>
<li><a href="#"></a>메뉴 2</li>
<li><a href="#"></a>메뉴 3</li>
</ul>
</body>
</html>- <a. 태그에서 href 속성이 있는 요소를 찾아 배경과 글자 색상을 적용시켰다.
[속성 = 값] 선택자 - 특정 값을 갖는 속성에 스타일 적용하기
- [속성] 형식에서 주어진 속성과 속성 값이 일치하는 요소를 찾아 스타일을 적용할 수 있다.
<html>
<head>
<meta charset="utf-8">
<style>
a[target="_blank"] {
padding-left: 10px;
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li><a href="#" target="_blank"></a>메뉴 1</li>
<li><a href="#"></a>메뉴 2</li>
<li><a href="#"></a>메뉴 3</li>
</ul>
</body>
</html>[속성 ~= 값] 선택자 - 여러 값 중 특정 값이 포함된 속성에 스타일 적용하기
- 틸드(~~~)~~와 함께 [속성=값] 선택자를 사용하면 여러 속성 값 중에 해당 값이 포함되어 있는 요소 모두를 선택한다.
<html>
<head>
<meta charset="utf-8">
<style>
[class ~="test"] {
font-size: 10px;
background-color: yellow;
border: 1px solid #000;
}
</style>
</head>
<body>
<ul>
<li><a href="#" class="test" target="_blank"></a>메뉴 1</li>
<li><a href="#"></a>메뉴 2</li>
<li><a href="#"></a>메뉴 3</li>
<li><a href="#" class="test"></a>메뉴 4</li>
<li><a href="#"></a>메뉴 5</li>
</ul>
</body>
</html>[속성 |= 값] 선택자 - 특정 값이 포함된 속성에 스타일 적용하기
- [속성 |= 값] 선택자는 특정 값이 포함된 속성에 스타일을 적용한다.
<html>
<head>
<meta charset="utf-8">
<style>
[class |="test1"] {
font-size: 10px;
background-color: yellow;
border: 1px solid #000;
}
</style>
</head>
<body>
<ul>
<li><a href="#" class="test" target="_blank"></a>메뉴 1</li>
<li><a href="#" class="test1"></a>메뉴 2</li>
<li><a href="#" class="test1"></a>메뉴 3</li>
<li><a href="#" class="test"></a>메뉴 4</li>
<li><a href="#"></a>메뉴 5</li>
</ul>
</body>
</html>[속성 ^= 값] 선택자 - 특정 값으로 시작하는 속성에 스타일 적용하기
- [속성 = 값] 선택자에 '캐럿(^)'이 붙으면 지정한 문자로 시작하는 속성 값에 대해서만 스타일을 적용한다.
<html>
<head>
<meta charset="utf-8">
<style>
[class ^="te"] {
font-size: 10px;
background-color: yellow;
border: 1px solid #000;
}
</style>
</head>
<body>
<ul>
<li><a href="#" class="test" target="_blank"></a>메뉴 1</li>
<li><a href="#" class="test1"></a>메뉴 2</li>
<li><a href="#" class="test1"></a>메뉴 3</li>
<li><a href="#" class="test"></a>메뉴 4</li>
<li><a href="#"></a>메뉴 5</li>
</ul>
</body>
</html>[속성 $= 값] 선택자 - 특정 값으로 끝나는 속성에 스타일 적용하기
- 속성이 지정한 값 중 특정 값으로 끝나는 속성에 스타일을 적용할 수 있다.
<html>
<head>
<meta charset="utf-8">
<style>
[class $="st1"] {
font-size: 10px;
background-color: yellow;
border: 1px solid #000;
}
</style>
</head>
<body>
<ul>
<li><a href="#" class="test" target="_blank"></a>메뉴 1</li>
<li><a href="#" class="test1"></a>메뉴 2</li>
<li><a href="#" class="test1"></a>메뉴 3</li>
<li><a href="#" class="test"></a>메뉴 4</li>
<li><a href="#"></a>메뉴 5</li>
</ul>
</body>
</html>[속성 *= 값] 선택자 - 값의 일부가 일치하는 속성에 스타일 적용하기
- 속성 값의 앞 부분이나 끝이 같은 경우에 스타일을 적용해봤다. * 를 이용해 값의 일부가 일치하는 속성에 스타일을 적용할 수 있다.
<html>
<head>
<meta charset="utf-8">
<style>
[class *="es"] {
font-size: 10px;
background-color: yellow;
border: 1px solid #000;
}
</style>
</head>
<body>
<ul>
<li><a href="#" class="test" target="_blank"></a>메뉴 1</li>
<li><a href="#" class="test1"></a>메뉴 2</li>
<li><a href="#" class="ttt1"></a>메뉴 3</li>
<li><a href="#" class="test"></a>메뉴 4</li>
<li><a href="#"></a>메뉴 5</li>
</ul>
</body>
</html>반응형
'IT > HTML 및 CSS' 카테고리의 다른 글
| [CSS] 변형 (0) | 2021.05.16 |
|---|---|
| [CSS] 가상 클래스와 가상 요소 (0) | 2021.05.13 |
| [CSS 기초] 연결 선택자 (0) | 2021.05.11 |
| [HTML5] 시맨틱 태그 (0) | 2021.05.10 |
| [CSS 기초] 표 스타일 (2) (0) | 2021.05.07 |
댓글 영역