티스토리 뷰

Web/CSS

[Web/CSS] CSS - 속성 선택자

poopooreum 2024. 4. 26. 21:31
반응형

✏️ 특정 속성이 있는 요소를 선택하는 [속성] 선택자

속성값에 따라 원하는 요소를 선택하기 위해 사용하는 [속성] 선택자

대괄호 사이에 원하는 속성을 입력할 수 있음

a[href]{...}

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>속성 선택자</title>
<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-weight: bold;
	}
   a[href]{
     background:yellow;
	 border:1px solid #ccc;
	 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>
   </ul>
 </body>
</html>

a[href]를 통해 속성을 선택하였고 <ul>태그 안에서 메인 메뉴를 제외한 모드 <li>요소에 노란색이 적용됨

 

✏️ 특정 속성값이 있는 요소를 선택하는 [속성=속성값] 선택자

주어진 속성과 속성값이 일치하는 요소를 찾아 스타일을 지정할 때 사용

대괄호 사이에 속성과 속성값을 넣고 그 사이에 "=" 기호를 표시

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>

a[target=_blank]를 선택자로 지정하였고 <ul> 태그 안에서 맨 첫번쨰 <li>만 일치하여 HTML문구에만 적용

✏️ 여러 값 중 특정 속성값이 포함된 속성 요소를 선택하는 [속성~=값] 선택자

여러 속성값 중에서 해당 속성값이 포함된 요소를 선택

속성이 하나면서 속성값이 여러 개일 때 특정 속성값을 차즌 데 편리하나, 정확하게 일치하는 요소만 가능

[class~=button] {....}

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>속성 선택자</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;
		}
		.flat {
      background:#eee;
      border:1px solid #222;
		}
		a[class ~="button"] {           
      box-shadow:rgba(0,0,0,0.5) 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>

a[class~="button"]으로 속성값을 지정하였고 <ul>태그 안에서 class="button"인 메뉴3만 적용된 것을 알 수 있음 class="flat button"인 <li>요소는 button이 있긴 하나 flat가 있어서 정확하게 일치하지 않기 때문에 적용되지 않음

✏️ 특정 속성값이 포함된 속성 요소를 선택하는 [속성 |= 값] 선택자

특정 속성값이 포함된 속성에 스타일을 적용, 이때 속성값은 한 단어로 일치하여야 함

바로 위에서 보았던 ~=선택자와 다른 점은 != 선택자는 하이픈으로 연결한 단어에도 적용이 가능

즉, 정확하게 일치하거나 지정한 값을 포함해서 하이픈으로 연결된 단어도 선택

[a[title |= us]{...}

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>속성 선택자</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 |= "us"] {  /* 속성값이 "us"이거나 "us-"로 시작하는 요소를 찾는 선택자 */
		background: url(images/us.png) no-repeat left center;
	}
	a[title |= "jap"] {  /* 속성값이 "jap"이거나 "jap-"로 시작하는 요소를 찾는 선택자 */
		background: url(images/jp.png) no-repeat left center;
	}
	a[title |= "chn"] {  /* 속성값이 "chn"이거나 "chn-"로 시작하는 요소를 찾는 선택자 */
		background: url(images/ch.png) no-repeat left center;
	}
</style>
</head>

<body>
	<ul>
		<li>외국어 서비스 : </li>
		<li><a href="#" title="us-english">영어</a></li>
		<li><a href="#" title="ja">일본어</a></li>
		<li><a href="#" title="chn">중국어</a></li>
	</ul>
</body>
 </html>

<style>태그에서 총 3개의 |=선택자를 사용하였고 <li>영어 부분은 us-english에서 us가 일치하므로 사진이 적용

<li>일본어 부분은 jap!=ja이므로 사진이 적용되지 않았고, <li>중국어 부분은 chn이 정확하게 일치하므로 사진이 적용

 

 

✏️ 특정 속성값으로 시작하는 속성 요소를 선택하는 [속성^=값]

속성값이 정확하게 일치하지 않더라도 지정한 속성값으로 시작하는 요소를 찾을 때 사용

[a[title ^=eng]{...} 

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>속성 선택자</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 ^="eng"] {  /* 속성값이 "eng"로 시작하는 요소를 찾는 선택자 */
			background: url(images/us.png) no-repeat left center;
			padding: 5px 25px;
		}
		a[title ^="jap"] {  /* 속성값이 "jap"로 시작하는 요소를 찾는 선택자 */
			background: url(images/jp.png) no-repeat left center;
			padding: 5px 25px;
		}
		a[title ^="chin"] {  /* 속성값이 "chn"로 시작하는 요소를 찾는 선택자 */
			background: url(images/ch.png) no-repeat left center;
			padding: 5px 25px;
		}
</style>
</head>

<body>
	<ul>
		<li>외국어 서비스 : </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>

<style>태그에서 총 3개의 ^= 선택자를 사용하였고 <li>영어 요소는 "english"가 "eng"로 시작하므로 사진이 적용 <li>일본어 요소는 "japanese:가 "jap"로 시작하므로 사진 적용, 중국어도 "chinese"가 "chin"로 시작하므로 사진 적용

✏️ 특정한 값으로 끝나는 속성의 요소를 선택하는 [속성$=값] 선택자

지정한 속성값으로 끝나는 요소를 선택

[href $= xls]{....}

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>속성 선택자</title>
<style>
   ul {
		 list-style:square;
   }
		li a {
			line-height:30px;
			font-size: 14px;
			color: blue;
			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] { /* 연결한 파일의 확장자가 hwp인 링크 */
		background: url(images/excel_icon.gif) center right no-repeat; /* 배경으로 hwp 아이콘 표시 */
		padding-right: 25px; /* 아이콘을 표시할 수 있도록 오른쪽에 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>

<style>태그에서 두 개의 $= 선택자를 사용하였고 <ul>태그 안에서 hwp파일<li>요소는 hwp가 일치하므로 아이콘 적용 엑셀 파일 <li> 요소는 xls가 일치하므로 아이콘이 적용됨

✏️ 일부 속성값이 일치하는 요소를 선택하는 [속성*=선택자]

속성값이 어느 위치에 있든지 지정한 속성값이 포함되어 있다면 해당 요소를 선택

[href *= w3] {...}

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>속성 선택자</title>
<style>
   ul {
		 list-style:circle;
   }
	li {
		padding: 5px 30px;
	}
	li a {
		font-size: 16px;
		color: black;
		text-decoration: none;
	}
	a[href *= "w3"] {  /* href 속성값 중에 w3가 있는 a 요소를 찾는 선택자 */ 
	 background:blue;
	 color:white;		 
	}
</style>
</head>

<body>
	<h1>HTML5 참고 사이트 </h1>
	<p>(아래 링크 중 파란색 배경의 링크는 W3C 사이트로 연결됩니다.)</p>
	<ul>
		<li><a href="https://html.spec.whatwg.org/">HTML 표준안 사이트</a></li>
		<li><a href="https://caniuse.com/">HTML 지원 여부 체크</a></li>
		<li><a href="https://www.w3.org/TR/css3-mediaqueries">미디어쿼리</a></li>		
	</ul>
</body>
</html>

<style>태그에서 *=선택자를 w3로 지정하였고 <ul>태그 중 w3이 들어있는 미디어쿼리 부분만 적용

✏️ 정리

종류 선택 요소 예시
[속성] 해당 속성이 있는 요소 [required]
[속성=값] 지정한 속성값이 있는 요소 [target = _blank]
[속성~=값] 지정한 속성값이 포함된 요소(단어별) [class ~= button]
[속성|=값] 지정한 속성값이 포함한 요소(하이픈 포함, 단어별) [title |= us]
[속성^=값] 지정한 속성값으로 시작하는 요소 [title ^= eng]
[속성$=값] 지정한 속성값으로 끝나는 요소 [href $= xls]
[속성*=값] 지정한 속성값의 일부가 일치하는 요소 [href *= w3]

 

반응형
저작자표시 비영리 변경금지

'Web > CSS' 카테고리의 다른 글

[Web/CSS] CSS - 복습 5  (0) 2024.04.29
[Web/CSS] CSS - 가상 클래스와 가상 요소  (0) 2024.04.29
[Web/CSS] CSS - 연결 선택자  (0) 2024.04.26
[Web/CSS] CSS - 복습4  (0) 2024.04.24
[Web/CSS] CSS - 그라데이션 효과 주기  (0) 2024.04.24
반응형
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/07   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함