이전에 가상클래스와 가상요소의 종류에 대해서만 짧게 포스팅 했었는데 오늘은 자주 쓰이는것과 관련된것들에 대해 정리해보았다.
이전 포스팅(가상클래스? 가상요소?)를 보려면 여기로👈
속성 선택자란?
태그의 이름, 클래스 이름, ID 이름 외에도 속성으로 접근하는 선택자이다.
속성 선택자 종류
| 작성법 | 의미 |
| 태그[속성이름] | 속성이름 에 해당되는 속성을 가진 태그를 모두 선택합니다. |
| 태그[속성이름="변수"] | 속성이름 의 속성값이 변수와 일치하는 태그를 선택합니다. |
| 태그[속성*="변수"] | 속성 의 속성값이 변수 를 포함하는 태그를 선택합니다. (문자열) |
| 태그[속성^="변수"] | 속성 의 속성값이 변수 로 시작하는 태그를 선택합니다. |
| 태그[속성$="변수"] | 속성 의 속성값이 변수 로 끝나는 요소를 선택합니다. |
| 태그[속성이름~="변수"] | 속성이름 의 속성값이 변수 를 포함하는 태그를 선택합니다. (단어) |
| 태그[속성|="변수"] | 속성 의 속성값이 변수 이거나 변수 로 시작하는 태그를 선택합니다. |
속성 선택자의 장점은 별도의 class를 주지 않아도 되어 마크업 수정없이 선택할 수 있다. 추후 수정이 생겼을 때 사용하면 유용하다.
예제코드_1
<head>
<title>속성선택자</title>
<style>
a[href] {
font-size: 32px;
}
a[href="http://www.paullab.co.kr"] {
font-size: 48px;
}
</style>
</head>
<body>
<a href="http://www.paullab.co.kr">클릭해!</a>
<a href="#">클릭해!</a>
<a>클릭해!</a>
</body>태그[속성이름]을 선택 해 href속성이 있는 <a>만 font-size속성이 적용된다.
코드 결과
예제코드 2
<head>
<title>속성선택자2</title>
<style>
/* paullab 정확하게 일치 */
/* paullab이라는 문자열만 정확하게 1개만 가진 것을 선택 */
/* 공백도 포함하지 않습니다. */
p[class="paullab"] {
font-size: 48px;
}
/* 단어에 paul 포함되는 것 */
p[class~="paul"] {
text-align: center;
}
/* 문자열 paul이 포함된 모든 것 */
p[class*="paul"] {
color: red;
}
/* korea로 시작하는 것 */
/* 클래스 순서 상관 있습니다 */
p[class^="korea"] {
color: blue;
}
/* lab로 끝나는 것 */
/* lab으로 끝나는 class를 모두 선택하는 것이 아니라 문자열에 끝만 확인 */
p[class$="lab"] {
background-color: pink;
}
</style>
</head>
<body>
<p class="paul">hello world</p>
<p class="paul test">hello world</p>
<p class="paultest">hello world</p>
<p class="paullab">hello world</p>
<p class="koreapaullab">hello world</p>
<p class="paullab koreaone">hello world</p>
<p class="world">hello world</p>
</body>코드 결과
Q. class*="paul"에서 paul뒤에 공백넣어주면 class~="paul"과 똑같을까?
가능하기는 하지만 이렇게 사용하게되면 의도와 달라지는 경우가 생기면서 복잡해진다.
주의!!
태그[속성^="변수"]
해당 속성 선택자를 사용할때는 클래스명들의 순서가 중요하다.
ex) 변수 12 / 12 변수 이렇게 있으면 전자만 적용되고 후자는 안된다.
CSS 선택자가 헷갈린다면 아래 게임에서 선택을 해보면 파악하는데 도움됩니다!
CSS Diner
A fun game to help you learn and practice CSS selectors.
flukeout.github.io
접시와 음식들이 나오면서 움직이는 요소들을 선택하는것으로 전부 외우지 못했어도 오른쪽에 어떤 선택자를 이용하라고 알려준다. CSS 관련 게임들도 여러개 있는데 flex관련이라 자세한건 flex글에서 다루겠다.
반응형
'TIL' 카테고리의 다른 글
| TIL 16 :: css할 때 고려해야할 것 (0) | 2022.04.18 |
|---|---|
| TIL 14 :: [CSS] Flex (0) | 2022.04.14 |
| TIL 12:: 실습과 코드리뷰 (0) | 2022.04.12 |
| TIL 11 :: fixed vs sticky (0) | 2022.04.11 |
| TIL 10 :: Notion으로 이력서 만들어보기 (0) | 2022.04.08 |