# Our Story

## 기록하기

\-- 주제에 맞는 짧은 헤드라인\
\-- 소제목(문제, 원인, 해결방법 )<br>

### 파일을 불러오지 못한다&#x20;

#### 문제&#x20;

`background-image`가 아무리 해도 화면에 로딩 되지 않는다. 혹시나 해서 `background-color`를 이용해 색상을 넣었는데 된다?! 속성은 적용이 되지만 왜 파일은 불러오지 않는 것일까? 도대체 뭐가 문제일까?

![](/files/-MPQcupaxzVreLjzSCeB)

#### 원인 및 해결&#x20;

Network 패널에 들어가 해당 이미지 파일을 확인해보니 왜 로딩 되지 않았는지 알 수 있었다.

이미지를 보면 `dist`폴더에서 이미지를 불러 온다. 즉, `Sass`가 아닌 `CSS` 파일 기준으로 이미지를 탐색해야한다.

![작업 파일과 컴파일 되는 파일의 이미지 경로가 같아야 한다. ](/files/-MS4cfWrItB04eS2mfaZ)

### grid에 고정값을 주면 생기는 이슈 &#x20;

![](/files/-MPQcupdT-1xPSulL7_-)

#### 문제&#x20;

컴포넌트 `Promotion`의 마지막 자식요소는 `"신규 회원..."` 단락이다. 하지만 무슨일인지 `padding-bottom`값을 주었지만 마지막 요소부터 적용되는 것이 아니라 위의 이미지와 같은 오류가 생긴다.

#### 원인&#x20;

이유는 `.Container`의 마지막 열에 `grid-template-rows`고정값을 주었기 때문에 가변 되지 않았던 것이다.&#x20;

```css
.OurStory {
  .Container {
    display: grid;
    grid-template-rows: rem(122px) rem(68px) rem(175px);
  }
}
```

#### 해결&#x20;

