K-Digital Credit

■ 반응형 웹 페이지 레이아웃 1 - 미디어 쿼리 + 12열 그리드 + Flexbox 레이아웃

ex3-7.html의 실행 결과

반응형 웹 페이지 레이아웃 1

ex3-7.html

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>반응형 웹 페이지 레이아웃 1</title>
<style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      margin: 0;
      line-height: 1.6;
      background-color: #f5f5f5;
      color: #333;
    }

    .container {
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }

    .row {
      display: flex;
      flex-wrap: wrap;
      margin: 10px;
    }

    .col {
      padding: 10px;
    }

    /* 12열 그리드 시스템 */
    .col-12 { width: 100%; }
    .col-6  { width: 50%; }
    .col-4  { width: 33.33%; }
    .col-3  { width: 25%; }

    /* 반응형 조정 */
    @media (max-width: 1024px) {
      .col-6, .col-4, .col-3 {
        width: 50%;
      }
    }

    @media (max-width: 768px) {
      .col-6, .col-4, .col-3 {
        width: 100%;
      }
    }

    header, footer {
      background-color: #222;
      color: white;
      padding: 20px;
      text-align: center;
    }

    .box {
      background: white;
      border-radius: 10px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      padding: 20px;
    }

    h1, h2 {
      margin-top: 0;
    }

    h1 {
      font-size: 2rem;
    }

    h2 {
      font-size: 1.2rem;
      color: #0077cc;
    }
  </style>
</head>
<body>

  <header>
    <h1>미래를 여는 기술</h1>
    <p>지속 가능한 세상을 위한 혁신적인 여정</p>
  </header>

  <main class="container">
    <div class="row">
      <div class="col col-4">
        <div class="box">
          <h2>인공지능의 윤리</h2>
          <p>AI는 효율을 넘어서 인류의 가치를 반영해야 합니다. 공정성과 책임 있는 사용이 핵심입니다.</p>
        </div>
      </div>
      <div class="col col-4">
        <div class="box">
          <h2>지속 가능한 기술</h2>
          <p>기술은 자연과 공존해야 합니다. 탄소 중립을 위한 그린IT가 미래를 이끌고 있습니다.</p>
        </div>
      </div>
      <div class="col col-4">
        <div class="box">
          <h2>미래 교육</h2>
          <p>코딩과 데이터 리터러시는 새로운 언어입니다. 청소년에게 미래를 준비할 기회를 제공합니다.</p>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col col-6">
        <div class="box">
          <h2>협업의 진화</h2>
          <p>원격근무와 실시간 협업 툴은 글로벌 소통을 가능하게 하며, 다양성을 포용합니다.</p>
        </div>
      </div>
      <div class="col col-6">
        <div class="box">
          <h2>보안과 프라이버시</h2>
          <p>데이터 시대의 신뢰는 보호에서 시작됩니다. 투명성과 사용자 중심 설계가 중요합니다.</p>
        </div>
      </div>
    </div>
  </main>

  <footer>
    © 2025 미래기술연구소. 모두의 내일을 함께 만듭니다.
  </footer>

</body>
</html>

간단한 기능 설명

반응형 그리드 시스템 (12열 기반): .col-1 ~ .col-12 정의

미디어쿼리 3단계

PC (min-width: 1025px)
태블릿 (769px ~ 1024px)
모바일 (max-width: 768px)

■ 반응형 웹 페이지 레이아웃 2

ex3-8.html의 실행 결과

반응형 메인 페이지 레이아웃 2

