속성 선택자 심화 부분입니다.
예를들어 문장이 100개가 있고,
그 문장이 각자 클레스 네임을 가지고 있다고 합시다.
1.<p class="선생님선물드릴꺼">책상 마이크 책</p>
2.<p class="선생님이좋아하시는거">장미 스마트폰 노트북</p>
3.<p class=나의취미>볼링 낚시</p>
4.<p class=우리반취미모음>노래 낚시 축구 농구</p>
5.<p class=역대선생님이름>김민수 김철수 김영희</p>
6.<p class=선생님께드리는편지지디자인>꽃문양 무지 파란색배경</p>
7.<p class=우리초등학교선생님들사는곳>강남 강북 여의도 김포</p>
................
등등등이 있다고 할때,
저는 "선생님" 이라는 단어를 포함하는 클레스의 문장만 변경하고 싶다고 합시다.
즉 1,2,5,6,7 번의 문장색상을 빨간색으로 변경하고 싶은겁니다.
그럴때 하나하나 클레스를 선택해서 해도 되지만 좋은 방법들이 있습니다.
결론적으로 style 부분에
p [class*="선생님] {
color: red
}
라고 하면 선생님을 포함하는 class 를 가진 모든 p태그가 선택되어 지고 명령을 수행하게 됩니다.
실제로 실습을 해보겠습니다.
1. 먼저 body 부분에 글을 적고 실행시켰습니다.
그냥 7개의 문장이 나올뿐이죠.
2. 클레스를 일일이 선택하여 글자를 바꿔보았습니다.
한개이상 빠트릴 가능성도 있고, 100개상 작업을해야한다면, 엄청난 노가다 일것입니다.
3. *=를 사용하여 선생님이 들어간 클레스를 가지는 p태그만 골라보았습니다.
이렇게 한다면 문장이 100개든 1000개든 빠르게 해결할수 있습니다.
이렇게 특정 단어를 포함하는 class를 가지는 태그를 선택해봤습니다. (class 뿐만 아니라 id도 가능합니다.)
*^ 만 예시를 들어보았는데요, 다른것들도 있으니 직접 해보시면 좋겠습니다.
<class or id 사용가능>
[class *= 선생님] '선생님' 이라는 단어가 들어가기만 하면 선택
[class = 선생님] '선생님' 딱하나만 들어가야됨. ".선생님 { }" 을 사용하는것과 완전히 같음.
[class ~= 선생님] '선생님'이라는 class 가 포함된 태그
*(하나의 속성은 여러개의 클레스를 가질수있습니다.
class = "선생님선물드릴꺼" , class ="선생님 선물드릴꺼" 는 완전히 다른데요. 처음은 선생님선물드릴꺼 라는 한개의
클레스이며 뒤에는 선생님, 선물드릴꺼 라는 2개의 클레스를 가집니다.
[class |= 선생님] '선생님'이라는 단어로 시작하는 클레스를 가진 태그선택, 구분자(-)가 있어야함
선생님-선물드릴꺼 (o)
선생님-이좋아하시는거 (o)
선생님선물드릴꺼 (x)
[class ^= 선생님] '선생님' 이라는 단어로 시작하는 클레스를 가진 태그 선택, 구분자 없어도됨
선생님-선물드릴꺼 (o)
선생님-이좋아하시는거 (o)
선생님선물드릴꺼 (o)
[class $= 선생님] '선생님' 이라는 단어로 끝나는 클레스를 가진 태그 선택
이 있습니다.