1. CSS 선택자 (CSS Selector)
CSS 규칙에서 맨 앞에 적어 주는 걸 CSS 선택자라고 한다.
선택자를 사용해서 이 규칙을 어떤 요소들에 적용할지 선택할 수 있다.
선택자 {
선언;
선언;
선언;
}2. 선택자 목록
콤마(,)로 선택자를 연결하면 여러 선택자에 같은 규칙을 적용할 수 있다.
선택자1,
선택자2 {
...
}선택자 붙여 쓰기
여러 조건을 동시에 만족하는 요소를 선택하고 싶다면 선택자를 붙여서 쓸 수 있다.
예를 들어서 아래 HTML 코드에 있는 태그를 선택한다고 가정한다. (선택자 조합은 AND 조건으로 생각하면 된다.)
<h2 id="newzeland" class="large title">뉴질랜드 대자연으로 떠나는 여행</h2> 아이디+클래스
#newzeland.title /* 아이디가 newzeland이고, 클래스가 title인 요소 */클래스+클래스
.large.title /* 클래스가 large이고, 클래스가 title인 요소 */태그+아이디+클래스
h2#newzeland.large.title /* h2 요소 중에서 아이디가 newzeland이고, 클래스가 title인 요소 */3. 자식 결합자 (Child Combinator)
오른쪽 꺾쇠(>)로 선택자를 잇는다.
예를 들어 아래 코드에서 a.png를 나타내는 이미지 태그를 선택하려면 .card > span로 선택할 수 있다.
<div class="card">
<img src="a.png">
...
</div>.card > img {
width: 100%;
}n번째 자식 선택자(n-th child Selector)
:nth-child()
괄호 안에는 숫자나 even, odd, 2n 같은 값이 들어갈 수 있다.
첫 번째 자식은 1부터 시작한다. (첫 번째 자식은 1이고, 세 번째 자식은 3입니다.)
.parent의 세 번째 자식
.parent:nth-child(3) { ... }.parent의 짝수 번째 자식
.parent:nth-child(even) { ... }.parent:nth-child(2n) { ... }.parent의 홀수 번째 자식
.parent:nth-child(odd) { ... }.parent:nth-child(2n+1) { ... }.parent의 첫 번째/마지막 자식
.parent:first-child { ... }
(또는)
.parent:last-child { ... }4. 자손 결합자 (Descendant Combinator)
실제로 자식 결합자보다는 자손 결합자를 더 자주 쓴다.
자손 결합자는 스페이스( )로 선택자를 잇는다. 예를 들어 아래 코드에서 a.png를 보여주는 이미지 태그를 선택하려면 .card img로 선택할 수 있다.
<div class="card">
<img src="a.png">
...
</div>.card img {
width: 100%;
}5. 전체 선택자 (Universal Selector)
* 선택자는 모든 요소를 선택하는 선택자이다.
모든 요소를 선택하기
* {
box-sizing: border-box;
}.card의 모든 요소를 선택하기
.card > * {
width: 120px;
height: 90px;
}6. 가상 클래스 (Pseudo-class)
요소의 상태를 선택할 때 사용하는 클래스이다. 정해진 이름 앞에 콜론(:)을 붙여서 사용한다.
:hover : 마우스를 올렸을 때
:active : 클릭한 상태
:visited : 방문한 적이 있는 링크
:focus : 포커싱 됐을 때
💡 선택자 사용 팁
선택자는 최대한 단순하게
다양한 선택자와 조합 방법이 있지만, 클래스와 가상 클래스 한 두 개만 조합해서 최대한 단순하게 쓰는게 좋다. 복잡하게 조합하다 보면 나중에 코드를 고칠 때마다 어디서 뭐가 바뀔지 알기 힘들어진다.
모든 곳에서 border-box를 쓰고 싶을 때
박스 모델의 크기는 기본적으로 콘텐트(content-box)를 기준으로 정해진다. 따라서 모든 요소의 크기를 테두리(border-box)를 기준으로 하고 싶다면, global.css에 아래처럼 추가하고 쓰면 된다.
항상 이 코드를 추가하는 것도 좋다.
* {
box-sizing: border-box;
}같은 클래스지만 변화를 주고 싶을 때
똑같은 상품 버튼이지만, 품절된 상품의 버튼을 보여줄 때 & 똑같은 이미지이지만 유저가 선택한 이미지를 보여줄 때처럼 같은 클래스지만 다른 변화를 적용하고 싶을 때 선택자를 활용하면 좋다.
<div>
<a class="menu" href="/">메인</a>
<a class="menu selected">소개</a> // selected 클래스 추가
</div>.menu {
color: #ffffff;
font-weight: bold;
text-decoration: none;
}
.menu.selected, /* 같은 menu클래스이지만, selected 클래스가 추가로 있는 요소만 다르게 설정 */
.menu:hover {
color: #aaaaaa;
}CSS를 적용해야할 태그가 너무 많을 때
CSS를 적용해야할 태그가 너무 많을 때, 자손 조합자를 사용하면 좋.
예를 들어, 아래 코드에서 모든 <a> 태그에 클래스를 추가하기보다는 자손 조합자를 쓰는 게 훨씬 효율적이다.
여기서 자식 조합자(.card > a)를 쓰지 않고 자손 조합자(.card a)를 쓴 이유는, 만약 <a> 태그 위치가 <div> 안에서 자식이 아니라 자손으로 바뀌어도 그대로 동작할 수 있기 때문이다.
<div class="card">
<a href="a.html">A사이트</a>
<a href="b.html">B사이트</a>
<a href="c.html">C사이트</a>
...
<a href="z.html">Z사이트</a>
</div>.card a {
color: #379379;
text-decoration: none;
}