🖥️ IT, 컴퓨터/🌐 HTML, CSS, JS

[HTML] 개념 정리 10 :: CSS와 JavaScript를 활용한 레이아웃 설정

김 홍시 2025. 1. 3.
반응형

CSS와 JavaScript를 활용한 레이아웃 설정 방법

HTML, CSS, 그리고 JavaScript를 결합하면 동적인 웹 레이아웃을 설계하고 사용자 인터페이스를 향상시킬 수 있음. CSS는 주로 레이아웃 스타일링과 배치를 담당하며, JavaScript는 동적인 동작 및 사용자 상호작용을 처리함.


1. CSS를 활용한 레이아웃 설정

(1) 플렉스박스(Flexbox)

플렉스박스는 유연한 레이아웃 설계를 위한 강력한 CSS 도구로, 행(row)과 열(column) 배치에 적합.

예제: 플렉스박스를 사용한 기본 레이아웃
<style>
  .container {
    display: flex;
    justify-content: space-around; /* 아이템 간 간격 균등 분배 */
    align-items: center; /* 수직 정렬 */
    height: 100vh;
  }
  .item {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    text-align: center;
    line-height: 100px;
  }
</style>

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

(2) 그리드(Grid)

CSS 그리드는 복잡한 2D 레이아웃을 쉽게 구성할 수 있음.

예제: CSS 그리드
<style>
  .grid-container {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr; /* 비율로 열 크기 설정 */
    grid-template-rows: auto;
    gap: 10px; /* 아이템 간 간격 */
    height: 100vh;
  }
  .grid-item {
    background-color: lightgreen;
    text-align: center;
    padding: 20px;
  }
</style>

<div class="grid-container">
  <div class="grid-item">Header</div>
  <div class="grid-item">Content</div>
  <div class="grid-item">Sidebar</div>
  <div class="grid-item" style="grid-column: span 3;">Footer</div>
</div>

2. JavaScript를 활용한 레이아웃 동적 조정

(1) CSS 클래스 토글

JavaScript로 CSS 클래스를 추가하거나 제거하여 레이아웃을 변경할 수 있음.

예제: 버튼 클릭으로 레이아웃 변경
<style>
  .container {
    display: flex;
  }
  .item {
    width: 100px;
    height: 100px;
    background-color: lightcoral;
    margin: 5px;
    transition: all 0.3s ease;
  }
  .expanded {
    width: 200px;
    background-color: lightseagreen;
  }
</style>

<div class="container">
  <div class="item" id="item1">1</div>
  <div class="item" id="item2">2</div>
  <div class="item" id="item3">3</div>
</div>
<button onclick="toggleLayout()">Toggle Layout</button>

<script>
  function toggleLayout() {
    const items = document.querySelectorAll('.item');
    items.forEach(item => item.classList.toggle('expanded'));
  }
</script>

(2) 동적 DOM 생성

JavaScript로 요소를 동적으로 생성하여 레이아웃을 업데이트.

예제: 카드 추가 버튼
<style>
  .grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .card {
    background-color: lightgray;
    padding: 20px;
    text-align: center;
  }
</style>

<div class="grid" id="gridContainer">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>
<button onclick="addCard()">Add Card</button>

<script>
  function addCard() {
    const grid = document.getElementById('gridContainer');
    const newCard = document.createElement('div');
    newCard.className = 'card';
    newCard.textContent = `Card ${grid.children.length + 1}`;
    grid.appendChild(newCard);
  }
</script>

(3) 윈도우 크기에 따라 레이아웃 변경

window.resize 이벤트를 활용해 화면 크기에 따라 레이아웃 조정 가능.

예제: 화면 크기에 따른 플렉스 정렬 변경
<style>
  .responsive-container {
    display: flex;
    flex-direction: row;
    gap: 10px;
  }
  .responsive-item {
    width: 100px;
    height: 100px;
    background-color: lightpink;
    text-align: center;
    line-height: 100px;
  }
</style>

<div class="responsive-container" id="responsiveContainer">
  <div class="responsive-item">A</div>
  <div class="responsive-item">B</div>
  <div class="responsive-item">C</div>
</div>

<script>
  function adjustLayout() {
    const container = document.getElementById('responsiveContainer');
    if (window.innerWidth < 600) {
      container.style.flexDirection = 'column';
    } else {
      container.style.flexDirection = 'row';
    }
  }
  window.addEventListener('resize', adjustLayout);
  adjustLayout(); // 초기 호출
</script>

3. CSS와 JavaScript를 결합한 레이아웃 팁

  1. CSS로 기본 스타일 지정: 플렉스박스, 그리드 등으로 기본 레이아웃 설계.
  2. JavaScript로 동적 동작 추가: 이벤트 기반으로 클래스 토글, 요소 추가/삭제, 크기 조정 등을 구현.
  3. 미디어 쿼리와 연동: CSS 미디어 쿼리로 레이아웃 반응형 처리, JavaScript로 추가 조건 처리.

결론

CSS는 레이아웃 배치와 스타일링의 기초를 제공하며, JavaScript는 이를 동적으로 조정하거나 사용자 상호작용을 추가하는 역할을 담당함. 플렉스박스와 그리드 레이아웃을 기본으로 사용하고, JavaScript로 사용자 경험을 개선하는 방법을 결합하면 강력한 웹 레이아웃을 설계할 수 있음.

이 글이 CSS와 JavaScript를 활용한 레이아웃 설정에 도움이 되길 바람! 😊

반응형

댓글