# Our Story

먼저 `ourStory`의 각 `<p>`요소를 스타일링 하기 전에 **일관성**을 위해각 `margin-bottom`은 0으로 하고 **`margin-top`에만 값을 주는 것**으로 정한다.

**ourStory\_\_headline**

* 고민하기\
  디자인 시안에 보면 `영화, TV 프로그램을<br />무제한으로.`의 형태로 줄바뀜이 되어있다. 어떻게 설계해 줘야 할까? (최선의 방법을 찾아서...)
  * `html`마크업에 `<br />` 요소를 추가한다.\
    스크린 리더 사용자에게 좋지 않은 사용자 경험을 제공한다. 스크린 리더가 `<br />` 요소를 읽어 줄 때 "영화, TV 프로그램을" 하고서 한참 위에 "무제한으로."라고 읽어 주기 때문에 사용자가 내용을 파악하기에 어려운 점이 있다.
  * 각 줄 마다 `<span>`요소로 감싸준다.\
    `<span>영화, TV 프로그램을</span><span>무제한으로.</span>` 이렇게 마크업하고서 `display: block`을 사용해서 스타일링하는 방법이 있다. 하지만 의미가 없는 구조이기 때문에 딱히... 맘에 들지는 않음...
  * `width`값을 주어 원하는 모양이 나오도록 하기\
    모바일 고정 `display`라면 상관 없겠지만 나중에 데스크탑 버전 또한 만들어야 하기 때문에 올바른 방법은 아니다. 또한 사용자가 글자의 크기를 변경 했을 때 글자가 아래로 무너지는 형태가 되는 것도 고려해야 한다.
  * `padding`값을 주기\
    데스크탑 버전으로 바꿨을 때 한 줄로 변한다.
  * 🎯 **결정한 최선의 방법!** `<br />`을 사용하고 `role="text"`를 사용한다.\
    이 방법을 사용하면 [`role="text"`](http://ssamo.info/2019/11/27/roletext/)가 한 문장임을 인식하고 끊어 읽지 않고 자연스럽게 읽어 준다.[![](https://github.com/hanna244/make-better-netflix-website/raw/master/TIL/assets/20201128_TIL_attached_file1.jpg)](https://github.com/hanna244/make-better-netflix-website/blob/master/TIL/assets/20201128_TIL_attached_file1.jpg)

**ourStory\_\_description**

* 놓친 부분
  * 디자인 시안에서 `text-shadow` 잊지 말고 확인하기 매몰차게 무시하고 있었음...🥺
* 고민하기\
  `ourStory__headline`과 마찬가지로 줄바뀜이 되어있다. 하지만 좀 더 고려해야 할 점은 데스크탑 버전에서 한 줄로 바뀐다. 그래서 위의 단락과 마찬가지로 `<br />`를 사용한다면 유지보수 관점에서 볼 때 옳은 방법은 아니다.
  * `width` 값을 사용한다면 `font-size`를 `2rem`으로 조금 키우기만해도 글자가 아래로 무너진다. 이때 글자 크기를 키울 때 `transform: scalc()`을 사용해주면 아래로 무너지지 않고 글자의 크기만 커지고 작아진다. 그래서 미디어쿼리를 이용해서 데스크탑 버전에서 글자의 크기를 키우는 방향으로 하자. 이 방법도 문제가 하나 있다면 위의 단락과의 마진 간격에 영향을 준다는 것! 그래도 글자가 아래로 무너지는 것보다는 나은 방법이니 `width` 값을 주고 `transform`을 사용하는 것으로 선택!

```
.ourStory__description {
  width: 20rem;
  transform: scalc(1.5)
}
```

```
.ourStory__description {
  text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.55);
}
```

**ourStory\_\_emailRegistration**

데스크탑 버전에서도 똑같이 줄바꿈이 되어있기 떄문에 `<br />` 사용한다.

**Background Image**

* 고민하기
  * **배경이미지를 어떻게 헤더영역에도 보이게 할까?**\
    많이 고민 했던 부분이다. 배경이미지가 `<main>`의 `ourStory`뿐만아니라 `<head>`까지 포함해서 배경으로 적용되있다는 것이다. 처음엔 컨테이너로 묶을 생각을 했지만 `ourStory`는 `<main>`의 자식요소 이기때문에 말도 안되는 소리였다.
    * 해결!\
      헤더에 `p:f`를 적용하고 컨텐츠를 부유하게 만들어서 `ourStory`에 적용한 배경이미지가 헤더의 공간에도 보이도록 만드는 방법이 있다. 와우\~!😝
  * **배경이미지를 반투명하게 하는 방법은?**\
    배경이미지가 반투명하게 음영처리가 되어있다. 이것을 딤(`dim`)/딤드(`dimmed`)라고 한다. 왜냐하면 딤처리가 되어있지 않은 일반 배경이미지에 흰색 글씨는 한 눈에 알아보기 쉽지 않기 때문이다.
    * 디자인 시안에 보면 `linear-gradient`속성을 이미지 커버에 적용한 것을 확인 할 수 있다. 해당 코드를 `inspect`에서 확인해서 가져오도록 한다. (여기서 중요한 것은 해당 디자인에 적용한 효과를 어떻게 찾아내고 어디서 코드를 가져오는지 과정을 기억해야 한다.)
  * **`background` 속기형으로 입력하기**

    1. `background`와 `background-size` 따로 입력하기
    2. `background`에 모두 입력하기\
       커버와 이미지를 동시에 적용했는데 `background-size`도 같이 한 줄에 입력할 수 있을까? **가능!**
    3. `b`의 코드를 좀 더 간소화 해보자\
       `linear-gradient`는 효과이기 때문에 `no-repeat`없어도 된다. 배경이미지는 뒤의 사이즈와 딱 알맞기 때문에 `no-repeat`이 없어도 이미지의 변화가 없다. 그리고 둘다 `X`/`Y`축 전부 `center`이기 때문에 `center` 한 번만 작성한다.

    ```
    .ourStory {
      /*  a  */
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 5.68%, rgba(0, 0, 0, 0.3) 42.95%, rgba(0, 0, 0, 0.8) 79.3%), url("../../assets/Cover.jpg") no-repeat center center;
      background-size: 
      cover, /* linear-gradient, 커버효과이기 떄문에 auto, container 모두 가능 */  
      cover; /* 배경 이미지 */

      /*  b  */
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 5.68%, rgba(0, 0, 0, 0.3) 42.95%, rgba(0, 0, 0, 0.8) 79.3%) no-repeat center center / auto, url("../../assets/Cover.jpg") no-repeat center / center;
      
      /*  c  */
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.9) 5.68%, rgba(0, 0, 0, 0.3) 42.95%, rgba(0, 0, 0, 0.8) 79.3%) center / auto,     url("../../assets/Cover.jpg") center / cover
    } 
    ```
* `<background-size>` 값은 `<background-position>` 바로 뒤에만 위치할 수 있으며 '/'로 구분한다.
* `background`에 배경이미지와 커버, 이 두 가지를 같이 겹쳐서 넣은 것이다.
* `background` 속기형 : 이미지, 반복, 위치, 사이즈

**input의 label에 이벤트 바인딩 하기**

`input`에 포커스가 갔을 때 `label`이 위로 올라가는 이벤트를 걸어준다.<br>

`input`요소에 `promotion__emailContainer--focus` 상태 클래스를 추가/제거하는 이벤트를 사용한다.\
`focus`와 `blue` 이벤트를 사용한다.<br>

처음에 내가 만든 이벤트 구분. 나는 잘 했다고 생각했는데 브라우저에서 확인 해보니 `input`창에 `focus`를 하기 전부터 콘솔패널에 `'focus'`가 기록이 되었다.\
자! 문제를 보자. 이벤트메서드의 두번째 인자는 콜백함수가 들어간다. 하지만 나는 나중에 실행되는 함수를 입력한 것이 아니라 바로 `console.log('focus')`를 입력하니 내가 `focus`를 하기 전부터 실행이 되어 버린 것이다. 다시 기억하자!

```
emailInput.addEventListener('focus', console.log('focus'))
```

사용한 이벤트 구문 ↓

```
const emailContainer = document.querySelector('.promotion__emailContainer')
const emailInput = emailContainer.querySelector('input')

// 함수 사용 전 
emailInput.addEventListener('focus', () => console.log('focus'))
emailInput.addEventListener('blur', () => console.log('blur focus'))

// 유틸리티 함수 사용
emailInput.addEventListener('focus', () =>
  emailContainer.classList.add('promotion__emailContainer--focused')
)
emailInput.addEventListener('blur', () =>
  emailContainer.classList.remove('promotion__emailContainer--focused')
)
```

#### promotion

**promotion\_\_emailContainer**

`input`에 포커스가 가게 되면 `label`의 위치가 위로 올라가게 된다. 이떄 `position`으로 위치를 잡아주는 것으로 한다.

**promotion\_\_emailContainer input**

* 너비와 높이의 값을 고정시켜서 디자인해서는 안됨. 왜? 데스크탑 버전까지 고려해야 하기 때문이다. `padding`을 사용해서 위치 조정한다.
* `input`은 사용자가 텍스트를 입력하는 곳이기 떄문에 `font-size`를 고려해야 한다.
* 왜 `width`가 아닌 `min-width`를 사용했을까?\
  데스크탑 버전을 생각해야 하기 때문에 너비가 늘어나는 경우를 고려해야 한다.

```
.promotion__emailContainer input {
  min-width: 22.8rem;
  border: 0;
  border-radius: 50px;
  padding: 1.3em 1.5384em 0.8461em;
  font-size: 1.3rem;
  background: var(--colorWhite);
}
```
