Index
Index1. selector를 하나만 사용하는 경우1.1 전체 선택자1.2 태그 선택자1.3 클래스 선택자1.4 ID 선택자2. selector를 여러 개 사용하는 경우2.1 하위 선택자2.2 자식 선택자2.3 인접 형제 선택자2.4 일반 형제 선택자3. 속성 selector3.1 태그[속성이름]3.2 태그[속성이름="변수"]3.3 태그[속성이름~="변수"]3.4 태그[속성^="변수"]3.5 태그[속성$="변수"]3.6 태그[속성*="변수"]3.7 태그[속성|="변수"]
1. selector를 하나만 사용하는 경우
1.1 전체 선택자
전체 선택자를 통해서 모든
HTML
요소에 접근을 할 수 있습니다. 이를 통해 문서 전체에 공통적으로 기본값을 지정할 수 있습니다. 전체 선택자는 *
을 사용하여 나타냅니다.* { margin: 0 auto; }
1.2 태그 선택자
태그 선택자는
태그 이름
을 사용하여 나타냅니다. 해당 태그의 이름에 해당하는 모든 태그에 속성을 적용합니다.p { color: red; }
1.3 클래스 선택자
클래스 선택자는
.클래스 이름
을 사용하여 나타냅니다. 태그 선택자와 마찬가지로 클래스가 클래스 이름
과 같은 태그에 속성을 적용합니다..ClassName { width: 100px; }
1.4 ID 선택자
ID 선택자는
#아이디 이름
을 사용하여 나타냅니다. 위와 동일하게 id 가 id 이름과 같은 태그에 속성을 적용합니다.#IdName { position: fixed; }
2. selector를 여러 개 사용하는 경우
선택자를 여러 개 쓰는 경우를 복합 선택자라고 합니다. 복합 선택자에도 여러 가지 종류가 있어 이에 대해서 알아보겠습니다.
2.1 하위 선택자
하위 선택자는 선택자 사이를
공백
을 사용하여 나타냅니다. 앞 요소의 자손
인 뒤 요소를 선택합니다.section ul { text-shadow: none; }
2.2 자식 선택자
하위 선택자는 선택자 사이를
>
를 사용하여 나타냅니다. 앞 요소의 자식
인 뒤 요소를 선택합니다.section > ul { text-shadow: none; }
자손
은 자식
을 포괄하는 의미입니다. 자손은 모든 하위 요소를 의미하고 자식은 바로 아래의 하위 요소에만 적용합니다. 2.3 인접 형제 선택자
인접 형제 선택자는 선택자 사이를
+
를 사용하여 나타냅니다. +
를 기준으로 앞 요소 직후에 나오는 뒤 요소를 선택합니다.h1 + ul { color: red; }
2.4 일반 형제 선택자
일반 형제 선택자는 선택자 사이에
~
를 사용하여 나타냅니다. ~
을 기준으로 앞 요소 이후에 나오는 모든 뒤 요소를 선택합니다.h1 ~ ul { color: red; }
형제 선택자는 같은 부모를 가지는 요소들을 말합니다.
3. 속성 selector
태그의 이름, 클래스 이름, ID 이름 외에도 속성으로 접근할 수 있습니다. 이를
속성 선택자
라고 합니다.3.1 태그[속성이름]
속성이름
에 해당되는 속성을 가진 태그를 모두 선택합니다.a[href] { font-size: 10px; }
3.2 태그[속성이름="변수"]
속성이름
의 속성값이 변수
와 일치하는 태그를 선택합니다.a[href="http://www.naver.com"] { color: black; }
3.3 태그[속성이름~="변수"]
속성이름
의 속성값이 변수
를 포함하는 태그를 선택합니다.a[href~="naver"] { color: black; }
3.4 태그[속성^="변수"]
속성
의 속성값이 변수
로 시작하는 태그를 선택합니다.a[href^="http"] { color: black; }
3.5 태그[속성$="변수"]
속성
의 속성값이 변수
로 끝나는 요소를 선택합니다.a[href$="com"]{ color: black; }
3.6 태그[속성*="변수"]
속성
의 속성값이 변수
를 포함하는 태그를 선택합니다.a[href*="naver"] { color: black; }
태그[속성~="변수"]
와 태그[속성*="변수"]
의 차이는 무엇인가요?
~=
는 단어를 기준으로 *=
는 문자열을 기준으로 판단을 하게 됩니다. 예를 들어서 위와 같은 상황에서 navers
를 어떻게 인식할까요?
~=
은 단어를 기준으로 naver
와 navers
를 다르다고 인식하고 선택을 못하게 되고 *=
은 문자열을 기준으로 navers
안에 naver
가 포함되기 때문에 선택을 합니다.3.7 태그[속성|="변수"]
속성
의 속성값이 변수
이거나 변수
로 시작하는 태그를 선택합니다.a[href|="http"]{ color: black; }