코드 그라데이션
12. 속성 선택자 본문
특정 속성이 있는 요소를 선택하는 [속성] 선택자
- 속성값에 따라 원하는 요소를 선택할 수 있다.
- 대괄호 사이에 원하는 속성을 입력하면 된다.
ex. a 요소 중에서 href 속성이 있는 요소 선택하기
예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>속성 선택자Test</title>
<style>
ul {
list-style:none;
}
li {
width:150px;
display:inline-block;
margin:20px;
}
li a {
padding: 5px 20px;
font-size: 24px;
text-decoration: none;
font-weight: bold;
}
a[href] {
color: olivedrab;
background:blue;
border:1px solid red;
font-weight:normal;
}
</style>
</head>
<body>
<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>
<li><a>5</a></li>
</ul>
</body>
</html>
실행 결과
[속성 = 속성값] 선택자 : 특정 속성값이 있는 요소를 선택
- 주어진 속성과 속성값이 일치하는 요소를 찾아 스타일을 적용할 때 사용
ex. a 요소 중에서 target 속성값이 '_blank' 인 것만 선택하기
예제 - 새 탭으로 열리는 링크에만 아이콘 추가하기
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<title>속성 선택자</title>
<style>
ul {
list-style: none;
}
li {
padding: 5px 30px;
}
li a {
font-size: 16px;
text-decoration: none;
color: #000;
}
a[target="_blank"] {
padding-right: 30px;
background: url(images/newwindow.png) no-repeat center right;
}
</style>
</head>
<body>
<ul>
<li><a href="hhttps://html.spec.whatwg.org" target="_blank">HTML</a></li>
<li><a href="https://www.w3.org/TR/selectors">CSS Selector Level 3</a></li>
<li><a href="https://www.w3.org/TR/css3-mediaqueries">미디어쿼리</a></li>
</ul>
</body>
</html>
실행 결과
[속성 ~= 값] : 여러 값 중에서 특정 속성값이 포함된 속성 요소를 선택
- 속성이 하나면서 속성값이 여러 개일 때 특정 속성값을 찾는 데 편리
ex. class 값 중에 button이 있는 요소
예제 - class 속성값에 button이 지정되어 있을 때만 메뉴 항목에 그림자가 나타남.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>속성 선택자 Test2</title>
<style>
ul { list-style:none; }
li {
display:inline-block;
margin:10px;
}
li a {
padding: 5px 20px;
font-size: 14px;
color: blue;
text-decoration: none;
}
.flasdft {
background:#eee;
border:1px solid #222;
}
a[class ~="button"] {
box-shadow:rgba(0,0,5,0.5) 4px 4px; /* 그림자 지정 */
border-radius: 10px; /* 테두리를 둥글게 */
border:1px solid blue;
}
</style>
</head>
<body>
<ul>
<li><a href="#" class="flasdft">메뉴 1</a></li>
<li><a href="#" class="flasdft">메뉴 2</a></li>
<li><a href="#" class="button">메뉴 3</a></li>
<li><a href="#" class="flasdft button" >메뉴 4</a></li>
</ul>
</body>
</html>실행 결과
[속성 |= 값] : 특정 속성값이 포함된 속성 요소를 선택
- 특정 속성값이 포함된 속성에 스타일을 적용
- 이 때 속성값은 한 단어로 일치해야 한다.
- [속성 ~= 값] 은 하이픈으로 연결한 단어에 스타일을 적용하지 않지만
- [속성 |= 값] 은 지정한 값과 정확하게 일치하거나, 지정한 값을 포함해서 하이픈으로 연결된 단어도 선택.
ex. title 속성값에 us 가 있거나 us- 로 연결된 속성값이 있는 요소를 찾기
예제 - 속성값에 따라 아이콘 다르게 표시하기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>속성 선택자 Test3</title>
<style>
ul { list-style:none; }
li {
display:inline-block;
margin:10px;
}
li a {
padding: 5px 20px;
font-size: 14px;
color: blue;
text-decoration: none;
}
a[title |= "abc"] { /* 속성값이 "abc"이거나 "abc-"로 시작하는 요소를 찾는 선택자 */
background: url(../Day05/images/안녕.jpg) no-repeat left center;
background-size: 10px;
}
a[title |= "def"] { /* 속성값이 "def"이거나 "def-"로 시작하는 요소를 찾는 선택자 */
background: url(../Day07/images/LCD.png) no-repeat left center;
background-size: 10px;
}
a[title |= "yxz"] { /* 속성값이 "yxz"이거나 "yxz-"로 시작하는 요소를 찾는 선택자 */
background: url(../Day07/images/pandas.jpg) no-repeat left center;
background-size: 10px;
}
</style>
</head>
실행 결과
[속성 ^= 값] : 특정 속성값으로 시작하는 속성 요소를 선택
- 속성값이 정확하게 일치하지 않더라도 지정한 속성값으로 시작하는 요소를 찾을 때
- ex. eng로 시작 => eng, england, english 모두 해당하게 됨.
예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>속성 선택자 Test3</title>
<style>
ul { list-style:none; }
li {
display:inline-block;
margin:10px;
}
li a {
padding: 5px 20px;
font-size: 14px;
color: blue;
text-decoration: none;
}
a[title ^= "abc"] { /* 속성값이 abc로 시작하는 요소를 찾는 선택자 */
background: url(../Day05/images/안녕.jpg) no-repeat left center;
background-size: 10px;
}
a[title ^= "def"] { /* 속성값이 def로 시작하는 요소를 찾는 선택자 */
background: url(../Day07/images/LCD.png) no-repeat left center;
background-size: 10px;
}
a[title ^= "yxz"] { /* 속성값이 yxz로 시작하는 요소를 찾는 선택자 */
background: url(../Day07/images/pandas.jpg) no-repeat left center;
background-size: 10px;
}
</style>
</head>
<body>
<ul>
<li><a href="#" title="abcenglish">E</a></li>
<li><a href="#" title="defdadassadasd">J</a></li>
<li><a href="#" title="yxzvcxxcvxzcv">C</a></li>
</ul>
</body>
</html>
실행 결과
[속성 $= 값] : 특정 속성값으로 끝나는 속성 요소를 선택
ex. 링크한 파일 이름의 마지막 단어가 xls 인 요소 찾기
[속성 *= 값] : 일부 속성값이 일치하는 요소를 선택
- 어느 위치에 속성값이 있든지 지정한 속성값이 포함되어 있다면 해당 요소를 선택
ex. 링크한 파일 이름의 마지막 단어가 xls 인 요소 찾기
예제 - 두 개 합침
- href에 링크된 파일의 확장자, 즉 파일 이름의 마지막 속성값을 체크한 후 파일 형식에 맞는 아이콘을 파일 이름 옆에 표시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>속성 선택자Test5</title>
<style>
ul {
list-style:none;
}
li a {
line-height:30px;
font-size: 20px;
color: red;
text-decoration: none;
}
a[href$=hwp] { /* 연결한 파일의 확장자가 hwp인 링크 */
background: url(images/hwp_icon.gif) center right no-repeat;
/* 배경으로 hwp 아이콘 표시 */
padding-right: 25px;
/* 아이콘을 표시할 수 있도록 오른쪽에 25px 여백 */
}
a[href$=xls] { /* 연결한 파일의 확장자가 excel인 링크 */
background: url(images/excel_icon.gif) center right no-repeat;
/* 배경으로 excel 아이콘 표시 */
padding-right: 25px;
/* 아이콘을 표시할 수 있도록 오른쪽에 25px 여백 */
}
a[href*=na]{
background-color: aquamarine;
}
</style>
</head>
<body>
<ul>
<li><a href="intro.hwp">hwp </a></li>
<li><a href="intro.xls">excel</a></li>
<li><a href="https://www.naver.com">naver</a></li>
<li><a href="https://www.daum.net">daum</a></li>
</ul>
</body>
</html>
실행 결과
최종정리
728x90
'Front > Mega-CSS' 카테고리의 다른 글
| 14. 변형 (1) | 2023.06.03 |
|---|---|
| 13. 가상 클래스와 가상 요소 (0) | 2023.05.17 |
| 11. 연결 선택자 (0) | 2023.05.15 |
| 10. 색 그라데이션 (0) | 2023.05.14 |
| 9. 배경색과 배경 이미지 (0) | 2023.05.14 |
'Front/Mega-CSS' Related Articles
more
Comments