기업에서 인턴으로 협업중... 하나의 큰~~~ 난관에 부딪혔는데 그것은 바로바로! 반응형 css이다.

다음부터 명심하자! 만들거면 처음부터 반응형을 고려하고 css 짜자..

이 중에서도 나를 가낭 많이 괴롭힌건! 반응형 이미지였다.

google에 'how to make responsive img'부터 시작해서 '반응형 이미지' 등 모든 페이지를 다 들어가봐서 안 빨간 링크가 없다.

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ여튼 이렇게 주말 이틀을 꼬박 고민했지만 답을 찾지 못하고 회사로 돌아갔다.

프론트엔드 개발자로 새롭게 오신 분께 아침부터 실례를 무릅쓰고 반응형에 대해 물어봤다. 그분도 조금 까다롭게 되어있다고 말하며 같이 봐주셨다. 🧚‍♂️(천사인건가..)

같이 2~3시간을 고민한 결과! aspect-ratio라는 css 속성을 사용해서 해결할 수 있었다.

반응형 code

(아래의 css는 기업 대외비기 때문에 전체 공개는 못합니다. 제가 작성한 코드는 반응형 css만 가져온 부분이고 파일 및 class 명에 변경이 있습니다. )

// banner.scss

.mainBanner{
  max-width: 1260px;
  width: 100%;
  max-height: 544px;
}

.bannerImgBox{
  width: 58.5%;
  height: 508px;
}

.bannerImg {
  width: 100% !important;
  aspect-ratio: 1.4/1 !important;
  object-fit: fill;
  max-height: 508px;
}

반응형을 만들기 위해서는 default의 큰 값부터 width를 주면 안된다! 따라서 max-width로 큰 값의 최대 너비를 지정해준 뒤 width는 100%로 만들어주면 된다.

.bannerImg 부분에서 width:100% !important 부분이 쓰인 이유?

• window explorer는 aspect-ratio라는 종횡비를 구해주는 속성을 지원하지 않는다. 따라서 window에는 width를 100%로 하고 max-height를 먹을 수 있게 해야하는데 aspect-ratio가 먹지 않으면 width를 후순위로 작동할 수 있도록 !important를 작서하였다.

반응형 code

@media (min-width: 600px) and (max-width: 960px) {
  .mainBanner{
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-width: 540px;
    width: 100%;
    height: 100%;
    max-height: 588px;
    
    .bannerImgBox{
      width: 100%;
      height: 74%;

      .bannerImg{
        aspect-ratio: 2.5/1 !important;
        object-fit: fill;
        width: 100%;
        height: 100%;
        max-height: 391px;
      }
    }
}

결론: CSS가 진짜 어렵다 ㅎ