스플릿 스크린 레이아웃

Coddy HTML 여정의 Practical Frontend 섹션에 포함된 레슨 — 35개 중 29번째.

분할 화면 레이아웃은 뷰포트를 보통 나란히 배치된 두 개의 별개 섹션으로 나눕니다. 이 패턴은 콘텐츠를 비교하거나, 이중 테마를 보여주거나, 메인 콘텐츠에서 내비게이션을 분리하는 데 효과적입니다.

먼저, HTML 구조를 만들어 보겠습니다:

<div class="split-screen">
  <div class="split-screen__left">
    <h2>Left Side</h2>
    <p>This is the left side content.</p>
  </div>
  <div class="split-screen__right">
    <h2>Right Side</h2>
    <p>This is the right side content.</p>
  </div>
</div>

이제 분할 화면 레이아웃을 만들기 위한 CSS를 추가해 보겠습니다:

.split-screen {
  display: flex;
  flex-direction: column;
}

/* 모바일에서는 섹션이 세로로 쌓입니다 */
.split-screen__left {
  background-color: #f0f0f0;
}

.split-screen__right {
  background-color: #e0e0e0;
}

/* 더 큰 화면에서는 나란히 표시됩니다 */
@media (min-width: 768px) {
  .split-screen {
    flex-direction: row;
  }
  
  .split-screen__left,
  .split-screen__right {
    flex: 1;
  }
}

이 레이아웃은 모바일 우선 접근 방식에 따라 모바일 기기에서 수직 스택으로 시작합니다. 화면 너비가 768px 이상이 되면 레이아웃이 가로 분할로 변경됩니다.

챌린지 본문:

제품 쇼케이스를 위한 반응형 분할 화면 레이아웃을 만드세요. 왼쪽에는 제품 정보가 표시되어야 하고, 오른쪽에는 제품 이미지가 표시되어야 합니다.

요구 사항:

분할 화면은 모바일(768px 미만)에서는 세로로, 더 큰 화면에서는 가로로 표시되어야 합니다
왼쪽은 어두운 배경(#222)과 흰색 텍스트를 가져야 합니다
오른쪽은 밝은 배경(#f5f5f5)을 가져야 합니다
양쪽에 2rem의 패딩을 추가합니다
768px보다 큰 화면에서 왼쪽은 너비의 40%를 차지하고 오른쪽은 60%를 차지해야 합니다

챌린지

쉬움

모바일 우선으로 스타일이 지정된 두 개의 섹션이 있는 HTML 페이지가 제공됩니다. 여러분의 작업은 이를 데스크톱에서 잘 작동하는 Split Screen Layout으로 만드는 것입니다.

큰 화면(min-width: 768px)에서는 두 섹션을 나란히(side by side) 표시하세요.
왼쪽 영역에 배경색 rgb(74, 144, 226)와 텍스트 색상 rgb(255, 255, 255)를 지정하세요.
오른쪽 영역에 배경색 rgb(255, 255, 255)와 텍스트 색상 rgb(51, 51, 51)를 지정하세요.

치트 시트

분할 화면(Split screen) 레이아웃은 뷰포트를 두 개의 섹션으로 나누며, 일반적으로 나란히 배치됩니다. 이 방식은 콘텐츠를 비교하거나 내비게이션을 메인 콘텐츠와 분리하는 데 효과적입니다.

HTML 구조:

<div class="split-screen">
  <div class="split-screen__left">
    <h2>Left Side</h2>
    <p>This is the left side content.</p>
  </div>
  <div class="split-screen__right">
    <h2>Right Side</h2>
    <p>This is the right side content.</p>
  </div>
</div>

반응형 분할 화면 레이아웃을 위한 CSS:

.split-screen {
  display: flex;
  flex-direction: column;
}

/* Mobile: sections stack vertically // 모바일: 섹션이 세로로 쌓임 */
.split-screen__left {
  background-color: #f0f0f0;
}

.split-screen__right {
  background-color: #e0e0e0;
}

/* Larger screens: display side by side // 더 큰 화면: 나란히 표시 */
@media (min-width: 768px) {
  .split-screen {
    flex-direction: row;
  }
  
  .split-screen__left,
  .split-screen__right {
    flex: 1;
  }
}

이 레이아웃은 모바일 우선(mobile-first) 접근 방식에 따라 모바일 기기에서는 세로로 쌓인 상태로 시작하며, 768px 이상의 화면에서는 가로 분할로 변경됩니다.

직접 해보기

<!DOCTYPE html>
<html>
<head>
  <title>Split Screen Layout</title>
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: Arial, sans-serif;
      background: #f4f4f4;
    }

    .container {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }

    .left,
    .right {
      padding: 3rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
    }

    .left h1 {
      font-size: 2.5rem;
      margin-bottom: 1rem;
    }

    .right h2 {
      margin-bottom: 1rem;
    }

    form {
      display: flex;
      flex-direction: column;
      width: 100%;
      max-width: 300px;
    }

    input {
      padding: 10px;
      margin-bottom: 15px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    button {
      padding: 10px;
      border: none;
      background: #4a90e2;
      color: white;
      font-weight: bold;
      border-radius: 5px;
      cursor: pointer;
      transition: background 0.3s;
    }

    button:hover {
      background: #357ab7;
    }

    @media (min-width: 768px) {
     
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="left">
      <h1>Welcome!</h1>
      <p>Discover new opportunities, connect with others, and grow with us.</p>
    </div>
    <div class="right">
      <h2>Sign Up</h2>
      <form>
        <input type="text" placeholder="Your Name">
        <input type="email" placeholder="Your Email">
        <button type="submit">Join Now</button>
      </form>
    </div>
  </div>
</body>
</html>