c27. CSS 속성 선택자

CSS 속성 선택자

새창에서 네이버 띄우기(타겟 속성 값이 _blank 입니다).

first 로 시작하는 클래스 값을 갖었습니다.

second 로 시작하는 클래스 값을 갖었습니다.

노란색 칸에 이름을: 이메일 주소:

CSS 속성 선택자 (CSS Attribute Selectors) 는 특별한 속성 (또는 특정 속성값) 을 갖는 HTML 태그에만 선택적으로 스타일을 입히는 기능입니다.

[attribute] {} 
  [ ] 대 괄호 안에 특정 속성을 넣고, 그 속성을 갖는 태그에 적용할 스타일을 {} 중괄호 안에 지정합니다.

[attribute="value"] {} 
  특정 속성 및 속성값을 갖는 태그에 스타일을 지정합니다.

[attribute~="value"] {} 
  속성값에 특정 단어를 포함하는 속성을 갖는 태그에 스타일을 지정합니다. (단, 예를 들면 test trial 처럼 독립된 단어로서 일치할 경우입니다).

[attribute|="value"] {} 
  속성값이 특정 단어로 시작하는 속성을 갖는 태그에 스타일을 지정합니다. (단, 예를 들면 test- 처럼 - 대쉬 등에 의해 구분된 단어 단위일 경우 입니다).

[attribute^="value"] {} 
  속성값이 특정 값으로 시작하는 속성을 갖는 태그에 스타일을 지정합니다. (단, 예를 들면 te 처럼 단어 단위가 아니라도 됩니다).

[attribute$="value"] {} 
  속성값이 특정 값으로 끝나는 속성을 갖는 태그에 스타일을 지정합니다.

[attribute*="value"] {} 
  속성값이 특정 값을 갖는 태그에 스타일을 지정합니다.

input[type="text"] {} 
  폼 (<form>) 태그 내에서 하위 태그들의 속성 및 속성값이 일치하는 경우 스타일을 지정합니다.

---

<style>
a[target=_blank] {
background-color: Cyan;
}

[class^="first"] {
background: yellow;
}

input[type=text] {
width: 200px;
display: block;
margin-bottom: 10px;
background-color: PapayaWhip;
}

input[type=button] {
width: 160px;
margin: 20px 20px;
display: block;
background-color: GreenYellow;
}

</style>
<a href="http://www.naver.com" target="_blank">새창에서 네이버 띄우기(타겟 속성 값이 _blank 입니다).</a>
<br /><br />
<div class="first_test">first 로 시작하는 클래스 값을 갖었습니다.</div>
<div class="second_test">second 로 시작하는 클래스 값을 갖었습니다.</div>
<br />

<form name="input" action="" method="get">
노란색 칸에 이름을:
<input type="text" name="Name" value="type 이 text 입니다." size="20">
이메일 주소:
<input type="text" name="Name" value="파파야 색상입니다." size="20">
<input type="button" value="버 튼">
</form>

---

[광고] Udemy 동영상 강의로 보기