200911__CSS 실수하기 쉬운 부분

1. z-index는 postion과 함께 적용해야 한다.

원하는 div에 z-index를 붙인다고 해서 order가 적용되지 않는다.
element의 position 속성을 우선 설정 후,
z-index를 설정해준다.

또한, 웹 페이지에 기본적으로 element마다 부여되는 stacking order에 의해서
z-index가 적용되지 않을 수 있다.
이럴 땐, 순서 변경을 원하는 element에 각각 position과 z-index 속성을 추가하자.

2.스크롤 부드럽게 이동하기.

a 태그를 이용해서 navbar에 적용시키면, 해당 메뉴로 이동할 때마다 너무 정없이(?)
휙휙 스크롤이 이동한다.
이 때, 제이쿼리를 이용해야 하나 고민했는데, 알고보니 CSS만으로도 구현할 수 있었다.

html {
  scroll-behavior: smooth;
}

3. background 설정 시,

background-size: cover;
background-position: center center;
로 해두면 설정한 영역에는 다 덮히되, 가운데로 조정된, 영역 초과분은 제거된
백그라운드를 볼 수 있다.

4. 수직에 대한 %는 높이가 아니라 너비에 비례한다.

5. 수직 공간(위 또는 아래)에 대한 퍼센트는 높이가 아닌 너비에 비례한다.
   margin-top/bottom, padding-top/bottom에 퍼센트를 쓰면 너비에 비례해서 값이 바뀌네요. 왜 이렇게 만든 걸까요... - taegon.kim 블로그

(참고)
https://medium.com/@erwinousy/z-index%EA%B0%80-%EB%8F%99%EC%9E%91%ED%95%98%EC%A7%80%EC%95%8A%EB%8A%94-%EC%9D%B4%EC%9C%A0-4%EA%B0%80%EC%A7%80-%EA%B7%B8%EB%A6%AC%EA%B3%A0-%EA%B3%A0%EC%B9%98%EB%8A%94-%EB%B0%A9%EB%B2%95-d5097572b82f

https://taegon.kim/archives/9807