내 최신 버그에 대한 SCSS FTW

안녕 모두들! 내 첫 번째 게시물입니다 🎉 저는 몇 년 동안 놀라운 개발자와 그들의 기사를 팔로우하고 북마크에 추가하는 "잠복자"였습니다. 때가 된 줄 알았어 😀

저는 가장 오랫동안 CSS를 개선하려고 노력해 왔으며 이를 위한 완벽한 플랫폼으로 Frontendmentor.io을 찾을 만큼 운이 좋았습니다. 연습하고 포트폴리오에 추가할 수 있는 다양한 기술 수준의 많은 프로젝트가 있습니다. 튜토리얼 루프에서 벗어나고 싶다면 꼭 확인하는 것이 좋습니다. 다음은 내가 작업한 최신 프로젝트에서 발생한 주요 문제 중 하나를 해결한 방법입니다.

라이브: https://insure-landing-page.emestabillo.now.sh/
Github: https://github.com/emestabillo/insure-landing-page
Frontendmentor 제출 페이지: https://www.frontendmentor.io/solutions/insure-landing-page-GaMK1QZAW

계획

레이아웃의 차이점을 비교하고 전체 페이지를 통과하는 왼쪽 및 오른쪽 여백이 있음을 확인했습니다. 그러나 영웅 및 바닥글 컨테이너는 이 여백 안에 콘텐츠가 있는 전체 화면 너비에 걸쳐 있으므로 전체 페이지를 하나의 래퍼에 배치할 수 없습니다. 영웅은 또한 데스크톱 보기에서 세로로 오버플로되는 사진을 가지고 있습니다.

문제

이러한 종류의 레이아웃에 대한 나의 이동 솔루션은 컨테이너 클래스 내부에 모든 콘텐츠를 배치하는 것입니다.

.container {
   width: 90% //prevents it from touching the left and right gutter
   max-width: 110rem //keeps it fluid
   margin: 0 auto //horizontal centering
}

나는 처음에 이것을 시도했고 작동했지만 모바일 레이아웃에 또 다른 문제가 발생했습니다.



물결 모양의 배경 패턴도 브라우저의 가장자리에 닿지 않고 그대로 떠다니는 것처럼 약간 이상하게 보입니다.

내 첫 번째 본능은 헤더에 대한 컨테이너 솔루션을 버리고 적절한 패딩을 적용하는 것입니다. 완전히 유효한 접근 방식이지만 항상 페이지의 나머지 부분과 정렬하기 때문에 더 큰 화면에 대한 더 많은 미디어 쿼리가 발생할 것이라고 생각합니다. 여백에 일관성을 유지하고 싶어서 다른 경로를 생각해야 했습니다. 나머지 페이지에서의 사용에 영향을 주지 않고 컨테이너 div를 사용자 지정하려면 어떻게 해야 합니까?

해결책

아도보(필리핀의 인기 요리)를 먹으며 답이 나왔다. 이 프로젝트에 SCSS를 사용하고 있으므로 NESTING을 활용해 보세요. 컨테이너는 .hero 아래에 중첩되어 있으므로 특정 컨테이너만 대상으로 지정하고 작은 화면의 경우 전체 너비로 설정합니다.

.hero {
  //styles here
  .container {
   @media screen and (max-width: 767px) {
      width: 100%;
    }
  }
}

꽤 깔끔한!