ex3-8.html

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>반응형 웹 페이지 레이아웃 2</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css" />
  <style>
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    body {
      line-height: 1.6;
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }
    header {
      background-color: #003566;
      color: white;
      padding: 30px;
      text-align: center;
    }
    .hero {
      background-image: url('img/image_bg.jpg');
      background-size: cover;
      background-position: center;
      height: 300px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 2rem;
      text-shadow: 1px 1px 5px black;
    }
    .features {
      display: flex;
      justify-content: space-around;
      padding: 40px 20px;
      flex-wrap: wrap;
      background-color: #f0f0f0;
    }
    .feature {
      flex: 1 1 250px;
      max-width: 300px;
      text-align: center;
      padding: 20px;
    }
    .feature i {
      font-size: 40px;
      color: #0077b6;
      margin-bottom: 15px;
    }
    .about {
      display: flex;
      flex-wrap: wrap;
      padding: 40px 20px;
      background-color: white;
      align-items: center;
      gap: 50px;
    }
    .about img {
      flex: 1 1 300px;
      max-width: 500px;
      width: 100%;
      border-radius: 10px;
    }
    .about-text {
      flex: 1 1 300px;
    }
    .about-text h2 {
      margin-bottom: 15px;
      color: #003566;
    }
    footer {
      background-color: #001d3d;
      color: white;
      text-align: center;
      padding: 20px;
      margin-top: auto;
    }
    @media (max-width: 768px) {
      .features {
        flex-direction: column;
        align-items: center;
      }
      .about {
        flex-direction: column;
      }
    }
  </style>
</head>
<body>
  <header>
    <h1>플렉스 박스를 이용한 반응형 웹 페이지</h1>
  </header>
  <section class="hero">
    이미지 영역
  </section>
  <section class="features">
    <div class="feature">
      <i class="fas fa-rocket"></i>
      <h3>빠른 성능</h3>
      <p>빠르고 반응성 좋은 웹 페이지로 사용자 경험 향상</p>
    </div>
    <div class="feature">
      <i class="fas fa-shield-alt"></i>
      <h3>보안 강화</h3>
      <p>철저한 데이터 보호와 보안 기능 제공</p>
    </div>
    <div class="feature">
      <i class="fas fa-heart"></i>
      <h3>사용자 친화적</h3>
      <p>누구나 쉽게 사용할 수 있는 인터페이스 설계</p>
    </div>
  </section>
  <section class="about">
    <img src="img/image2.jpg" alt="소개 이미지">
    <div class="about-text">
      <h2>우리는 누구인가요?</h2>
      <p>우리는 사용자 중심의 디자인과 기술을 바탕으로 최고의 웹 경험을 제공합니다. 반응형 디자인, 접근성, 그리고 성능을 중요하게 생각하며, 항상 최신 기술을 적용합니다.</p>
    </div>
  </section>
  <footer>
    <p>© 2025 반응형 웹 페이지 </p>
  </footer>
</body>
</html>

전체 페이지를 의미하는 body 요소 자체가 Flex 콘테이너입니다.

전체 페이지를 세로 방향으로 쌓는 구조입니다. min-height: 100vh 덕분에 화면 전체를 차지하며 footer가 항상 맨 아래로 밀리게 됩니다 (margin-top: auto).

.features 섹션 - Flexbox로 카드 나열

.features: 수평 정렬(space-around), 필요 시 줄바꿈(wrap)
.feature: 카드 하나 하나를 Flex 아이템으로 지정하고,
flex: 1 1 250px
- 1 : 남은 공간 분배
- 1 : 줄어들 수 있음
- 250px : 최소 너비

따라서 가로폭이 충분할 땐 가로로 3개 정렬, 화면이 좁아지면 자동 줄바꿈이 됩니다.

미디어 쿼리 (@media)

Flexbox로 이미지와 텍스트를 좌우로 배치하되, flex-wrap으로 작은 화면에서는 아래로 줄 바꿈이 가능
flex: 1 1 300px: 최소 300px이 확보되면 좌우 배치, 그 이하에서는 세로로 쌓임

.about 섹션 - 이미지와 텍스트 좌우 배치

화면 폭이 768px 이하일 때:
.features: 세로 방향으로 카드 정렬
.about: 이미지와 텍스트를 세로로 스택

[20강] 반응형 | 전체 페이지 레이아웃