> 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/css-main/header-1/qna.md).

# QnA

## Q1. 질문

`.ourStory`에 적용한 `padding-top:6.6rem`을 `main`에 적용해도 될까요? `main`이나 `body`영역 같은 경우에는 공용 요소이기 때문에 공간에 대한 속성을 되도록 적용하지 않는 것이 좋을까요?

### A1. 답변<br>

상황에 따라 다를 수 있어요. 현재 디자인은 작성된 구조에 맞춰 `header`와 `main`의 각 콘텐츠를 임의로 연결 배치한 것이지만, 실제 Netflix 사이트의 헤더와 동일한 구조로 연결 지을 경우 별도로 `padding`을 설정할 필요가 없어지죠.

현재 코드 상에서 `.ourStory` 요소에 적용된 `padding-top` 속성을 `main` 요소로 이동시켜도 동일한 결과를 보여줍니다. 해당 속성을 설정한 이유가 고정 위치 설정된 `header`에 연결된 형태로 표시하기 위함이므로 `main` 요소에 `padding` 속성을 설정해도 문제가 되지는 않습니다. 😁<br>

## Q2. 질문

`.resetImg`에 `width: 100%`, `height: auto`을 공용 속성으로 적용해도 괜찮나요?

### A2. 답변

`width: 100%; height: auto;`는 반응형 이미지 설정이므로 `.resetImg` 클래스에 포함하지 않는 것이 좋습니다. 해당 클래스는 말 그대로 이미지를 초기화하는데 목적을 두기 때문이죠. 반응형 이미지 설정은 `.rwdImg`와 같은 클래스로 별도 관리하는 것이 좋습니다.

```
.rwdImg {
  width: 100%;
  height: auto;
}
```

## Q3. 질문

`netflixIntro__downloadContent` 코드 리뷰 같이 하기. (Q3-4 연결)

* flex와 position을 같이 사용해도 괜찮나요?

### A3. 답변<br>

그럼요. `position` 설정과 `display: flex` 설정은 함께 사용 가능해요. 😃

다만, `position` 설정일 경우 `display` 값은 `block` 이지만, `display: flex` 설정에 의해 화면에 표시되는 모드는 `flex`로 변경됩니다. 다시 말해 래퍼 박스는 포지셔닝 되지만, 내부의 자식 요소는 Flexbox 레이아웃이 적용됩니다.<br>

## Q4. 질문

`netflixIntro__downloadContent`에 `position: absolute;`을 적용한 다음 `margin-bottom` 값으로 `img`위에서 위치를 조정하려고 했으나 `img`가 형제 요소이기 때문에 컨텐츠가 `img` 올라가지 않았다. 결국 `bottom`값으로 위치를 잡았다.

* 위에 설명을 이렇게 적긴 했지만 왜 `absolute`를 적용했을 때 바로 부유되지 않나요?
* `position` 속성은 위치 속성을 적용했을 때 실행되나요?

### A4. 답변

절대(`absolute`) 위치가 설정되어도 별도로 위치(`top`, `left` 등) 속성을 지정하지 않을 경우, 정적(`static`) 위치를 유지하는 블록으로 인해 부유된 것처럼 보이지 않습니다.

> **절대 위치 설정에 별도의 CSS 오프셋(Offsets)이 지정되지 않은 경우:**\
> **브라우저는 블록을 포함하는 정적 위치를 계산하고 해당 위치를 오프셋합니다.**

하지만 CSS의 기술 표준사양은 정적 위치를 포함하는 블록의 위치를 결정하는 방법을 정확히 명시하지 않아, 결과적으로 브라우저 마다 다르게 렌더링합니다. 예를 들어 Chrome 브라우저는 정적 위치를 계산하는 알고리즘이 다소 모호하여 페이지를 새로 고침 할 때마다 결과가 달리지기도 합니다. 그러므로 **절대 위치를 설정한 경우, 별도의 오프셋을 지정해 정적 위치 계산이 반영되지 않도록 설정하는 것이 좋습니다.**

