속성 선택자

윤재열·2022년 1월 27일
CSS
0

CSS

목록 보기
12/19

[속성]선택자- 지정한 속성에 스타일 적용하기

이 선택자는 지정한 속성을 가진 요소를 찾아 스타일을 적용합니다.

  • 사용하는 방법은 대괄호([,])사이에 찾으려는 속성을 지정하면 됩니다.
  • 다음 예제는 a[href] 선택자를 사용해 <a>태그 중 href라는 속성이 있는 요소를 찾아내 배경색을 지정하는 것입니다.
    (예제에서는 다섯개의 <a>태그를 사용했지만 첫번째 <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;
			color: blue;
			text-decoration: none;
		}
	 a[href] {
		 background:yellow;
	 }
</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[target."_blank"]선택자는 target속성의 값이 _blank인 링크를 찾아 newwindow.png라는 배경이미지를 표시하는 것입니다.
<!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;
			color: blue;
			text-decoration: none;
		}
	 a[target="_blank"] {
		 padding-right:30px;
		 background:url(images/newwindow.png) no-repeat center right;
	 }
</style>
</head>

<body>
	<h1>HTML5 표준안 사이트 </h1>
	<ul>
		<li><a href="http://www.w3c.org/TR/html" 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>

[속성 ~=값]선택자 -여러 값 중 특정 값이 포함된 속성에 스타일 적용하기

[속성=값]선택자를 사용하면 속성과 값이 정확히 일치하는 요소를 찾지만 '='와 함께 [속성~=값]선택자를 사용하면 여러 속성 값 중에 해당 값이 포함되어 있는 요소를 선택합니다.

  • 이 선택자는 하나의 속성에 속성 값이 여러개 일 때 특정 속성 값을 찾는데 편리합니다.

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:blue;
			color:white;
		}
	[class ~="button"] {
		border: 2px solid black;
		box-shadow: rgba(0,0,0,0.4) 5px 5px;
	}
</style>
</head>
``` ![](https://velog.velcdn.com/images%2Fjyyoun1022%2Fpost%2Fd8b1c3c7-adc7-492a-a3e0-bcc3e4d19dfb%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-01-27%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2011.42.31.png)

[속성 |= 값]선택자-특정 값이 포함된 속성에 스타일 적용하기

[속성 |= 값]선택자는 특정 값이 포함된 속성에 스타일을 적용합니다.

  • 이때 값은 한 단어로 일치해야 합니다.
  • 자칫[속성 ~=값]선택자와 혼동될수 있지만 [속성 ~=값]은 하이픈(-)으로 연결한 단어에 스타일을 적용하지 않는 반면,
  • [속성 |= 값]선택자는 속성 값이 지정한 값이거나 "값-"으로 시작하면 스타일을 적용합니다.
  • 다시말해 하이픈'-'으로 연결한 단어가 있더라도 스타일을 적용합니다.
<!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"] {
		background: url(images/us.png) no-repeat left center;
		padding: 5px 25px;
	}
	a[title |="jap"] {
		background: url(images/jp.png) no-repeat left center;
		padding: 5px 25px;
	}
</style>
</head>

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

[속성 ^=값]선택자-특정 값으로 시작하는 속성에 스타일 적용하기

선택자에 ' ^ ' 이 붙으면 지정한 문자로 시작하는 속성 값에 대해서만 스타일을 적용합니다.

<!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"] {
		background: url(images/us.png) no-repeat left center;
		padding: 5px 25px;
	}
	a[title ^="jap"] {
		background: url(images/jp.png) no-repeat left center;
		padding: 5px 25px;
	}
	a[title ^="chin"] {
		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>

[속성 $=값]선택자-특정 값으로 끝나는 속성에 스타일 적용하기

[속성 ^=값]이 해당 속성이 지정한 값으로 시작하는 요소에 스타일을 적용했다면 [속성 $=값]선택자 선택자는 지정한 값으로 끝나는 요소를 찾아 스타일을 지정합니다.

<!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>

[속성 *= 값]선택자-값의 일부가 일치하는 속성에 스타일 적용하기

앞에서 배운 것들 중 속성 값을 앞부분을 체크하거나 뒷부분을 체크하는 선택자가 있었습니다.
[속성*=값]선택자는 사용자가 지정한 속성 값의 어느 위에든 해당값이 포함되어 있으면 스타일이 적용 됩니다.

<!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: blue;
			text-decoration: none;
		}
	 [href *= "w3"] {
		 background:blue;
		 color:white;		 
	 }
</style>
</head>

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

정리해 보면

기본형스타일 적용 경우예시-선택자예시-적용되는 요소
[속성]지정한 '속성' 일 때[href]<a href='#'> 메뉴1 </a>
[속성 = 값]'값'에 일치할 때[target="_balnk"]<a href =".." target="_blank"> HTML </a>
[속성 ~= 값]여러 값들 중 특정 '값'이 포함되어 있을 때 (단어별)[class ~="button"]<a href='#' class="flat button"> 메뉴4 </a>
[속성 l= 값]'값'이 포함되어 있을 때 (하이픈 포함 단어별)[title l= "us"]<a href='#' title="us" l title="us-english"> 영어 </a>
[속성 ^= 값]'값'으로 시작할 때[title^="eng"]<a href="#" title="english"> 영어 </a>
[속성 $= 값]'값'으로 끝날 때[href $="xls"]<a href="intro.xls"> 액셀 </a>
[속성 *= 값]'값'이 속성 값의 일부일 때[href *= "W3"]<a href="http://www.w3c.org/tr/html"> 사이트 </a>
profile
윤재열
블로그 이전합니다! https://jyyoun1022.tistory.com/
이전 포스트

연결 선택자

다음 포스트

가상 클래스와 가상 요소

0개의 댓글