# components

* 공통 스타일 또는 컴포넌트는 처음부터 다 만들지 말고 작업을 하면서 하나씩 만들기
* `normalize`는 먼저 구글링으로 갖고 오기 주석 지우고 코드 한줄로 만들기

#### components

**Container**

* 컨테이너 좌/우 마진 값 계산할 때 `%`이용하기! 그리고 `calc()`이용해서 계산하는 방법 잘 기억해 두기

```
.Container {
  margin: 0 calc(18 / 375 * 100%);
}
```

* 넷플릿스에 `column`으로 스타일 적용할 수 있는 요소들이 있다. 그때마다 `flex-flow: column wrap;` 따로 적용하지 말고 `column`상태의 클래스를 만들어 적용하면 유지보수가 편하다

```
.Container--column {
  flex-flow: column wrap;
  justify-content: flex-start;
}
```

* 미디어 쿼리에 고정값을 사용하는 이유는 와이드 스크린이 설정 되었을 때 로고와 로그인 링크가 너무 좌우로 벌어지면 사용자 경험이 좋지 않기 때문에 두 컨텐츠의 간격이 일정 간격이상 멀어지지 안도록 최대 너비 설정
* `margin: 0 auto;`는 빈 공간을 양분한다. 수평으로 가운데 정렬한다. 단, `auto 0`은 적용이 불가능한 이유는 기본값이 `0`이기 때문에 수직으로 가운데 정렬이 적용되지 않는다.

```
@media (min-width: 60rem /* 960px/16 */ ) {
  .Container {
    min-width: 90rem;
    margin: 0 auto;
  }
}

@media (min-width: 90rem /* 1440px/16 */ ) {
  .Container {
    max-width: 120rem;
  }
}
```

**HomeLink**

기존의 `body`에 설정된 `font: 1.6rem/1.5;` 때문에 `h1`에 폰트 사이즈 만큼의 공간이 생겨서 `a`요소가 `h1`의 공간을 벗어나는 이슈가 생겨버린다. 그래서 `HomeLink`의 폰트 사이즈를 줄였다.

```
.HomeLink {
  font-size: 1rem;
}
```

**Link**

버튼의 `padding`값을 구할 때 디자인 시안에 소수점으로 나와 있어서 어떻게 계산을 해야 할지 몰랐다. 먼저 혼자 할 때는 그냥 반올림으로 임의로 계산을 했다.

* 디자인시안이 소수점일 때 계산 방법
  * `padding-top:` 5.5px / 11px = 0.5(em)

```
.Link {
  padding: 0.5em 0.6818em 0.7rem;
  font-size: 1.1rem;
}
```

####