QnA

Q1. 질문

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

A1. 답변

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

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

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. 답변

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

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

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

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으로 표시하여 레이아웃 하는 경우는 잦아도, 반대인 경우는 희소합니다.

Q6. 질문

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

A6. 답변

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

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

Q7. 질문

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

A7. 답변

.netflixIntro p:not(.downloadContent__text){}

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

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

Previouspromotion의 input Nextcommon

Last updated 3 years ago