3. CSS 선택자
※ 반드시 기억해야 하는 CSS 선택자 30개
1) 선택자
- 선택자는 복잡하고 다양한 요소들 사이에서
내가 원하는 요소만을 선택할 수 있도록도와준다.
(1) 요소 선택자
- 선택자 중에 가장 기본이 되는 선택자이며,
태그 선택자라고도 한다.
h1 { color: yellow; }
h2 { color: yellow; }
h3 { color: yellow; }- 요소 선택자는 위 코드처럼 선택자 부분에 태그 이름이 들어간다.
- 문서 내에 선택자에 해당하는 모든 요소에 스타일 규칙이 적용된다.
그룹화 ,
h1, h2, h3 { color: yellow; }- 선택자는 쉼표를 이용해서 그룹화를 할 수 있다.
전체 선택자 *
* { color: yellow; }- *(별표, asterisk) 기호로 문서 내에 모든 요소를 선택할 수 있다.
- 매우 편리하지만 성능에 좋지 않으므로 될 수 있으면 사용하지 말자.
(2) class 선택자
- 요소에 구애받지 않고 스타일 규칙을 적용할 수 있는 가장 일반적인 방법은 class 선택자를 활용하는 것이다.
- 다만 html을 조금 수정해야 한다.
.genie { font-size: 30px; }<p class="genie"> ... </p>- 위 코드처럼 p의 class 속성의 값으로 "genie"라는 값을 넣었다면,
CSS에서 그 값("genie")을 선택자로 지정하면 됩니다. - 클래스 선택자를 쓸 때는, 맨 앞에 .(마침표) 를 찍어주어야 한다.
- 이제 어느 요소든지 class 속성값이 "genie"로 선언된 요소가 있다면 해당 스타일 규칙을 적용받게 된다.
다중 클래스
- 공백으로 구분하여 여러 개의 class 값을 넣을 수 있다.
.genie { font-size: 30px; }
.star { color: blue; }<p class="genie star"> ... </p>(3) id 선택자
- class 선택자와 비슷한데, .(마침표) 대신 #(해시) 기호를 써준다.
- 요소에는 class 속성 대신 id 속성을 써준다.
#bar { background-color: yellow; }<p id="blog"> ... </p>- 이 p는 id 선택자의 스타일 규칙이 적용된다.
class 선택자와의 차이점
- .기호가 아닌 #기호 사용
- 태그의 class 속성이 아닌 id 속성을 참조
- 👉🏻문서 내에 유일한 요소에 사용
- 구체성
- 가장 큰 차이점은 class와 달리
id는 문서 내에서 유일해야 한다는 점이다. - id 선택자로 규칙을 적용할 수 있는 요소는 only 1
선택자의 조합
/* 요소와 class의 조합 */
p.genie { ... }
/* <p>이면서 class 속성에 genie가 있어야 */
/* 다중 class */
.star.genie { ... }
/* class 속성에 star와 genie가 모두 있어야 */
/* id와 class의 조합 */
#blog.genie { ... }
/* id가 blog이며 class가 genie인 요소 */(4) 속성 선택자
① 단순 속성으로 선택
p[class] { color: silver; }
/* <p>이면서 class 속성이 있는 요소이면 적용됨 */
p[class][id] { text-decoration: underline; }
/* <p>이면서 class 속성과 id 속성이 둘다 있어야 적용됨 */<p class="genie">Hello</p>
<p class="star">CSS</p>
<p class="coding" id="blog">HTML</p>Hello, CSS, HTML은 은색 글자로 나오고, HTML은 밑줄도 쳐짐.
② 정확한 속성값으로 선택
- 속성의 값으로 요소를 선택한다.
- 선택자는 대괄호 안에 속성 이름과 속성값을 다 적는다.
p[class="genie"] { color: silver; }
p[id="blog"] { text-decoration: underline; }③ 부분 속성값으로 선택
- 속성 이름과 속성값 사이에 사용되는 기호에 따라 동작이 조금 다르다.
<p class="color hot">red</p> <p class="cool color">blue</p> <p class="colorful nature">rainbow</p>
p[class~="color"] { font-style: italic; }
/* class 속성의 값이 공백으로 구분한 "bar" 단어가 포함되는 요소 선택 */
p[class^="color"] { font-style: italic; }
/* class 속성의 값이 "bar"로 시작하는 요소 선택 */
p[class$="color"] { font-style: italic; }
/* class 속성의 값이 "bar"로 끝나는 요소 선택 */
p[class*="color"] { font-style: italic; }
/* class 속성의 값이 "bar" 문자가 포함되는 요소 선택 */다음 코드의 결과가 왜 이렇게 나왔을지 생각해보자❗
p[class~="color"] { font-style: italic; } /* 1, 2번째 요소 */
p[class^="color"] { font-style: italic; } /* 1, 3번째 요소 */
p[class$="color"] { font-style: italic; } /* 2번째 요소 */
p[class*="color"] { font-style: italic; } /* 1, 2, 3번째 요소 */2) 문서 구조 관련 선택자
- 문맥이나 요소의 구조를 기반으로 하여 선택자를 조합하는 것을 "조합자" 또는 "결정자" 라고 부른다.
(1) 부모와 자식
div > h1 { color: red; }- 자식 선택자는 선택자 사이에 닫는 꺽쇠 기호(>)를 넣는다.
- 공백이 있든 없든 상관없다.
(2) 조상과 자손
div span { color: red; }- 자손 선택자는 선택자 사이에 아무 기호없이 그냥 공백으로 구분한다.
(3) 형제
div + p { color: red; }- 인접 형제 선택자는 선택자 사이에 + 기호를 넣는다.
- 공백이 있든 없든 상관없다.
위 코드처럼 문서 구조 관련 선택자는 더 복잡하게 사용할 수 있고
아무리 많이 나열되어 있더라도제일 우측에 있는 요소가 실제 선택되는 요소라는 것이다!
/* body 요소의 자식인 div 요소의 자손인 table 요소 바로 뒤에 인접한 ul 요소 선택! */
body > div table + ul { ... }그렇다면 굳이 왜 쓰는걸까...?
3) 가상 선택자
- 특정 요소의 상태를 미리 추정해서 가상의 클래스로 스타일을 적용할 수 있는 선택자이다.
- class 선택자와는 조금 다르지만, 마치 클래스 선택자처럼 동작하기에 가상 클래스 선택자라고 부른다.
- 어떻게 다른지 살펴보자.
그 전에 가상 클래스부터 공부하깅!
(1) 가상 클래스(pseudo class)
-
가상 클래스는
미리 정의해놓은 상황에 적용되도록 약속된 보이지 않는 클래스이다. -
우리가 직접 요소에 클래스를 선언하는 것이 아니라, 약속된 상황이 되면 브라우저 스스로 클래스를 적용한다.
-
특히나 가상 클래스가 HTML과 CSS에서 좋은 이유는 이들이 정적인 언어이기 때문이다.
-
CSS에서는 흔하게 사용되는 여러 패턴에 대해서 미리 정의해놓고, 가상 클래스로 제어할 수 있게 하고 있다.
:pseudo-class {
property: value;
}- 가상 클래스는 :(콜론) 을 써서 나타낸다.
① 문서 구조와 관련된 가상 클래스
- :first-child : 첫 번째 자식 요소 선택
- :last-child : 마지막 자식 요소 선택
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JS</li>
</ul>li:first-child { color: red; }
li:last-child { color: blue; }첫 번째 li와 마지막 li에 가상 클래스가 적용된다.
- 실제 li에는 class 속성이 없지만
내부적으로 가상 클래스가 적용되어마치 아래의 코드와 같이 동작하는 것이다.<ul> <li class="first-child">HTML</li> <li>CSS</li> <li class="last-child">JS</li> </ul>
② 앵커 요소와 관련된 가상 클래스
- :link : 하이퍼 링크이면서 아직 방문하지 않은 앵커
- :visited : 이미 방문한 하이퍼링크를 의미
a:link { color: blue; }
a:visited { color: gray; }- 하이퍼 링크는 앵커 요소에 href 속성이 있는 것을 의미한다.
③ 사용자 동작과 관련된 가상 클래스
- 이 클래스들도 a에 주로 많이 쓰인다.
- :focus : 현재 입력 초점을 가진 요소에 적용
- :hover : 마우스 포인터가 있는 요소에 적용
- :active : 사용자 입력으로 활성화된 요소에 적용
a:focus { background-color: yellow; }
a:hover { font-weight: bold; }
a:active { color: red; }(2) 가상 요소(pseudo element)
- 가상 요소는
HTML 코드에 존재하지 않는 구조 요소에 스타일을 부여할 수 있다. - 가상 요소 : 미리 정의해 놓은 위치에 삽입되도록 약속되어 있는 보이지 않는 요소
CSS3부터는
가상 클래스와 가상 요소를 구분하기 위해가상 요소에는 ::(더블 콜론) 기호를 사용하기로 했다.
하지만 하위 브라우저에서 :: 문법을 지원하지 않는 문제가 있으므로 상황에 따라 : 기호를 사용해야 한다.
::pseudo-element {
property: value;
}기본적인 가상 요소
- :before : 가장 앞에 요소를 삽입
- :after : 가장 뒤에 요소를 삽입
애초에 내용이 없는 상태로 생성되기 때문에 내용을 넣기 위해 content 속성을 이용해야 한다.
- :first-line : 요소의 첫 번째 줄에 있는 텍스트
- :first-letter : 블록 레벨 요소의 첫 번째 문자
p::before { content: "###" }
p::after { content: "!!!" }
p::first-line { ... }
p::first-letter { ... }
I can be your Genie🧞♀️ How ‘bout Aladdin? 🧞♂️