01. 선택자 정리

1. 태그 이름

/* 모든 <h1> 태그 */
h1 {
  color: orange;
}

2. 클래스/아이디

/* 'important'라는 클래스를 갖고 있는 모든 태그 */
.important {
  color: orange;
}

/* 'favorite'라는 아이디를 갖고 있는 태그 */
#favorite {
  color: blue;
}

3. 자식(children)

/* 'div1' 클래스를 갖고 있는 요소의 자식 중 모든 <i> 태그 */
.div1 i {
  color: orange;
}

4. 직속 자식(direct children)

/* 'div1' 클래스를 갖고 있는 요소의 직속 자식 중 모든 <i> 태그 */
.div1 > i {
  color: orange;
}

5. 복수 선택

/* 'two' 클래스를 가지고 있는 태그 모두와 'four' 클래스를 가지고 있는 태그 모두 선택 */
.two, .four {
  color: orange;
}

6. 여러 조건

/* 'outside' 클래스를 갖고 있으면서 'one' 클래스도 갖고 있는 태그 */
.outside.one {
  color: blue;
}

/* 'inside' 클래스를 갖고 있으면서 'two' 클래스도 갖고 있는 태그 */
.inside.two {
  color: orange;
}

7. Pseudo-class(가상클래스)

/* .div1의 자식인 <p> 태그 중 3번째 */
.div1 p:nth-child(3) {
  color: blue;
}

/* .div1의 자식인 <p> 태그 중 첫 번째 */
.div1 p:first-child {
  color: red;
}

/* .div1의 자식인 <p> 태그 중 마지막 */
.div1 p:last-child {
  color: green;
}

/* .div1의 자식 중 마지막 자식이 아닌 <p> 태그 */
.div1 p:not(:last-child) {
  font-size: 150%;
}

/* .div1의 자식 중 첫 번째 자식이 아닌 <p> 태그 */
.div1 p:not(:first-child) {
  text-decoration: line-through;
}

/* 마우스가 <h1> 태그에 올라갔을 때 */
h1:hover {
  color: green;
}

02. CSS 상속

부모 요소의 속성들을 자식들한테 넘겨주는 것

(HTML)
<div class="div1">
  <h1>Heading 1</h1>
  <p>Paragraph bla bla bla</p>
</div>

(CSS)
.div1 {
  color: blue;
}

결과

h1과 p태그에 별도의 설정하지 않아도 .div1의 속성이 자식들에게 상속된다.

상속되는 속성들

1. color
2. font-family
3. font-size
4. font-weight
5. line-height
6. list-style
7. text-align
8. visibility

💡 위의 속성들도 항상 상속되는 것은 아니다.

<대표적인 예>
a태그에는 color 속성이 상속되지 않는다. a태그가 억지로 상속을 받아오기 위해서는 해당 속성에 inherit 값을 쓰면 된다.

(html)
<div class="div1">
  Let's go to <a href="https://google.com" target="_blank">google</a>!
</div>

(css)
.div1 {
  color: green;
}

.div1 a {
  color: inherit;
}

03. CSS 우선 순위

1. 순서

완전 똑같은 선택자가 나중에 또 나오면, 이전에 나온 스타일을 덮어쓰게 된다.

2. 명시도 (Specificity)

같은 요소를 가리키지만 선택자가 다르다면, '명시도'에 따라 우선 순위가 결정된다.

명시도 계산기
1. 인라인 스타일이 가장 우선 순위가 높다.
2. 선택자에 id가 많을 수록 우선 순위가 높다.
3. 선택자에 class, attribute, pseudo-class가 많을 수록 우선 순위가 높다.
4. 그 다음은 그냥 요소(또는 가상 요소)가 많은 순서.

04. CSS의 다양한 단위들

px

px는 절대적인 값. 다른 요소의 값에 영향을 받지 않는다.

rem

rem은 상대적인 값. 하지만 오직 html태그의 font-size에만 영향을 받는다.
2rem은 html태그의 font-size의 2배 크기이다.

em

em도 상대적인 값. em은 자기 자신의 font-size를 기준으로 한다.
2em은 자기 자신의 font-size의 2배 크기이다.
만일 자신의 font-size를 따로 정해주지 않을 경우, 상위 요소에서 상속받은 값을 기준으로 한다.

퍼센트 (%)

% 역시 상대적인 값이다. %는 어느 항목에서 쓰이냐에 따라 다른 기준이 적용된다.
ex) font-size에서 %가 쓰일 경우, 상위 요소의 font-size에 곱해주는 방식으로 계산한다.
%가 margin이나 padding의 단위로 사용될 경우, 상위 요소의 width를 기준으로 계산한다.
margin-top이나 padding-bottom 등 세로(상하) 속성을 조절할 때에도 상위 요소의 height가 아닌 width를 기준으로 계산된다.