자바스크립트를 활용한 CSS Grid와 다중 미디어 쿼리

18 Sep 2023

CSS Grid는 웹 개발자에게 강력한 레이아웃 시스템을 제공합니다. 그러나 때로는 동적인 레이아웃 변경이 필요할 수도 있습니다. 이때 자바스크립트를 사용하여 CSS Grid를 조작할 수 있습니다.

예를 들어, 그리드 아이템의 크기를 동적으로 변경하거나, 그리드 항목의 위치를 조정하는 등의 작업을 자바스크립트를 통해 수행할 수 있습니다. 이를 위해 다음과 같은 코드를 사용할 수 있습니다:

const gridItem = document.querySelector('.grid-item');

// 그리드 아이템의 크기를 변경하는 함수
function resizeGridItem() {
  const width = Math.floor(Math.random() * 200) + 100;
  const height = Math.floor(Math.random() * 200) + 100;
  gridItem.style.width = `${width}px`;
  gridItem.style.height = `${height}px`;
}

// 그리드 항목의 위치를 조정하는 함수
function repositionGridItem() {
  const x = Math.floor(Math.random() * 3);
  const y = Math.floor(Math.random() * 3);
  gridItem.style.gridColumn = `${x + 1} / span 1`;
  gridItem.style.gridRow = `${y + 1} / span 1`;
}

// 그리드 아이템의 이벤트 리스너 등록
gridItem.addEventListener('click', () => {
  resizeGridItem();
  repositionGridItem();
});

이 코드는 그리드 아이템을 클릭할 때마다 해당 아이템의 크기와 위치를 무작위로 변경합니다. 이와 같은 방식으로 자바스크립트를 활용하여 동적으로 CSS Grid를 제어할 수 있습니다.

다중 미디어 쿼리

다중 미디어 쿼리는 웹 개발자가 여러 조건에 따라 레이아웃을 다르게 적용할 수 있도록 해줍니다. 예를 들어, 데스크탑 화면과 모바일 화면에 각각 다른 스타일을 적용할 수 있습니다.

다음은 예시로, 화면 너비와 가로 방향의 회전 여부에 따라 두 가지 다른 레이아웃을 처리하는 다중 미디어 쿼리 코드입니다:

@media screen and (min-width: 768px) and (orientation: landscape) {
  /* 가로 화면에 대한 스타일 지정 */
  body {
    background-color: lightblue;
  }
}

@media screen and (max-width: 767px), (orientation: portrait) {
  /* 세로 화면에 대한 스타일 지정 */
  body {
    background-color: lightpink;
  }
}

위의 코드에서는 미디어 쿼리를 사용하여 가로 화면에는 밝은 파란색 배경을, 세로 화면에는 밝은 분홍색 배경을 지정합니다. 이렇게 미디어 쿼리를 활용하면 사용자의 환경에 따라 다르게 보여질 수 있는 웹 사이트를 제작할 수 있습니다.

hashtags

#CSSGrid #미디어쿼리