해결 방법이 무엇일까? 바로! [`minmax()`](https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Grids#minmax_%ED%95%A8%EC%88%98) 함수를 사용하는 것이다. 이 함수를 사용하면 컨텐츠의 크기에 따라 가변 한다.&#x20;

`grid`사용해서 반응형 웹을 만들 땐 해당 함수를 잘 이용하는 걸로\~!

[\[MDN\]Grid → minmax()](https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Grids#minmax_%ED%95%A8%EC%88%98)

```css
.OurStory {
  .Container {
    display: grid;
    grid-template-rows: rem(122px) rem(68px) minmax(rem(172px), auto);
  }
}
```

이런 오류를 겪고나니 고정값이라는 것이 참 유지보수가 힘들다는 것을 알았다. 고정값으로 작업을 하면 당장은 잘 구현되는 것 같지만 그게 아니다. 이제는 조금 더 시야를 넓게 보고 해당 속성을 사용했을 때 어떻게 구현 되는지 앞서 생각할 수 있어야겠다.

### Promotion에 그리드는 안맞는다.&#x20;

#### grid와 flex

{% hint style="info" %}
`grid`를 사용해 보겠다고 온갖 콘텐츠에 적용하려고 했으나 그리드를 사용해야하는 상황과 아닌 상황을 구분하자.\
일단은 공부하는 중이니 공부하는 마음으로 활용하기&#x20;
{% endhint %}

~~먼저, 화면의 큰 레이아웃을 잡을 때는 `grid`가 간편하고 쉽다. 하지만 그 안에 작은 컨텐츠의 레이아웃은 `flex`로 하는 것이 더 좋을 듯하다.~~\
격자 또는 블럭 식으로 되어있는 레이아웃에는 `grid`가 간편하다. 하지만 간단히 레이아웃을 잡을 거라면 `flex`를 사용하는 것이 더 알맞다.&#x20;

왜냐하면 반응형 웹 페이지를 만들 때, 레이아웃이 가변하거나 위치가 변하는 경우를 생각해야 한다. 하지만 반응형까지 고려해서 컨텐츠의 행과 열의 수치를 각각 설정하는 것이 쉽지 않다.

또한 기존의 부모 요소에 그리드가 적용되어 있어서 간혹 자식 요소에 그리드를 설정할 때 부모요소의 그리드 행과 열 때문에 원하는 대로 위치 잡는 것이 힘들다.

![\[예시 - 1\] emailContainer에 grid를 설정](/files/-MPQcupkUXuqqgebtEEv)

![\[예시 - 2\] 부모 요소인 OurStory에 설정된 grid를 제거 했을 때](/files/-MPQcupl4ZReK5ykHShE)

`[예시-1]`은 `emailContainer`에 `grid`를 설정을 때 상황이다. 자식요소가 2개이기 때문에 컨텐츠의 개수에 맞춰 `[예시-2]`처럼 나올 줄 알았으나 아니었다.

`[예시-2]`는 `[예시-1]`의 문제를 확인하고 부모 요소인 `OurStory`에 설정된 `grid`를 제거 했을 때이다.

위에 설명한 대로 부모요소와 자식요소 모두에 `grid`를 설정 했을 때 이런 문제를 만날 수 있다.

(그래도 `grid`이용해서 테스트 한 것 코드 커밋 이라도 해둘걸... 저장해둔 코드가 없어서 설명이 힘들다.)&#x20;

### input → Sass 선택자 중첩 실수

#### 문제&#x20;

`.emailContainer`의`<input>`에 상태클래스를 적용할 때 Sass의 선택자 중첩을 잘못 사용하는 바람에 스타일링이 적용이 되지 않았다.&#x20;

#### 원인&#x20;

상태 클래스를 중첩 할 때 각각 다른 상태일 땐 그에 맞게 따로 선택자를 입력해줘야 하지만 코드가 많아지고 2-3번 중첩되다 보니 헷갈렸다.

`.emailContainer__block`와 `emailContainer__block--invalid`는 각각 다른 상태이다. 하지만 위에서 보다시피 `__block` 안에 `--invalid`를 넣어줬다.

**올바르지 않은 중첩 선택자 사용 예시**

```css
.emailContainer {
  &__block {
    input:focus + label,
    &__block--valid label,
    &__block--invalid label {
      top: 3px;
      left: 20px;
      font-size: rem(11px);
    }

    // 또는 

    [role='alert'] {
      display: none;
    }

    &__block--invalid [role='alert'] {
      display: block;
    }
  }
}
```

각각 다른 상태는 나타내는 클래스를 중첩할 때는 아래와 같이 따로 작성해야 한다.

**올바른 중첩 선택자 사용 예시**&#x20;

```css
.emailContainer {
  // emailContainer____block
  &__block {
    input:focus + label {
      top: 3px;
      left: 20px;
    }

    [role='alert'] {
      display: none;
    }
  }

  // emailContainer____block--valid (--nvalid)
  &__block--invalid [role='alert'] {
    display: block;
  }

  &__block--valid label,
  &__block--invalid label {
    top: 3px;
    left: 20px;
  }
}
```

### form요소에 Grid는 안맞는다.&#x20;

여기에도 `grid`를 사용해보려고 했다. 혹시나 했는데 역시나 잘 안된다.&#x20;

#### 문제&#x20;

상태 클래스를 사용해서 아래의 이미지 처럼 \<input>과 \<button>의 위치가 나란히 위치하도록 만들고 싶었다. 하지만 grid를 사용해서는 이렇게 만드는 것이 쉽지 않았다.&#x20;

![내가 구현하려고 했던 모양 두 콘텐츠가 나란히 위치하도록 하고 싶었다. ](/files/-MS4ibo38cFiTp3ECDVd)

![모바일 버전에서 row 상태 클래스를 설정하지 않았을 때](/files/-MPQcupe8gOo-Xt_sDBv)

![row 상태 클래스를 설정했을 때](/files/-MPQcupfdZInvmAtCAKF)

```css
.emailContainer {
  display: grid;
  grid-template-columns: 1fr minmax(rem(121px), auto) 1fr;
  grid-template-rows: 1fr minmax(rem(34px), auto);

  &__block {
    grid-row: 1;
    grid-column: 1/-1;
  }

  button {
    grid-row: 2;
    grid-column: 2;
  }
}

.emailContainer--row {
  grid-template-columns: 1fr minmax(rem(131px), auto);
  grid-template-rows: 1fr;

  &__block--row {
    grid-column: 1/2;
  }

  button {
    grid-row: 1;
  }
}
```

### flex 적용 시 button 모양 변형 이슈

#### 문제 &#x20;

`grid`로 레이아웃 잡는 것을 실패하고 `flex`를 적용했을 때 버튼의 너비가 컨테이너의 크기만큼 커지는 현상이 발생했다.

![\[flex 적용 전\]](/files/-MPQcupg88rM-VAnXdVn)

![\[flex 적용 후\]](/files/-MPQcuphetTUZguMZVOH)

#### &#x20;해결&#x20;

버튼에 margin 값을 주어 크기를 잡았다.&#x20;

![\[button에 margin-left/ right: auto 설정\]](/files/-MPQcupiOiKJDjQkZfDO)

### button 높이 변형

#### 문제&#x20;

위와 같이 Desktop 버전에서 `valid/invalid` 상태일 때 `button`의 높이가 변한다.

![](/files/-MPQcupjspWd-HcO45FZ)

#### 해결&#x20;

인접 형제 선택자를 사용해서 `valid/invalid` 상태일 때만 높이가 `60px`에 고정되도록 했다.

```css
&__block--valid,
&__block--invalid {
  @include media('>=lg') {
    + button {
      height: rem(60px);
    }
  }
}
```

### Button 정렬 바꾸기&#x20;

![input invalid 상태일 때, 버튼의 위치가 맞지 않는다. ](/files/-MPjXrK2z86vHNE7Q-Dj)

#### 문제&#x20;

`<input>`이 `:invalid` 상태 일 때, 버튼의 위치가 `<input>`과 맞지 않는다. &#x20;

#### 원인

`.emailContainer`에 아이템의 위치를 정렬하기 위해 `align-items: center`이 설정되어 있었다.  \
하지만 `<input>`의 경고 메세지 때문에 `.emailContainer`의 높이가 바뀌었을 때, 아래와 같이 두 콘텐츠가 높이가 맞지 않는 현상아 나타났다.&#x20;

![invalid 상태 일 때, .emailContainer의 높이 ](/files/-MPjZmXQirkUjYB46rwA)

#### 해결

`<button>` 요소만 교차축 정렬 속성을 주었다.  `align-self: flex-start`로 해결!


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://shhn0509.gitbook.io/make-better-netflix-website/styling/scss-project-log/main/our-story.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.