개발자의 메모장

em

em은 부모 요소의 폰트 사이즈에 대한 상대적인 크기를 나타낸다.
만약 부모 요소의 폰트 사이즈가 10px일 때, 1em = 10px, 2em = 20px를 나타낸다.

rem

부모 엘리먼트가 아닌, 최상위 루트 html 요소에 대한 상대적인 크기를 나타낸다.

vw

viewport width에 대한 상대적인 크기를 나타낸다.
viewport는 현재 브라우저에 보이는 화면 전체를 나타낸다.
100vw는 viewport width의 가로 사이즈를 전부 다 차지한다. (100%)
50vw는 viewport width의 가로 사이즈의 절반만큼만 차지한다. (50%)

vh

viewport height에 대한 상대적인 크기를 나타낸다.

vmin

viewport width 또는 height 중 작은 값에 대한 상대적인 크기를 나타낸다.

vmax

viewport width 또는 height 중 큰 값에 대한 상대적인 크기를 나타낸다.

기본 선택자 (Basic Selectors)

1. 전체 선택자 (Universal Selector)

*
모든 요소를 선택한다.

2. 태그 선택자 (Type Selector)

E
태그 이름이 E인 요소를 선택한다.

예제

li {
    color: red; 
}

<div>
  <ul>
    <li>마우스</li> <!-- Selected -->
    <li>키보드</li> <!-- Selected -->
  </ul>
  <span>사과</span>
</div>

3. 클래스 선택자 (Class Selector)

.E
HTML class 속성 값이 E인 요소를 선택한다.

4. 아이디 선택자 (ID Selector)

#E
HTML id 속성 값이 E인 요소를 선택한다.

복합 선택자 (Combinators)

1. 일치 선택자 (Basic Combinator)

EF
E와 F를 동시에 만족하는 요소를 선택한다.

예제

span.orange {
    color: red;
}

<div>
  <ul>
    <li>사과</li>
    <li>딸기</li>
    <li class="orange">오렌지</li>
  </ul>
  <div>당근</div>
  <p>토마토</p>
  <span class="orange">오렌지</span> <!-- Selected -->
</div>

2. 자식 선택자 (Child Combinator)

E > F
E의 자식 요소 F를 선택한다.

3. 후손(하위) 선택자 (Descendent Combinator)

E F
E의 후손(하위) 요소 F를 선택한다.
띄어쓰기가 선택자의 기호로 사용된다.

4. 인접 형제 선택자 (Adjacent Sibling Combinator)

E + F
E의 다음 형제 요소 F 하나만 선택한다.

예제

.orange + li {
    color: red; 
}

<ul>
  <li>딸기</li>
  <li>수박</li>
  <li class="orange">오렌지</li>
  <li>망고</li> <!-- Selected -->
  <li>사과</li>
</ul>

5. 일반 형제 선택자 (General Sibling Combinator)

E ~ F
E의 다음 형제 요소 F를 모두 선택한다.

예제

.orange ~ li {
      color: red;
}

<ul>
  <li>딸기</li>
  <li>수박</li>
  <li class="orange">오렌지</li>
  <li>망고</li> <!-- Selected -->
  <li>사과</li> <!-- Selected -->
</ul>