반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>속성 선택자</title>
<style>
/*
특정 속성이 있는 요소를 선택하는 [속성] 선택자
- 대괄호([])사이에 원하는 속성을 입력
*/
a[href] {
background: yellow;
border: 1px solid #ccc;
font-weight: normal;
}
/*
특정 속성값이 있는 요소를 선택하는 [속성=속성값] 선택자
- 주어진 속성과 속성값이 일치하는 요소를 찾아 선택
*/
a[target=_blank] {
padding-right: 30px;
background: url('images/newwindow.png') no-repeat center right;
}
</style>
</head>
<body>
<ul>
<li><a>메인 메뉴 : </a></li>
<li><a href="#" target="_blank">메뉴 1</a></li>
<li><a href="#">메뉴 2</a></li>
<li><a href="#">메뉴 3</a></li>
<li><a href="#">메뉴 4</a></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>속성 선택자</title>
<style>
ul {
list-style-type: none;
}
li {
display: inline-block;
margin: 10px;
}
li a {
padding: 5px 20px;
font-size: 14px;
color: blue;
text-decoration: none;
}
.flat {
background: #eee;
border: 1px solid #222;
}
[class ~= button] {
box-shadow: rgba(0, 0, 0, 0.4) 4px 4px;
border-radius: 5px;
border: 1px solid #222;
}
</style>
</head>
<body>
<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>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>속성 선택자</title>
<style>
ul {
list-style-type: none;
}
li {
display: inline-block;
margin: 10px;
}
li a {
padding: 5px 20px;
font-size: 14px;
color: blue;
text-decoration: none;
}
/*
특정 속성값이 포함된 속성 요소를 선택하는 [속성 |=값] 선택자
- 지정한 값과 정확하게 일치하거나 지정한 값을 포함해 하이픈(-)으로
연결된 값도 선택
*/
a[title |=us] {
background:
url("images/us.png") no-repeat left center;
}
a[title |=jap] {
background:
url("images/jp.png") no-repeat left center;
}
a[title |=chn] {
background:
url("images/ch.png") no-repeat left center;
}
/*
특정 속성값으로 시작하는 속성 요소를 선택하는 [속성 ^= 값]
- 지정한 속성값으로 시작하는 요소를 찾음
*/
a[title ^=eng] {
background:
url("images/us.png") no-repeat left center;
}
a[title ^=jap] {
background:
url("images/jp.png") no-repeat left center;
}
a[title ^=chin] {
background:
url("images/ch.png") no-repeat left center;
}
</style>
</head>
<body>
<ul>
<li>외국어 서비스1 : </li>
<li><a href="#" title="us-english">영어</a></li>
<li><a href="#" title="ja">일본어</a></li>
<li><a href="#" title="chn">중국어</a></li>
</ul>
<ul>
<li>외국어 서비스2 : </li>
<li><a href="#" title="english">영어</a></li>
<li><a href="#" title="japanese">일본어</a></li>
<li><a href="#" title="chinese">중국어</a></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>속성 선택자</title>
<style>
/*
특정한 값으로 끝나는 속성의 요소를 선택하는 [속성 $= 값] 선택자
- 지정한 속성값으로 끝나는 요소를 선택
*/
a[href $= hwp] {
background: url('images/hwp_icon.gif') center right no-repeat;
padding-right: 25px;
}
a[href $= xls] {
background: url('images/excel_icon.gif') center right no-repeat;
padding-right: 25px;
}
</style>
</head>
<body>
<h3>회사 소개 파일 내려받기</h3>
<ul>
<li><a href="intro.hwp">hwp 파일</a></li>
<li><a href="intro.xls">엑셀 파일</a></li>
</ul>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>속성 선택자</title>
<style>
ul {
list-style-type: circle;
}
li {
padding: 5px 30px;
}
li a {
font-size: 16px;
color: black;
text-decoration: none;
}
/*
일부 속성값이 일치하는 요소를 선택하는 [속성 *= 값] 선택자
- 어느 위치에 있든지 지정한 속성값이 포함되어 있으면 해당 요소를 선택
*/
a[href *= w3] {
background: blue;
color: white;
}
</style>
</head>
<body>
<p>(아래 링크 중에서 배경색이 파란색인 링크는 W3C 사이트로 연결됩니다.)</p>
<ul>
</ul>
</body>
</html>
반응형
'IT > CSS' 카테고리의 다른 글
| CSS - 4일차 애니메이션 (0) | 2023.05.17 |
|---|---|
| CSS - 4일차 연결선택자, 가상클래스 (0) | 2023.05.17 |
| CSS - 3일차 background (0) | 2023.05.15 |
| CSS - 2일차 box-width, border-radius, box-shadow (0) | 2023.05.11 |
| CSS - 2일차 float,clear (0) | 2023.05.11 |