웹 시스템 개발 #Responsive Web 초급편

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다.

부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다.

이번 포스팅에서는 반응형 웹에 대해 알아보는 시간을 갖고자 합니다.

반응형 웹 (Responsive Web)이란?

반응형 웹 (Responsive Web)은 웹 디자인 및 개발 기술의 한 형태로, 다양한 사용자 기기 및 "화면 크기에 맞춰" 웹 페이지를 최적화하는 방법입니다. 이를 통해 웹 페이지는 모바일 기기, 태블릿, 데스크탑, TV, 웨어러블 디바이스와 같은 다양한 플랫폼에서 잘 작동하고 보기 좋게 표시됩니다.

여기서 잘 작동하고 보기 좋게 표시된다는 의미는 앞서 언급한 "화면 크기에 맞춰" 볼 수 있다는 것을 뜻합니다.

화면 크기에 맞지 않는다면 어떻게 되는지 상상해볼까요?

우측 상단에 있어야 하는 버튼이 웹의 크기가 작아짐으로써 보이지 않게 되거나, 위치가 바뀌게 된다면 사용자 입장에서는 과연 편리할까요? 이러한 문제점을 막고자 반응형 웹 기술을 사용하는 것입니다.

반응형 웹을 사용하는 이유를 구체적으로 작성해보자면 아래와 같습니다.

다양한 기기 지원: 사용자는 다양한 디바이스에서 웹 페이지에 접근하므로, 모든 디바이스에 맞게 화면이 렌더링되어야 합니다.
검색 엔진 최적화 (SEO): 검색 엔진은 웹 페이지의 모바일 친화성을 고려하여 순위를 매기기 때문에, 반응형 웹은 SEO를 개선하는 데 도움이 됩니다.
사용자 경험 향상: 사용자는 휴대폰에서 웹 페이지를 방문할 때도 편리하게 내용을 확인하고 상호 작용해야 합니다.

반응형 웹 사용 방법

반응형 웹을 만들기 위해서는 시맨틱 태그, 뷰포트 메타 태그, 미디어 쿼리등의 대한 개념을 이해하고 있어야 합니다.

아래는 개념들에 대한 설명입니다.

시맨틱 HTML 태그

웹 페이지의 구조를 명확하게 설계하기 위해 시맨틱 HTML 태그를 사용합니다. 예를 들어, <header>, <nav>, <section>, <article>, <aside>, <footer> 등의 태그를 활용하여 페이지를 논리적으로 구조화합니다.

위 내용은 이전 포스팅에서 다루었기에 참고하시면 좋을 것 같습니다.

웹 시스템 개발 #FORM 초급편

학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. 이번 포스팅에서는 Form이란 무엇이며, 왜

wlsdn629.tistory.com

Viewport Meta 태그

<meta name="viewport"> 태그를 사용하여 웹 페이지의 화면 크기와 배율을 조절합니다. 이는 모바일 기기에서 페이지가 제대로 표시되도록 도와주는 역할을 합니다.

<meta name="viewport" content="width=device-width, initial-scale=1.0">

미디어 쿼리 (Media Query)

미디어 쿼리는 CSS3에서 제공하는 기능으로, 화면 크기, 해상도 및 장치 특성을 감지하여 스타일을 적용하거나 변경하는 데 사용됩니다.

미디어 쿼리는 @media 라는 키워드로 시작하며, 특정 화면 크기나 특성에 대한 조건을 정의하는데 사용됩니다.

미디어 타입	설명
all	모든 미디어 타입에 적용됨
aural	음성 장치에 적용됨
braille	점자 장치에 적용됨
handheld	휴대폰과 같은 손에 들고 다니는 장치에 적용됨
print	인쇄 전용 스타일에 적용됨
projection	프로젝터 화면과 같은 장치에 적용됨
screen	일반적인 화면 장치에 적용됨
tty	텍스트 전용 터미널과 같은 장치에 적용됨
tv	텔레비전 화면과 같은 장치에 적용됨
embossed	점자 인쇄를 지원하는 프린터에 적용됨

미디어 특성	설명
width	뷰포트의 너비를 기준으로 스타일을 조절함
height	뷰포트의 높이를 기준으로 스타일을 조절함
orientation	뷰포트의 방향을 기준으로 스타일을 조절함 (가로 또는 세로)
color	장치의 색상 수를 기준으로 스타일을 조절함
monochrome	장치의 흑백 색상 비트 수를 기준으로 스타일을 조절함
resolution	장치의 해상도를 기준으로 스타일을 조절함
color-index	흑백 장치의 픽셀당 비트 수를 기준으로 스타일을 조절함

<!DOCTYPE html>
<html>
<head>
  <title>반응형 웹 패턴 예시</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    body {
      width: 960px;
      margin: 0 auto;
      overflow: hidden;
    }
    #menu {
      width: 260px;
      float: left;
      background-color: coral;
    }
    #section {
      width: 700px;
      float: right;
    }
    @media screen and (max-width: 767px) {
     /* 화면 너비가 767px 이하일 때 적용되는 스타일 */
      body {
        width: auto;
      }
      #menu, #section {
        width: auto;
        float: none;
      }
    }
  </style>
</head>
<body>
  <div id="menu">
    <ul>
      <li><a href="https://www.naver.com">Naver</a></li>
      <li><a href="https://www.daum.net">Daum</a></li>
      <li><a href="https://www.ajou.ac.kr">Ajou</a></li>
    </ul>
  </div>
  <div id="section">
    <h1>Two Towers</h1>
    <p>Merry and Pippin, taken captive by the Uruk-hai, learn that one of the orcs from Mordor, Grishnákh, knows about the ring and believes it to be on one of them.</p>
  </div>
</body>
</html>

반응형 웹 예시 코드

다음은 반응형 웹을 만든 간단한 예시 코드입니다.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Interactive Responsive Web Example</title>
  <link rel="stylesheet" href="styles.css">
  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #f4f4f4;
      margin: 0;
      padding: 0;
    }
    header {
      background-color: #333;
      color: #fff;
      padding: 20px;
      text-align: center;
    }
    nav ul {
      list-style: none;
      padding: 0;
      margin: 0;
      text-align: center;
    }
    nav li {
      display: inline;
      margin-right: 20px;
    }
    .menu-button {
      display: none;
      background-color: #333;
      color: #fff;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
    }
    .menu-button:focus {
      outline: none;
    }
    .section {
      padding: 20px;
      text-align: center;
    }
    @media screen and (max-width: 768px) {
      nav {
        display: none;
        text-align: left;
      }
      .menu-button {
        display: block;
      }
      .menu-button.active + nav {
        display: block;
      }
    }
  </style>
</head>
<body>
  <header>
    <h1>반응형 웹 예시</h1>
    <button class="menu-button">메뉴</button>
  </header>
  <nav>
    <ul>
      <li><a href="/">홈</a></li>
      <li><a href="/about">회사 소개</a></li>
      <li><a href="/contact">연락처</a></li>
    </ul>
  </nav>
  <section class="section">
    <h2>우리의 서비스</h2>
    <p>휴대폰, 태블릿, 데스크탑에서 모두 접근 가능합니다.</p>
  </section>
  <script>
    const menuButton = document.querySelector('.menu-button');
    menuButton.addEventListener('click', () => {
      const nav = document.querySelector('nav');
      nav.classList.toggle('active');
    });
  </script>
</body>
</html>

저작자표시 동일조건