속성 선택자 [Jquery, CSS]

공부/Jquery,CSS  2016.03.12 00:54

안녕하세요. 명월입니다.


이번 포스트부터는 CSS에 대해 제대로 공부해 볼까 합니다. 처음에는 블로그 스킨 공부하면서 모르는 CSS 선택자와 속성이 있어서 모르는 것만
조금 공부를 해볼까 싶었는데 개인적으로 느끼는 바가 있어서 아는 부분도 확실히 공부하기 위해 CSS의 전 부분을 공부하려고 합니다.


CSS의 속성선택자는 우리가 흔히 하는 「요소[속성]」의 형태 선택자로써 제가 생각하기엔 CSS 선택자 중에 가장 많이 사용되는 선택자 이지 않나 싶습니다.


먼저 예제를 통해서 자세히 살펴보겠습니다.



다음은 CSS에 대한 속성 선택자 예제 입니다.



위 예제를 설명을 하면 먼저 input[readonly]의 의미는 input요소에 readonly속성을 사용하는 요소를 찾는 선택자입니다.
즉 가장 위에 있는 input요소 테두리는 까만색으로 변하겠네요.
두번째는 가장 많이 쓰이는 속성를 찾는 선택자입니다. 예제로는 type이 button인 요소를 찾네요.
세번째는 포함 된 단어입니다. 즉 value안에 submit의 단어가 포함된 요소를 찾는 선택자입니다. 예제에서는 submit button이여서 선택이 되지만 만약에 submitbutton이라면 선택이 되어지지 않습니다.
네번째는 href가 https로 시작하는 요소를 선택하고 마지막은 마지막이 localhost로 끝나는 요소를 선택합니다.
솔직히 3번째와 마지막은 잘 사용하지 않는 선택자 이네요...(저만 그럴지도 ㅎㅎㅎ..)


속성 클래스 결과


속성선택자는 CSS선택자에서 nth-child와 nth-of-type만큼 많이 사용되는 속성 선택자입니다. 저같은 경우는 위 예제의 2번째 경우를 가장 많이 사용하는 것 같네요... 속성 클래스는 잘 아는 부분이기도 했지만 복습하는 의미로 포스팅했습니다.



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