on
CSS(12)
CSS(12)
☞ 속성 선택자
- 속성 선택자는 태그 안에서 사용하는 속성값에 따라 요소를 선택 하는 역할을 함
1. 특정 속성이 있는 요소를 선택하는 [속성] 선택자
- 속성값에 따라 원하는 요소를 선택할 때 사용
- 대괄호사이에 원하는 속성을 입력하여 사용
- 형식
ex. a[href] {...}
여기서, href는 찾으려고 하는 속성 이름
- a 요소 5개 중에서 href 속성이 있는 요소를 찾아내어 배경색을 지정한 예제
...생략... a[href] { background:yellow; border:1px solid #ccc; font-weight:normal; } ... 메인 메뉴 : 메뉴 1 메뉴 2 메뉴 3 메뉴 4 ...생략...
출처: Do it! HTML+CSS+자바스크립트 웹 표준의 정석
→ 첫 번째 a 요소에는 href 속성이 없으므로 스타일이 적용되지 않음
2. 특정 속성값이 있는 요소를 선택하는 [속성 = 속성값] 선택자
- [속성 = 속성값] 선택자는 주어진 속성과 속성값이 일치하는 요소를 찾아 스타일을 지정할 때 사용
- 대괄호 안에 속성과 속성값을 넣고 그 사이에 '=' 기호를 표시
- 형식
ex. a[target = _blank] {...}
- target 속성값이 '_blank'인 링크를 찾아서 newwindow.png라는 배경 이미지를 추가하는 예제
...생략... a[target="_blank"] { padding-right:30px; background:url(images/newwindow.png) no-repeat center right; } HTML CSS Selector Level 3 미디어쿼리 ...생략...
출처: Do it! HTML+CSS+자바스크립트 웹 표준의 정석
→ a 요소 중에서 target 속성값이 _blank인 요소에만 적용
3. 여러 값 중에서 특정 속성값이 포함된 속성 요소를 선택하는 [속성 ~= 값] 선택자
- [속성 ~= 값] 선택자는 여러 속성값 중에서 해당 속성값이 포함된 요소를 선택
- 속성이 하나면서 속성값이 여러 개일 때 특정 속성값을 찾는데 편리
- 형식
ex. [class ~= button] {...}
→ [속성 ~= 값] 선택자는 button이라는 속성값과 정확하게 일치하는 요소만 선택함
즉, flat-button이나 buttons처럼 button 외에 다른 글자가 속성값에 포함되어 있으면 선택 X
- class 속성값에 button이 포함되어 있을 경우에만 메뉴 항목에 그림자가 나타나는 예제
...생략... a[class ~="button"] { box-shadow:rgba(0,0,0,0.5) 4px 4px; /* 그림자 지정 */ border-radius: 5px; /* 테두리를 둥글게 */ border:1px solid #222; } 메뉴 1 메뉴 2 메뉴 3 메뉴 4 ...생략...
출처: Do it! HTML+CSS+자바스크립트 웹 표준의 정석
→ flat button은 속성값으로 button을 포함하므로 적용 O
4. 특정 속성값이 포함된 속성 요소를 선택하는 [속성 |= 값] 선택자
- [속성 |= 값] 선택자는 특정 속성값이 포함된 속성에 스타일을 적용할 때 사용
- 속성값은 한 단어로 일치해야함
※ [속성 ~= 값] 선택자는 하이픈(-)으로 연결한 단어에 스타일을 적용하지 않지만, [속성 |= 값] 선택자는 지정한 값과 정확하게 일치하거나 지정한 값을 포함해서 하이픈(-)으로 연결된 단어에도 스타일을 적용함
- 형식
ex. a[title |= us] {...}
- [속성 |= 값] 선택자를 사용해 title의 속성값을 체크하는 예제
...생략.. 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; } 외국어 서비스 : 영어 일본어 중국어 ...생략...
출처: Do it! HTML+CSS+자바스크립트 웹 표준의 정석
5. 특정 속성값으로 시작하는 속성 요소를 선택하는 [속성 ^= 값]
- 속성값이 정확하게 일치하지 않더라도, 지정한 속성값으로 시작하는 요소를 찾으려면 [속성 ^= 값] 선택자를 사용
- 형식
ex. a[title ^= eng] {...}
- a 요소의 title 속성값을 살펴보고 시작 글자를 비교해 스타일을 정의한 예제
...생략... 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; } 외국어 서비스 : 영어 일본어 중국어 ...생략...
출처: Do it! HTML+CSS+자바스크립트 웹 표준의 정석
6. 특정한 값으로 끝나는 속성의 요소를 선택하는 [속성 $= 값] 선택자
- [속성 $= 값] 선택자는 지정한 속성값으로 끝나는 요소를 선택
↔ ( [속성 ^= 값]선택자는 지정한 속성값으로 시작하는 요소를 선택)
- 형식
ex. [href $= xls] {...}
- [속성 $= 값] 선택자를 사용해 href에 링크된 파일의 확장자, 즉 파일 이름의 마지막 속성값을 체크한 후 파일 형식에 맞는 아이콘을 파일 이름 옆에 표시하는 예제
...생략... 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 여백 */ } 회사 소개 파일 다운 받기 hwp 파일 엑셀 파일 ...생략...
출처: Do it! HTML+CSS+자바스크립트 웹 표준의 정석
7. 일부 속성값이 일치하는 요소를 선택하는 [속성 *= 값] 선택자
- [속성 *= 값] 선택자는 속성값이 어느 위치에 있든지 지정한 속성값이 포함되어 있다면 해당 요소를 선택함
- 형식
ex. [href *= w3] {...}
- 여러 링크 중에서 w3c 사이트로 연결하는 링크를 찾아 배경색과 글자색을 바꾸는 예제
...생략... a[href *= "w3"] { /* href 속성값 중에 w3가 있는 a 요소를 찾는 선택자 */ background:blue; color:white; } HTML5 참고 사이트 (아래 링크 중 파란색 배경의 링크는 W3C 사이트로 연결됩니다.) HTML 표준안 사이트 HTML 지원 여부 체크 미디어쿼리 ...생략...
출처: Do it! HTML+CSS+자바스크립트 웹 표준의 정석
from http://funair1004.tistory.com/18 by ccl(A) rewrite - 2021-09-08 14:03:18