# 기록

## 기록하기

* 미디어 쿼리 해상도에 변수를 사용하려고 했으나 먹지 않는다. 
  * 변수를 사용하지 못하니 번거로운 점이 있다. Sass가 그리워진다. <br>
* 폰트사이즈와 라인하이트의 값이 같을 때는 라인하이트를 1로 한다.<br>
* 로그인 링크 `border-radius: 0.4rem;` 컴포넌트 값으로 함<br>
* 콘텐츠의 테두리를 boder로만 설정한다는 고정관념은 버리자!&#x20;
  * [box-shadow](https://developer.mozilla.org/ko/docs/Web/CSS/box-shadow)를 사용할 수도 있다. <br>
* `<a>`요소와 `<h1>` 요소의 크기가 같지 않았던 이유
  * `<a>` 요소는 `<h1>`의 글자 크기만큼 커지기 때문이다.
  * `<h1>`요소에는 임의로 너비 높이 값을 설정했기 때문에 로고 사이즈와 같은 크기가 설정되어 있지만 `<a>`요소는 `<h1>`요소에 기본적으로 설정되어 있던 글자 크기인 `2em`을 상속받아 크기가 설정되어 있었다. 그래서 넷플릭스가 아래로 내려와 있는 것이다.
  * 해결 → `<h1>`요소에 글자크기를 `1rem`만큼 주니 해결되었다.[![](https://github.com/hanna244/make-better-netflix-website/raw/master/TIL/assets/20201128_TIL_attached_file2.jpg)](https://github.com/hanna244/make-better-netflix-website/blob/master/TIL/assets/20201128_TIL_attached_file2.jpg)
  * `<a>`가 넘어 가는지 아닌지 확인하기 위해서는 임의로 `1rem`으로 주고 `<h1>` 요소에 `overflow: hidden`을 적용해서 확인

![](https://1395688247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPJVY9pwxuf9ZCGI1gj%2F-MS5-r5oYtyZwsCgfEa8%2F-MS50-PpKU8-GqnExzW-%2Fimage.png?alt=media\&token=187709a8-7b70-49d6-b935-2e9cd1e52dac)

* ourStory가 아닌 다른 컨테이너는 수직 방향으로 디자인 되어있다. 그래서 column 상태 클래스를 만들어준다.<br>
* 페이지 별로 만들거니까 body에 class명을 home으로 추가 고유하기 때문에 id 값을 주기도 한다<br>
* 헤더를 브라우저 상단에 고정하기&#x20;

```
.netflixHeader--fixed{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
```

```
.netflixHeader--fixed{
  position: fixed;
  width: 100%;
  top: 0;
}
```

* 접근성은 색으로만 구분하는 것이 아니라 . 형태적으로 구분하기도 한다.<br>
* 링크가 포커스 됐을 때 테두리는 공용스타일로 만들 수 있기 때문에 기본 스타일로 적용한다.

## 질문하기

* 접근성 `:focus`에 `border`가 아닌 `box-shadow`를 적용한 이유
  * `border`는 사각형 모양으로만 테두리가 그려진다. 반면에 `box-shadow`는 컨텐츠의 모양 그대로 테두리가 그려진다. 그래서 `box-shadow`를 사용했다.<br>
* `:focus-visible`란?
  * `:focus-visible`는 키보드로 접근했을 때, 보이는 상태이다.<br>
* `<input>`의 `border`를 지워도 괜찮은가? (접근성)
  * `<input>`의 `border`는 0으로 적용해도 되지만 `outline`는 없애면 안된다. 만약 `outline`을 지운다면 대체 방법으로 `box-shadow`를 적용해 주면 된다.

## 고민하기

**1.스크린 너비 376-1439px 사이에서는 컨테이너의 `margin` 좌/우 공간이 생기지 않음**

`calc(18 / 960 * 100%)`을 적용했으나 `1440px` 이상 사이즈에서는 컨테이너가 좌측으로 치우침

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

**2.`ourStory`의 `promotion`**

* 데스트탑 버전에서 `<input>`과 `<button>`을 수평으로 나란히 두기 위해 `promotion__emailContainer`에 `inline-block`을 적용했다
* 나란히 두니 `<input>`과 `<button>` 사이에 공간이 생겼다. `promotion__emailContainer`때문에 생긴 공간인데 원인이 뭔지 모르겠다. 일단 임의로 음수값을 주어 빈 공백을 없앴다.

```css
@media (min-width: 60rem)
.promotion__emailContainer {
    display: inline-block;
    margin-right: -0.432rem;
}
```

**3.데스크탑 버전에서 `<input>`과 `<button>`의 높이를 어떻게 같도록 할까?**

**4. 브라우저의 너비가 넓어지면서 텍스트가 자연스럽게 펼쳐지게 하기 위해서는 내가 스크린의 사이즈 별로 너비를 적용하면 될까?**