[css3] [속성 ~=값] 선택자 - 특정 값이 포함될 경우 스타일 적용

1. 개념

[속성 ~=값] 선택자 - 특정 값이 포함될 경우 스타일 적용

태그에서 클래스 속성을 이용할 경우에는 한개가 아닌 여러개의 클래스를 붙일 수 있음
이러한 경우 특정한 값이 포함되어 있을 경우에 스타일을 적용하기 위해 물결(~) 표시를 사용하여 스타일을 적용할 수 있음

2. 태그

[속성 ~=값] 선택자

html5 코드

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

< ! DOCTYPE html> < html lang = "kr" > < head > < meta charset = "utf-8" > < title > 키보드와 하루 < /title > < style > 1 [class ~="link"] { background : blue ; color : white ; } < /style > < /head > < body > < div > < a href = "#" class = "test" > test 클래스 속성 < /a > < a href = "#" class = "test link" > test , link 클래스 속성 < /a > < a href = "#" class = "test link button" > test , link , button 클래스 속성 < /a > < /div > < /body > < /html >

결과 화면

[속성 ~=값] 선택자 - 사용예제

코드 설명

1

[class ~="link"]

클래스로 스타일을 지정할 때는 하나의 클래스만 지정하지 않고 여러개의 클래스를 하나의 태그에 적용 할 수 있습니다.
지금 예제로 보시면 test 라는 클래스 뒤에 한 칸 띄고 link 라는 클래스를 스타일로 적용할 수 있고 그 다음에 또 button 이라는 클래스를 붙여서 스타일을 적용할 수 있습니다.
이와 같이 적용한 클래스에 특정한 클래스가 포함되어 있을 경우에 스타일을 적용하고자 하면 물결(~) 표시를 이용해 스타일 적용이 가능합니다.
위에서는 link 라는 클래스를 포함한 경우에 배경은 파란색으로 , 글씨는 하얀색으로 스타일을 적용하라고 했습니다.
그래서 두번째, 세번째가 link 라는 클래스 값을 포함하고 있기 때문애 스타일이 적용되엇습니다.
여기서 중요한 점은 클래스 찾을 때 하나하나 해당하는 문자 안에 있는 것을 찾는 것이 아니라 한 단어가 일치해야 적용이 된다는 것입니다.
예를 들어서 link-example 이라는 클래스 값을 포함되어 있을 때 link로 스타일을 적용하라고 하면 안되게 된다는 점... 기억해 주시기 바랍니다.