CSS2 selector를 사용할 일이 있어서 정리를 해 놓는다.
CSS selector를 사용하면 javascript내에서 원하는 node element에 쉽게 접근할 수있다.
참고 : w3의 CSS2 selector 관련 문서 (http://www.w3.org/TR/CSS2/selector.html)
< 개념을 잡아라 >
그럼, 먼저 아래의 HTML을 살펴 보자
출처 : http://www.w3.org/TR/CSS2/selector.html#id-selectors
위에서 보면 Style을 지정할때 id가 *#z98y인 모든 element를 찾아 letter-spacing: 0.3em라는 style을 지정해주고 있다.
< 실습을 해보자 >
javascript 사용시에 document 객체를 사용해서 CSS selector를 사용할 수 있는데 그 예는 아래와 같다.
먼저 실습을 하기위해 잡아볼 element를 확인해 보자
즉, firefox의 firebug를 사용해서 naver창의 HTML이 어떻게 쓰여있는지 알아보자
Firebug는 firefox에서 실행되는데 모른다면 http://crystalpark.tistory.com/64 여기를 읽어보길 추천한다.
위 그림에서 보면 1번을 누르고 찾기를 원하는 element를 클릭하면 그 부분의 HTML을 찾아 준다.
찾아진 부분을 확대해 보면 아래와 같다.
<input type="text" onclick="document.getElementById('fbm').value=1;" style="ime-mode:active;" accesskey="s" tabindex="1" class="input_text" title="검색어 입력" name="query" id="query" autocomplete="off">
결과 : input 태그이며 id가 "query"란다. 그럼 javascript를 사용해 해당 부분을 찾아 보자
- 우리는 firebug에서 javascript 명령어를 사용해 저 입력창을 찾아내서 outline(테두리)에 분홍색을 칠해 버릴 것이다.
저기 입력창 부분에 javascript를 입력할 수 있다.
날 따라 쳐봐라
치기
var e = document.querySelector("input#query");
e.style.outlineWidth = '3px'; e.style.outlineColor = '#FFAAAA'; e.style.outlineStyle = 'solid';
설명
input 태그이면서 query라는 id를 가진 element를 찾아서 e라는 변수에 넣는다.
e의 outline style을 변경해 줄건데 색깔은 분홍색('#FFAAAA') / style은 solid / 두께는 3픽세일다.
< 더 자세히 >
자유 자제로 원하는 element를 select하기 위해서 query 방법을 보자
5.1에서 Pattern matching에 대해서 설명하고 있다. (http://www.w3.org/TR/CSS2/selector.html#pattern-matching)
| Pattern | Meaning | Described in section |
|---|---|---|
| * | Matches any element. | Universal selector |
| E | Matches any E element (i.e., an element of type E). | Type selectors |
| E F | Matches any F element that is a descendant of an E element. | Descendant selectors |
| E > F | Matches any F element that is a child of an element E. | Child selectors |
| E:first-child | Matches element E when E is the first child of its parent. | The :first-child pseudo-class |
| E:link E:visited |
Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited). | The link pseudo-classes |
| E:active E:hover E:focus |
Matches E during certain user actions. | The dynamic pseudo-classes |
| E:lang(c) | Matches element of type E if it is in (human) language c (the document language specifies how language is determined). | The :lang() pseudo-class |
| E + F | Matches any F element immediately preceded by a sibling element E. | Adjacent selectors |
| E[foo] | Matches any E element with the "foo" attribute set (whatever the value). | Attribute selectors |
| E[foo="warning"] | Matches any E element whose "foo" attribute value is exactly equal to "warning". | Attribute selectors |
| E[foo~="warning"] | Matches any E element whose "foo" attribute value is a list of space-separated values, one of which is exactly equal to "warning". | Attribute selectors |
| E[lang|="en"] | Matches any E element whose "lang" attribute has a hyphen-separated list of values beginning (from the left) with "en". | Attribute selectors |
| DIV.warning | Language specific. (In HTML, the same as DIV[class~="warning"].) | Class selectors |
| E#myid | Matches any E element with ID equal to "myid". | ID selectors |
즉, body div#love라는 pattern을 사용하면 아래의 굵은 글씨 부분을 잡을 수 있다.
<html>
<head> </head>
<body>
<div id='love'>
날잡아봐라
</div>
</body>
</html>
난, firebug를 자주 안써봤는데 정리하는겸 해서 firebug에 대해서도 한번 올려야겠다.
'Web > CSS' 카테고리의 다른 글
| CSS 문법 (CSS syntax) (0) | 2012.03.06 |
|---|---|
| CSS (0) | 2012.03.05 |
| background image 백그라운드 이미지 사이즈 맞추기 (4) | 2011.04.28 |