참고 [CSS 2.2 → 10.3.7 Absolutely positioned, non-replaced elements](https://www.w3.org/TR/CSS22/visudet.html#abs-non-replaced-width)<br>

## Q5. 질문

`netflixIntro__description`에 `inline-block`과 `inline`을 각각 적용했을 때 자식 요소 `<p>`의 모양? 형태?에 왜 차이가 있나요

### A5. 답변

`.netflixIntro__description` 요소의 표시 모드를 바꿔가면서 문제를 해결하지 않아도 내부의 단락을 중앙 정렬할 수 있습니다. `width` 값이 설정되어 있으므로 아래와 같이 `margin`을 설정하면 원하는 레이아웃을 구현할 수 있습니다.

```
.netflixIntro__description p {
  margin: 3rem auto 0;
  /* ... */
}
```

하지만 질문은 `inline-block`, `inline` 값을 설정했을 때 왜 내부의 자식 요소 `p`의 표시가 달라지는가 이므로 관련해서 답변드려봅니다. 먼저 각 박스의 표시 상태에 대해 정리하면 다음과 같습니다.

| 표시 상태          | 설명                                     |
| -------------- | -------------------------------------- |
| `block`        | 블록 박스로 렌더링, 요소의 앞/뒤에 줄바꿈 생성            |
| `inline`       | 인라인 박스로 렌더링, 공간이 있을 경우 다음 요소가 같은 줄에 표시 |
| `inline-block` | 인라인 박스로 렌더링 하나, 블록 박스처럼 크기 설정 가능       |

일반적으로 `inline` 표시 상태는 `block` 상태에 비해 크기 지정에 대한 제한이 있어 별도로 사용자가 요소에 설정해 사용하지 않습니다. 반대로 `<span>`, `<a>`와 같은 인라인 요소를 `block` 표시 상태로 설정해 레이아웃 하는 경우는 빈번합니다. 크기에 대한 제한이 해제되어 자유로워 지기 때문이죠.

그리고 `inline-block`은 `block`과 마찬가지로 크기에 대한 제약이 풀리지만 레이아웃의 흐름은 `inline`과 동일하므로 유용하게 사용될 수 있습니다. 다만, 브라우저 마다 각기 다른 렌더링 처리 문제로 과거에는 자주 사용되지 않았습니다. 그러므로 사용 시 브라우저 호환성 체크가 필요합니다.

정리하면 `inline`으로 표시되는 요소를 `inline-block` 또는 `block`으로 표시하여 레이아웃 하는 경우는 잦아도, 반대인 경우는 희소합니다.<br>

## Q6. 질문

`posterStrangerThings`의 이미지가 깨지는 현상이 나타납니다. 혹시나 해서 `.png`를 사용해 봤지만 결과는 똑같았습니다. 해당 이미지의 화질을 유지하기 위해서 어떤 방법을 사용해야 하나요?

### A6. 답변

`.png`는 이미지의 투명한 부분이 있을 때만 사용한다. 해당 이미지를 보면 포스터이기 때문에 투명한 부분 없이 꽉찬 이미지이다. 그래서 `.jpg`를 사용해야 하는 것이 맞다. 이미지가 깨지는 현상에 대해서는 해상도가 좋은 이미지를 원본 사이즈에 맞게 이미지를 가져오는 방법을 사용해야 한다. 그래서 이미지의 원본 사이즈인 150w로 이미지를 가져와 사용했다.

피그마에서 이미지를 가져올 때 `2x`는 이미지의 사이즈를 2배로 늘린다는 말이고 `200w`는 너비 사이즈를 `200px`로 맞춘다는 말이다. 이때, 너비를 설정하면 자동으로 높이는 이미지의 크기에 맞게 자동으로 커진다.<br>

## Q7. 질문

CSS 선택자에 `:not()` 함수 사용하기

### A7. 답변

```
.netflixIntro p:not(.downloadContent__text){}
```

위와 같은 선택지를 해석해보면 "`netflixIntro` 하위에 있는 `p` 요소 중에 `downloadContent__text`라는 `class`를 가진 `p`요소를 제외한 나머지 `p`요소에 속성을 적용한다."이다.

여기서 **내가 놓친 부분**은 위와 같은 선택자를 입력했을 때 `downloadContent__text`라는 `class`를 가진 요소가 꼭 `p`요소가 아니더라도 `div`, `span`, ... 등 다른 요소라도 적용이 가능한 줄 알았다.