[css] tips (:not, margin auto, overflow-x)

@charset 'utf-8';

html {
  font-family: "Noto Sans KR", sans-serif;
  font-size: 14px;
}
body {
  /* 가로 스크롤 안 생기게 */
  overflow-x: hidden;
  color: rgb(29, 29, 31);
  letter-spacing: -0.05em;
  background: white;
}
p {
  line-height: 1.6;
}
a {
  color: rgb(29, 29, 31);
  text-decoration: none;
}

.global-nav {
  height: 44px;
}
.local-nav {
  height: 52px;
  border-bottom: 1px solid #ddd;
}
.global-nav-links,
.local-nav-links {
  display: flex;
  align-items: center;
  max-width: 1000px;
  height: 100%;
  margin: 0 auto;
}
.global-nav-links {
  justify-content: space-between;
}

.local-nav-links .product-name {
  /* margin auto는 내가 가질 수 있는 영역을 다 써서 소비함 */
  margin-right: auto;
  font-size: 1.4rem;
  font-weight: bold;
}
.local-nav-links a {
  font-size: 0.8rem;
}
/* :not은 제외한다는 뜻! */
.local-nav-links a:not(.product-name) {
  margin-left: 2em;
}

margin: auto;

내가 가질 수 있는 영역을 다 써서 소비하므로 여백을 효율적으로 조절 가능
(AirMug Pro 참고)
따라서 margin: 0 auto; 양쪽 여백 다 쓰고 가운데 위치하게 하는 것

:not(){}

특정 id나 class명을 () 안에 넣어서 효과 제외할 수 있음!

overflow-x: hidden;

가로 스크롤 안 생기게
overflow-y: hidden; 세로 스크롤 X