1. [속성] 선택자
<!DOCTYPE html>
<html lang="ko">
<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>
</head>
<style>
ul {
list-style:none;
}
li {
width:120px;
display:inline-block; /*인라인 레벨요소와 블록 레벨 요소의 속성을 모두 가지고 있음*/
margin :10px;
}
li a{
padding: 5px 20px;
font-size:14px;
text-decoration:none; /*텍스트에 줄을 표시하지 않음 */
font-size:bold;
}
a[href] { /*href 속성이 있는 a 요소를 찾는 선택자 */
background:yellow; /*배경색으로 노란색으로 */
border:1px solid #ccc; /*테두리를 지정 */
font-weight:normal; /*글꼴 굵기 지정 */
}
</style>
<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>
</ul>
</body>
</html>
2. [속성=속성값] 선택자
<!DOCTYPE html>
<html lang="ko">
<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>
</head>
<style>
ul{
list-style:none;
}
li{
padding: 5px 30px;
}
li a{
font-size:16px;
text-decoration:none;
color:#000;
}
a[target="_blank"] { /*trrget 속성값이 _blank인 a 요소를 선택하는 선택자 */
padding-right:30px; /*오른쪽에 패딩 지정 */
background:url("newwindow.png") no-repeat center right; /*배경 이미지 지정 */
}
</style>
<body>
<ul>
<li><a href="https:www.w3.org/TR/css3-mediaqueries">미디어쿼리</a></li>
</ul>
</body>
</html>
'css' 카테고리의 다른 글
| 10장 예제 - [속성^=값]연산자 / [속성$=값]연산자 /[속성*=값]연산자 (0) | 2023.04.01 |
|---|---|
| 10장 예제 - [속성~=값]선택자/ [속성 | 값] 선택자 (0) | 2023.04.01 |
| 10장 실습 1 (0) | 2023.03.31 |
| 10장 예제 - 인접 형제 선택자/형제 선택자 (0) | 2023.03.31 |
| 10장 예제 - 하위 선택자/ 자식 선택자 (0) | 2023.03.31 |
