자바스크립트로 동적으로 CSS Grid 레이아웃 변경하기

18 Sep 2023

우선, HTML 파일에 CSS Grid를 설정해야 합니다. 다음은 예시입니다:

<!DOCTYPE html>
<html>
<head>
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      grid-template-rows: 1fr 1fr;
      gap: 10px;
    }
    .grid-item {
      background-color: #ccc;
      padding: 20px;
    }
  </style>
</head>
<body>
  <div class="grid-container">
    <div class="grid-item">1</div>
    <div class="grid-item">2</div>
    <div class="grid-item">3</div>
    <div class="grid-item">4</div>
  </div>

  <script src="script.js"></script>
</body>
</html>

이제 스크립트 파일을 생성하고, 자바스크립트를 사용하여 CSS Grid 레이아웃을 변경해보겠습니다. 다음은 예시입니다:

// script.js 파일

// 필요한 DOM 요소들을 선택합니다.
const gridContainer = document.querySelector('.grid-container');
const gridItems = gridContainer.querySelectorAll('.grid-item');

// CSS Grid 레이아웃을 동적으로 변경합니다.
function changeGridLayout() {
  // 새로운 grid-template-columns 값을 설정합니다.
  const newColumns = '1fr 1fr';
  gridContainer.style.gridTemplateColumns = newColumns;

  // grid-item 요소의 배경색을 랜덤하게 변경합니다.
  gridItems.forEach(item => {
    const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
    item.style.backgroundColor = randomColor;
  });
}

// changeGridLayout 함수를 호출하여 레이아웃을 변경합니다.
changeGridLayout();

위의 예시 코드를 참고하여, 자바스크립트로 CSS Grid 레이아웃을 동적으로 변경할 수 있습니다. 자신의 프로젝트에 적용해보세요!