Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

JavaScript로 동적 너비에 맞춰 높이 설정하기 – CSS 유동 레이아웃 가이드

JavaScript에서 동적 너비에 맞춰 높이 설정하기

반응형 웹 페이지를 만들다 보면 요소의 높이를 동적으로 변하는 너비와 동일하게 맞춰야 하는 경우가 자주 발생합니다. 예를 들어 정사각형 카드나 이미지 컨테이너처럼 화면 크기에 따라 너비가 변해도 높이가 그에 비례해 함께 변해야 하는 상황입니다.

JavaScript(및 jQuery)를 사용하면 몇 줄의 코드로 이 문제를 간단히 해결할 수 있습니다. 아래 예제를 확인해 보세요.

예제 코드

<!DOCTYPE html>
<html>
<head>
  <style>
    .wrap {
      width: 400px;
      height: 300px;
      border: 2px solid yellow;
    }
    .myChild {
      width: 80%;
      border: 1px solid red;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script>
    var res = $('.myChild').width();
    $('.myChild').css({
      'height': res + 'px'
    });
  </script>
</head>
<body>
  <div class="wrap">
    <div class="myChild"></div>
  </div>
</body>
</html>

코드 작동 원리

위 코드가 어떻게 동작하는지 단계별로 살펴보겠습니다.

  • 너비 값 가져오기: $('.myChild').width()는 jQuery의 width() 메서드로, 선택된 요소의 현재 너비를 픽셀(px) 단위 숫자 값으로 반환합니다. 부모 요소인 .wrap이 400px이고 자식 요소가 80% 너비이므로, 여기서는 320이라는 값이 반환됩니다.
  • 높이 적용하기: .css({'height': res + 'px'})는 앞서 구한 너비 값에 'px' 단위를 붙여 높이 스타일로 지정합니다. 결과적으로 자식 요소는 너비와 똑같은 높이를 갖게 되어 정사각형 모양이 됩니다.

스크립트가 head 태그 안에 있고 DOM 로드 후 실행되므로, 페이지가 열리는 즉시 높이가 계산되어 적용됩니다.

참고: 창 크기 변경에 대응하기

위 코드는 페이지 로드 시점의 너비 기준으로 한 번만 높이를 설정합니다. 사용자가 브라우저 창 크기를 조절할 때에도 정사각형을 유지하려면 resize 이벤트를 함께 사용하는 것이 좋습니다.

function setHeight() {
  var res = $('.myChild').width();
  $('.myChild').css('height', res + 'px');
}

$(window).on('resize', setHeight);
setHeight(); // 초기 실행

더 나은 방법: CSS aspect-ratio 속성

최신 브라우저에서는 JavaScript 없이 CSS의 aspect-ratio 속성만으로 동일한 효과를 얻을 수 있습니다. 코드가 훨씬 간결하고 성능 면에서도 유리합니다.

.myChild {
  width: 80%;
  aspect-ratio: 1 / 1; /* 너비 : 높이 = 1 : 1 */
}

이 속성은 세로로 긴 형태(예: aspect-ratio: 3 / 4)나 가로로 긴 형태(예: aspect-ratio: 16 / 9)도 손쉽게 지정할 수 있어, 반응형 레이아웃 작업 시 매우 유용합니다. 다만 구형 브라우저 호환성이 필요하다면 위에서 소개한 JavaScript 방식을 사용하는 것이 안전합니다.