Component

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

Container

컨테이너에 375px로 최소너비를 지정했을 때 margin-left의 여백이 없어지는 현상이 나타난다.

해결, 컨텐츠들 중에 고정값으로 되어 있는 요소들 때문이다. 그렇기 때문에 반응형웹을 만들 때는 스타일링을 할 때 수시로 반응형 결과를 보면서 만들어야 한다.

lg에서 x-lg로 브라우저의 너비가 바뀌는 과정에서 max-width 값 때문에 x-lg로 바뀔 때 컨테이너의 크기가 갑자기 작아진다. 이를 자연스럽게하기 위해 x-lg의 값을 1300px로 변경하였다.

1300px의 값은 lg에서 max-width: 92vw가 적용된 상태에서 컨터이너의 너비가 1200px과 가까워지는 값을 확인하여 설정하였다.

resetLink:hover에서 textdecoration이 설정되어 있었다. 이전에 css 작업에서 실수로 전역 스타일로 적용한 것이다. 바로 제거했다.

왜 적용이 안될까하며 검색했더니 상태클래스를 중첩 할 때는 &가 꼭 있어야 한다.

.Link {
  border-radius: 3px;
  // ...

  &:focus {
    background: getColor(vividRed);
  }
}

<footer class="netflixFooter netflixFooter__Section Section"></footer>

Section의 컴포넌트에 padding-top/bottom이 적용되어 있어서 다른 곳에 재사용하기 힘들었다. 아직 컴포넌트로 사용할 공용 스타일과 아닌 것을 보기에 미숙한 것 같다.

그래서 위의 코드 처럼 마크업하려 했으나 필요없는 class를 만드는 것 같아서 netflixfooter에 padding 속성을 주기로 했다.

<footer class="netflixFooter Section"></footer>

Last updated 4 years ago

Was this helpful?