스위치 컨텐츠 전환 예제

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>스위치 컨텐츠 전환 예제</title>
  <style>
    /* 기본 리셋 및 스타일 */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      font-family: 'Noto Sans KR', sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 100vh;
      background-color: #eaf4ff;
      padding: 20px;
    }

    /* 토글 스위치 스타일 */
    .switch-container {
      margin-bottom: 25px;
    }

    .toggle-switch {
      position: relative;
      display: inline-block;
      width: 90px;
      height: 42px;
    }

    /* 기존 체크박스 숨기기 */
    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    /* 슬라이더 배경 */
    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #d1d5db; /* OFF 배경 (회색) */
      transition: background-color 0.3s;
      border-radius: 34px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 12px;
      user-select: none;
    }

    /* 슬라이더 내 동그라미 원 */
    .slider::before {
      position: absolute;
      content: "";
      height: 32px;
      width: 32px;
      left: 5px;
      bottom: 5px;
      background-color: white;
      transition: transform 0.3s;
      border-radius: 50%;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
      z-index: 2;
    }

    /* 스위치 텍스트 (간편) */
    .switch-label {
      font-size: 15px;
      font-weight: bold;
      z-index: 1;
      transition: opacity 0.2s;
    }

    /* OFF 상태 텍스트 위치 (우측) 및 색상 */
    .label-off {
      margin-left: auto;
      color: #555555;
    }

    /* ON 상태 텍스트 위치 (좌측) 및 색상 */
    .label-on {
      margin-right: auto;
      color: #ffffff;
      display: none;
    }

    /* ===== ON 상태 (체크되었을 때) 스타일 정의 ===== */
    input:checked + .slider {
      background-color: #0055ff; /* ON 배경 (파란색) */
    }

    input:checked + .slider::before {
      transform: translateX(48px); /* 동그라미 오른쪽으로 이동 */
    }

    input:checked + .slider .label-off {
      display: none;
    }

    input:checked + .slider .label-on {
      display: block;
    }

    /* ===== 컨텐츠 영역 스타일 ===== */
    .content-box {
      width: 100%;
      max-width: 400px;
      padding: 24px;
      background-color: #ffffff;
      border-radius: 12px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
      text-align: center;
      transition: all 0.3s ease;
    }

    /* 컨텐츠 숨김/표시 클래스 */
    .content {
      display: none;
    }

    .content.active {
      display: block;
    }
  </style>
</head>
<body>

  <!-- 스위치 영역 -->
  <div class="switch-container">
    <label class="toggle-switch">
      <input type="checkbox" id="modeSwitch" onchange="toggleContent(this)">
      <span class="slider">
        <span class="switch-label label-on">간편</span>
        <span class="switch-label label-off">간편</span>
      </span>
    </label>
  </div>

  <!-- 컨텐츠 영역 -->
  <div class="content-box">
    <!-- OFF 상태 시 보일 컨텐츠 (일반/상세 모드 등) -->
    <div id="contentOff" class="content active">
      <h3>상세/일반 모드</h3>
      <p style="margin-top: 10px; color: #666; font-size: 14px;">
        스위치가 OFF 상태입니다.<br>
        모든 상세 정보 및 상세 입력 폼이 제공됩니다.
      </p>
    </div>

    <!-- ON 상태 시 보일 컨텐츠 (간편 모드) -->
    <div id="contentOn" class="content">
      <h3>간편 모드 ON</h3>
      <p style="margin-top: 10px; color: #0055ff; font-size: 14px; font-weight: bold;">
        스위치가 ON 상태입니다.<br>
        자주 사용하는 핵심 기능만 요약하여 표시합니다.
      </p>
    </div>
  </div>

  <!-- 스위치 상태 제어 JavaScript -->
  <script>
    function toggleContent(checkbox) {
      const contentOn = document.getElementById('contentOn');
      const contentOff = document.getElementById('contentOff');

      if (checkbox.checked) {
        // ON 상태일 때
        contentOff.classList.remove('active');
        contentOn.classList.add('active');
      } else {
        // OFF 상태일 때
        contentOn.classList.remove('active');
        contentOff.classList.add('active');
      }
    }
  </script>

</body>
</html>

 

 

스위치 컨텐츠 전환 예제.html

0.00MB

 

 

※ 해당 내용은 Google Gemini 에서 작성되었습니다.