해당 예제는 Do IT! HTML + CSS + JS 웹 표준의 정석에서 일부 발췌 & 변형하서 사용하였으며 필자가 전부 만든 것이 아님을 밝힙니다.
지난 번에는 주로 태그 자체(어떤 div, p, a 등)를 어떻게 선택하는지에 대해서 많이 적었다. 형제 선택자, 자식 선택자 등등... 해당 내용은 여기에 있다 :
지난 번 글
CSS 고급 선택자
CSS에는 적용하고자하는 스타일의 범위를 지정하는데 선택자(selector)를 이용한다. 하나하나 범위를 지정하기보다는 CSS에 내장된 고급 선택자들로 더 편하게 작업을 해보자. 해당 예제는 Do IT! HTML
passingprogram.tistory.com
이번에는 어떤 태그에 달려있는 속성을 가지고 태그를 선택하는 방법을 알아보고자 한다. 우선 아래의 자세한 설명에 앞서 책에서 제공해준 유용한 정리표를 먼저 공유하면서 시작하겠다.
<속성 선택자>
| 종류 | 선택요소 | 예시 |
| [속성] | 해당 속성이 있음 | [href], [readonly] |
| [속성 = 값] | 해당 속성과 속성값이 있음 | [type="text"] |
| [속성 ~= 값] | 지정한 속성값이 포함됨 (단어별로) | [class~="button"] |
| [속성 |= 값] | 지정한 속성값이 포함됨 (단어별로, 하이픈도 포함) | [title |= "ko"] |
| [속성 ^= 값] | 지정한 속성값으로 시작함 | [title ^= "us"] |
| [속성 $= 값] | 지정한 속성값으로 끝남 | [href $= "hwp"] |
| [속성 *= 값] | 지정한 속성값이 해당 속성의 어딘가에 있음 | [href *= "tistroy"] |
1. [속성] 선택자
해당 태그에 해당 속성이 있다면 선택한다. 꽤나 심플한 선택자라 할 수 있다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
a[href] {
background: yellow;
border: 1px soild #ccc;
font-weight: normal;
}
</style>
</head>
<body>
<form id="signup">
<fieldset>
<ul>
<li><a>메인 메뉴 :</a></li>
<li><a href="#">메뉴 1</a></li>
<li><a href="#">메뉴 2</a></li>
<li><a href="#">메뉴 3</a></li>
<li><a href="#">메뉴 4</a></li>
</ul>
</fieldset>
</form>
</body>
</html>여기서는 href라는 속성을 사용한 a 태그를 찾는 것이며, 적용 결과는 이렇다 :
2. [속성 = 속성값] 선택자
이번에는 어떤 속성이 있고, 그 속성이 정확히 어떤 값을 가져야하는 속성값 선택자이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
a[target = "_blank"] {
background: yellow;
border: 1px soild #ccc;
font-weight: normal;
}
</style>
</head>
<body>
<form id="signup">
<fieldset>
<ul>
<li><a href="http://www.naver.com" target="_blank">네이버</a></li>
<li><a href="http://www.google.com">구글</a></li>
<li><a href="https://www.w3.org">w3 스쿨</a></li>
</ul>
</fieldset>
</form>
</body>
</html>여기서는 target이라는 속성에 "_blank"가 지정된 a 태그를 찾는 것이며, 적용 결과는 이렇다 :
3. [속성 ~= 속성값] 선택자
이번에는 어떤 속성이 있고, 그 속성값을 스페이스로 스플릿 했을 때 그 중 1개의 값은 이 값이어야 하는 속성값 선택자이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
[class ~= "button"] {
box-shadow: rgba(0, 0, 0, 0.4) 4px 4px;
border-radius: 5px;
}
</style>
</head>
<body>
<form id="signup">
<fieldset>
<ul>
<li><a href="#" class="flat">메뉴 1</a></li>
<li><a href="#" class="flat">메뉴 2</a></li>
<li><a href="#" class="button">메뉴 3</a></li>
<li><a href="#" class="flat button">메뉴 4</a></li>
</ul>
</fieldset>
</form>
</body>
</html>여기서는 class이라는 속성내의 다양한 단어 중(flat, button 등)중 button이 있는 태그를 찾는 것이며, 적용 결과는 이렇다 :
4. [속성 |= 속성값] 선택자
이번에는 어떤 속성이 있고, 그 속성값을 스페이스 혹은 하이픈로 스플릿 했을 때 그 중 1개의 값은 이 값이어야 하는 속성값 선택자이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
[class |= "us"] {
box-shadow: rgba(0, 0, 0, 0.4) 4px 4px;
border-radius: 5px;
}
[class |= "jap"] {
box-shadow: rgba(0, 0, 0, 0.4) 10px 10px;
border-radius: 5px;
}
[class |= "kor"] {
box-shadow: rgba(0, 0, 0, 0.4) 20px 20px;
border-radius: 5px;
}
</style>
</head>
<body>
<form id="signup">
<fieldset>
<ul>
<li><a href="#" class="us-english">미국</a></li>
<li><a href="#" class="ja">일본어</a></li>
<li><a href="#" class="kor">한국어</a></li>
</ul>
</fieldset>
</form>
</body>
</html>맨 위의 스타일 지정자는 class이라는 속성내의 다양한 단어 및 하이픈으로 나누어진 단어 중(us, english, ja, kor 등)중 us가 있는 태그를 찾는 것이다.
적용 결과는 이렇다 :
여기서 보면 ja가 들어간 중간의 일본어 태그에는 스타일이 적용되지 않았다. ja에는 jap이 포함되어 있지 않기 때문이다.
**나머지 속성값들은 자주 본적이 없고 일단 시간 상 생략하였습니다.**
'프로그래밍 > CSS' 카테고리의 다른 글
| [반응형] CSS 간단한 가변 요소 크기 단위 정리 (1) | 2023.12.28 |
|---|---|
| CSS margin padding 해도 안 사라지는 공백 (inline-block) (3) | 2023.12.21 |
| CSS 고급 선택자 (0) | 2023.07.28 |
| CSS Flex 와 레이아웃 구조 쓰는 방법(23.08.30) 수정 (0) | 2023.05.31 |
