> For the complete documentation index, see [llms.txt](https://shhn0509.gitbook.io/make-better-netflix-website/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://shhn0509.gitbook.io/make-better-netflix-website/styling/scss-project-log/main/header.md).

# Header

header 부분의 작업 과정을 기록합니다.

## 기록하기

1. 설계! 설계! 설계가 정말 중요하다. 그래야 고생을 덜 한다. 클래스 하나 바꿨더니 수정해야 할게 너무 많다. 처음부터 컴포넌트 이름이나 클래스명을 다 설계하자 천천히 가는 것 같지만 그게 제일 빠른 길이다.

## 기억하기

### \<img> 요소에 사이즈 입력하기

단축키 : `ctrl` + `shift` + `I` (MAC 기준)

```markup
<img src="assets/Logo.svg" alt="홈링크" width="870" height="236" />
```

{% hint style="info" %}
[왜 이미지 사이즈를 입력해야 할까?](https://shhn0509.gitbook.io/make-better-netflix-website/web-optimization#image-size) 링크에 들어가서 설명 보기!&#x20;
{% endhint %}

### 반응형이 부자연스러울 때

#### 문제&#x20;

시안에 나와있는 대로 컴포넌트 `Container`에 `margin`값으로 속성을 주었다. 그러다 보니 반응형으로 페이지를 확인해 봤을 때 960\~1299px 너비에서 아래 이미지와 같이 콘텐츠가 화면의 양 옆에 붙어버렸다.&#x20;

![화면의 양 옆에 콘텐츠가 붙는다](https://1395688247-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MPJVY9pwxuf9ZCGI1gj%2F-MRf2pMKY9SWM8kLFX7i%2F-MRfDGs-7lkfczh6KJ2G%2Fimage.png?alt=media\&token=abc3159f-99de-4b52-be5e-ea109bf1e792)

{% embed url="<https://youtu.be/ik2q1qjCsIM>" %}

#### 해결

```css
.Container {
  @include mx(percentage(18/375));

  @include media('>=lg') {
    max-width: 92vw;
    @include mx(auto);
  }
```

`max-width: 92vw`을 적용해 주었다.&#x20;

#### 공부&#x20;

이런 경우에 반응형 웹에서 자주 사용되는 단위를 사용해서 적용하자! → `vw`, `vh`, `vmax`,  `vmin`, `%`, [`calc()`](https://developer.mozilla.org/ko/docs/Web/CSS/calc\(\)) 등&#x20;