선택자(Selector) [Jquery, CSS]

공부/Jquery,CSS  2016.03.07 23:09
안녕하세요. 명월입니다.
또 하나의 카테고리를 추가를 하여서 Css와 Jquery의 Selecter를 공부 해 볼까 합니다.

css

Selector, 즉 선택자란 무엇일까 또 얼마나 중요한 지에 대해서 생각 해 보겠습니다. 블로그에 작성하는 글들은 예전 책에서 본 글을 인용하는 경우도 있지만 저는 거의 개인적인 생각에서 나오는 글들이므로 실제 정의된 글이랑 의미가 다를 수 있습니다.
댓글로 지적을 해 주시면 수정하겠습니다.

먼저 Css와 관련 된 홈페이지를 참조하겠습니다. 여기는 꼭 Css만 있는 게 아니고 기본적인 Javascript에 대해도 설명되어 있으니 다른 것도 살펴보시는 것도 좋을 듯 싶습니다.

w3schools - 링크

CSS는 간략하게 설명하자면 HTML 태그를 좀 더 쉽고 빠르게 접근 가능하게 하는 선택자입니다.


위 소스는 그냥 흔한 table 형식의 태그 구조입니다. 웹 HTML를 조금이라도 작성해 보신 분이라면 위 형식의 태그는 눈에 확 들어오실 듯 싶습니다.
여기서 저는 tbody 밑의 tr 밑의 첫 번째 td의 스타일을 수정하고 싶을 때 어떤 식으로 접근을 할까요??
물론 가장 쉬운 방법은 td 태그 속성에 class를 넣는 것이 가장 편할 것입니다.

그러나 table 컬럼이 엄청 많거나 동적으로 이루어진 형식이라고 할 때 전부다 class를 입힐 수 있을까요? 입히더라도 가독성이 많이 떨어지겠지요...
그럴 때 셀렉터를 이용하면 편리하게 오브젝트를 선택하게 되겠습니다.


위 Css를 적용한 결과 화면을 보겠습니다.

css Example


태그로 스타일을 적용하는 건 크게 어려운 부분은 아니고 가장 밑에 있는 div 부터 하위 셀렉터를 찾아서 background-color와 글씨 크기를 변경 했습니다.
셀렉터로 오브젝트를 찾아서 값을 적용하니 HTML 소스도 크게 지저분 해 지지 않고 가독성도 높게 작성이 가능하네요
그럼 셀렉터가 무엇이 있는지 W3School에서 찾아보고 정리하겠습니다.

선택자 설명
.class class=”class”의 모든 요소를 선택
#id id=”id”의 모든 요소를 선택
* 전체 선택자 – 모든 요소를 선택
element 요소 선택자 – 지정된 요소를 선택
element,element 요소 선택자 – 선택할 요소를 여러 개 지정
element element 자손 선택자 – 지정된 상위 요소 아래의 지정된 모든 하위 요소 선택
element>element 자식 선택자 – 지정된 상위 요소 바로 아래의 지정된 하위 요소만 선택
element+element 인접 선택자 – 지정된 요소와 같은 레벨의 바로 다음 요소 선택
element1~element2 element1 요소 바로 뒤에 배치 된 모든 element2 요소를 선택
[attribute] 속성 선택자 – 지정된 속성 가진 요소를 모두 선택
[attribute=value] 속성 선택자 – 지정된 속성의 값을 가진 요소를 모두 선택
[attribute~=value] 속성 선택자 – 지정된 속성에 지정된 값이 포함된 요소를 모두 선택
[attribute|=value] 속성 선택자 – 지정된 속성 값이 지정된 값으로 시작하는 모든 요소를 선택
[attribute^=value] 속성 선택자 – 지정된 속성 값이 지정된 값으로 시작하는 모든 요소를 선택
[attribute$=value] 속성 선택자 – 지정된 속성 값이 지정된 값으로 끝나는 모든 요소를 선택
[attribute*=value] 속성 선택자 – 지정된 속성 값이 지정된 값을 포함한 모든 요소를 선택
:active 모든 활성화된 요소를 선택
:after 지정된 요소의 뒷 부분을 선택
:before 지정된 요소의 앞 부분을 선택
:checked 모든 checked 된 요소를 선택
:disabled 모든 disabled 된 요소를 선택
:empty 자식 노드가 없는 지정된 요소를 선택
:enabled 모든 enabled 된 요소를 선택
:first-child 지정된 요소의 첫번째 자식 노드를 선택
:first-letter 지정된 요소의 첫 번째 문자를 선택
:first-line 지정된 요소의 첫 번째 줄을 선택
:first-of-type 지정된 요소의 첫번째 자식 노드의 모든 요소를 선택
:focus 모든 포커스 된 요소를 선택
:hover 마우스 hover 된 요소를 선택
:in-range 지정된 범위 내의 값으로 입력 요소를 선택
:invalid 잘못된 값을 가진 모든 입력 요소를 선택
:lang(language) 지정된 값의 언어로 되어 있는 요소를 선택
:last-child 지정된 자식 노드의 마지막 요소를 선택
:last-of-type 지정된 요소의 마지막 자식 노드의 모든 요소를 선택
:not 지정된 요소가 없는 요소를 선택
:nth-child(n) 지정된 요소와 같은 레벨 요소의 n번째의 요소를 선택
:nth-last-child(n) 지정된 요소와 같은 레벨 요소의 뒤에서 n번쨰의 요소를 선택
:nth-last-of-type(n) 마지막 자식부터 계산, 부모의 두 번째 지정된 요소의 모든 요소를 선택
:nth-of-type(n) 부모의 두 번째 지정된 요소의 모든 요소를 선택
:only-of-type 부모의 유일한 지정된 요소의 모든 요소를 선택합니다
:only-child 부모의 유일한 자식인 모든 요소를 선택합니다
:optional 지정된 필수 속성이 없는 요소를 선택합니다.
:out-of-range 지정된 범위를 벗어난 값을 입력 요소를 선택
:read-only 읽기 전용 속성인 지정된 요소를 선택
:read-write 읽기 전용 속성이 아닌 지정된 요소를 선택
:required 지정된 필수속성인 있는 요소를 선택
:root 문서의 루트 요소를 선택
::selection 사용자에 의해 선택된 요소의 일부를 선택
:target target이 지정된 요소를 선택
:valid 유효한 값 모든 입력 요소를 선택
:visited 모든 방문한 링크를 선택

막상 정리하고 보니깐 내용이 엄청 많네요... 평소에 셀렉터를 자주 사용하는 것만 사용하고 모르는게 많아서 정리 할 겸 시작한 포스팅이 내용이 많아져 버렸습니다... 잘 이해가 되지 않는 셀렉터를 뽑아서 따로 포스팅을 통해 공부를 해야겠습니다.


댓글 0개가 달렸습니다.
댓글쓰기