[CSS3] CSS3의 속성 선택자

CSS3의 속성선택자

---

속성선택자

CSS에서 속성에 따라서 선택하는 거다

예를 들어서 

p[color="#000000"] 의 경우 p 태그 중에서 color 속성이 #000000 인 태그만을 선택하는 것입니다.

p[color] 는 p태그 중에서 color 속성을 가지고 있는 태그를 선택하는 것 

//사용법은 아래처럼 쓸 수 있다.

선택자[속성]

선택자[속성=값][속성=값]

//하지만 앞에 태그이름 없이 그냥 써도 된다 *을 쓰면 전체에서 찾는거니까?

[속성=값]

문자열을 이용해서 속성을 선택하는 방법도 있는데 태그의 다중선택을 좀더 쉽게 해준다.(약간 상속의 개념이라고 해야하나)

//문자열 속성 선택하는 법

선택자[속성~=값] : 속성안의 값이 일치하는 것을 가져오는 것( 값 전체 )

ex)input[type ~= text-password] : input 태그의 type 값이 text-password로 되어 있는 것

선택자[속성|=값] : 속성안의 값이 일치하는 것을 조건부로 가져오는 것( - 으로 구분)

ex)input[type |= text-password] : input 태그의 type 값이 text 또는 password로 되어있는 것

선택자[속성^=값] : 속성안의 값이 특정 값으로 시작하는 것

선택자[속성$=값] : 속성안의 값이 특정 값으로 끝나는 것(보통 파일의 형식으로 설정)

선택자[속성*=값] : 속성안의 값이 특정값을 포함하는 것

나중에 그리드시스템에 적용을 해보려면  [속성 *=값] 의 방법으로 이용하면 편할듯 하다

class = "grip col-3" 이런식으로 사용한 뒤에

[class="col-"]  이방법으로 공통 적인 특성을 정의하고

각 col-1 부터 col-12 까지의 특수속성(각 그리그별 너비)를 따로 정의하면 코드를 간결화 할 수 있다.