속성 선택자(기본 속성, 문자열 속성)

오랜만에 CSS에 대한 개념정리를 포스팅하네요(2일밖에 안됬찌만;;ㅋㅋ)

이번 포스팅에서는 속성 선택자에 대해 포스팅을 할건데요 이것은 크게 두개로 나누어 집니다.

-기본 속성 선택자

-문자열 속성 선택자

자~그럼 시작하겠습니다.

1.기본 속성 선택자

간단하게 예를 들어서 설명하자면

input 태그를 사용시 input태그에만해도 많은 속성이 존재합니다.

그래서 이 속성마다 스타일을 적용할때 사용이 되는것이 기본 속성 선택자 입니다.

사용형태

선택자[속성] -> 특정한 속성이 있는 태그를 선택

선택자[속성=값][속성=값] -> 특정한 속성 안의 값이 특정 값과 같은 문서 객체를 선택

이제 코딩을 해보며 한번 알아보도록 할게요

이제 대충 감이 오시나요??

"input 태그를 사용한 곳에서 type=text 또는 password 인것을 배경색을 무슨색으로 하겠다."

라는 뜻 입니다.

이제 문자열 속성 선택자로 넘어갈게요

2. 문자열 속성 선택자

바로 사용 방법부터 알아보록 할게요

선택자[속성~=값]

-> 속성안의 특정한 값을 단어로 포함하는 태그를 선택

선택자[속성|=값]

-> 속성안의 특정한 값을 단어로 포함하는 태그를 선택

이 둘의 공통점

일단 위 두가지는 의미하는 내용이 일치합니다.

이 둘의 차이점

~= 이것은 (하이픈)- 를 뜻합니다.

|= 이것은 '와'를 뜻합니다.

선택자[속성^=값]

-> 속성안의 값이 특정 값으로 시작하는 태그 선택

선택자[속성$=값]

-> 속성 안의 값이 특정 값으로 끝나는 태그를 선택

선택자[속성*=값]

-> 속성 안의 값이 특정 값으로 포함하는 태그를 선택

이제 예제를 통해서 알아볼게요

(확장자는 다 다르게!)

제가 현재 페이스북에서 운영하는 페이지 프로필 사진 변화 과정을 이용할게요

일단 요렇게 한 폴더안에 모아줍니다.

그러면 출력 결과가 이렇게 나와요

여기서 이제 스타일을 적용하겠습니다.

이제 다 확인해 보았는데요

굳이 해석을 하자면

"img파일중에서 src중 png 또는 jpg 또는 gif 잇는 놈들의 배경 테두리르 3px의 크기로 solid red 를 적용시킨다"

라는 뜻 입니다.