반응형
css선택자(css Selectors)는 아래와 같이 여러종류가 있습니다.
- 클래스 선택자
- 특성 선택자
- ID 선택자
- 유형 선택자
- 전체 선택자
이 중 특성 선택자에 대해 알아보겠습니다.
특성 선택자란 주어진 특성을 가진 모든 요소를 선택하는 것을 말합니다.
특성 선택자 종류도 여러가지가 있는데요, class*='포함할 클래스' 이렇게 사용하면 내가 만든 class이름을 포함하고 있는 모든 태그를 선택할 수 있습니다.
클래스 이름을 포함한 모든 태그를 선택하는 방법에 대해 아래 소스로 예를 들어보겠습니다.
'더보기' 라는 글자가 있고, 폰트사이즈와 여백값은 같고 색만 다르게 작업을 하였습니다.
<style>
.text-color1 {font-size: 16px; padding: 5px 10px; color: pink;}
.text-color2 {font-size: 16px; padding: 5px 10px; color: blue;}
.text-color3 {font-size: 16px; padding: 5px 10px; color: green;}
.text-color4 {font-size: 16px; padding: 5px 10px; color: loyalblue;}
.text-color5 {font-size: 16px; padding: 5px 10px; color: gray;}
</style>
<div class="text-color1">더보기</div>
<div class="text-color2">더보기</div>
<div class="text-color3">더보기</div>
<div class="text-color4">더보기</div>
<div class="text-color5">더보기</div>
font-size와 padding값이 똑같이 반복되고 있습니다. 반복해서 사용해도 좋지만 코드가 길어져서 보기 안 좋습니다.
또한 컬러값이 더 늘어난다거나 값이 변경이 된다면 유지보수시 일일히 수정해야하는 번거로움이 있습니다.
이때 특성 선택자인 *= 를 이용하면 코드가 간단해집니다.
[class*='text-'] {font-size: 16px; padding: 5px 10px}
class가 text-를 반드시 포함한 모든 요소에 font-size와 padding 스타일을 주었습니다.
소스가 한결 간결해졌습니다.
클래스뿐만 아니라 태그의 속성을 선택할 수도 있습니다.
속성값이 일치하는 것을 선택할 수도 있고, 특정단어로 시작하거나 끝나는 요소선택도 가능합니다.
아래에 특성선택자로 사용할 수 있는 예시가 있으니 참고해보세요~
/* p태그에 title이라는 속성을 가진 요소를 선택 */
p[title] {
font-size: 30px;
color: pink;
}
/* a태그 중에서 href라는 속성을 가지고 있으며
속성값이 반드시 https://devsio.tistory.com와 일치하는 요소를 선택 */
a[href="https://devsio.tistory.com"] {
color: green;
}
/* a태그 중에서 href라는 속성을 가지고 있으며 속성값이 example를 하나 이상 포함한 요소를 선택 */
a[href*="example"] {
font-size: 2em;
}
/* a태그 중에서 href라는 속성을 가지고 있으며 속성값이 devsio로 시작하는 요소를 선택함 */
a[href^="https"] {
font-style: italic;
}
/* a태그 중에서 href라는 속성을 가지고 있으며 속성값이 .com로 끝나는 요소를 선택함 */
a[href$=".com"] {
font-style: italic;
}
/* a태그 중에서 href라는 속성을 가지고 있으며 속성값이 정확히 logo인 요소를 선택함.
attr속성은 공백으로 구분한 여러 개의 값을 가지고 있을수 있음 */
a[class~="logo"] {
padding: 2px;
}
반응형
'Web > CSS' 카테고리의 다른 글
css 이용하여 table 틀고정하는 방법 (0) | 2023.04.14 |
---|---|
input search x버튼 표시 없애기 (0) | 2023.04.14 |
CSS Scroll Snap(스크롤스냅)으로 이미지 slider 만들기 (0) | 2023.01.17 |
css 이미지 비율(종횡비) 고정하는 방법 aspect-ratio 사용 (0) | 2023.01.16 |
무료 상업 폰트 프리텐다드(Pretendard) 웹에서 사용하기 (0) | 2023.01.12 |
댓글