코카티비-CoCaTV

코딩ㆍ개발 정보/HTML 연습

[HTML] 모바일 우선, 반응형 페이지 만들기

RioRex 2024. 7. 24.

웹사이트 개발 시 모바일 우선 접근법(mobile-first approach)을 채택하는 것은 매우 좋은 전략입니다. 이 접근법에서는 모바일 환경에서의 사용자 경험을 최우선으로 고려하며, 이후 데스크톱 환경으로 확장해 나갑니다. 모바일 우선 접근법을 사용할 때 GNB(Global Navigation Bar) 구성에 대해 두 가지 방법을 고려할 수 있습니다.

방법 1: 모바일 우선 GNB 구성

  1. 모바일 GNB 먼저 개발:
    • 모바일 사용자에게 최적화된 GNB를 설계합니다.
    • 최소한의 공간을 사용하며, 직관적이고 간단한 메뉴를 구성합니다.
    • 메뉴 아이콘(햄버거 메뉴) 등을 사용해 GNB를 숨기거나 표시합니다.
  2. 데스크톱 버전 확장:
    • 모바일 GNB를 바탕으로 데스크톱 GNB로 확장합니다.
    • 더 큰 화면 공간을 활용하여 메뉴를 더 넓게 배치하고, 추가적인 메뉴 항목을 포함합니다.
    • 반응형 디자인을 통해 화면 크기에 따라 GNB가 자연스럽게 전환되도록 합니다.

방법 2: 데스크톱 우선 GNB 구성 후 모바일 적용

  1. 데스크톱 GNB 먼저 개발:
    • 데스크톱 환경에 최적화된 GNB를 설계합니다.
    • 모든 메뉴 항목이 명확하게 표시되도록 충분한 공간을 사용합니다.
  2. 모바일 버전 축소:
    • 데스크톱 GNB를 모바일 환경에 맞게 축소합니다.
    • 필요에 따라 메뉴 항목을 숨기거나, 메뉴 아이콘(햄버거 메뉴)으로 대체합니다.
    • 반응형 디자인을 통해 GNB가 자연스럽게 축소되도록 합니다.

추천 방법

모바일 우선 접근법을 채택한 경우 방법 1: 모바일 우선 GNB 구성이 더 효과적일 수 있습니다. 이렇게 하면 모바일 사용자 경험을 최적화하면서 필요한 경우 데스크톱 버전으로 확장할 수 있습니다. 이는 특히 모바일 사용자가 주로 방문하는 사이트에 유리합니다.

코드 예시

모바일 우선 접근법을 위한 간단한 GNB 구현 예시입니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mobile-First GNB</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }
        .gnb {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px 20px;
            background-color: #333;
            color: white;
        }
        .menu-icon {
            display: none;
            font-size: 1.5em;
            cursor: pointer;
        }
        .nav-links {
            display: flex;
            list-style: none;
            padding: 0;
        }
        .nav-links li {
            margin-left: 20px;
        }
        .nav-links a {
            color: white;
            text-decoration: none;
        }

        @media (max-width: 768px) {
            .menu-icon {
                display: block;
            }
            .nav-links {
                display: none;
                flex-direction: column;
                width: 100%;
                background-color: #333;
            }
            .nav-links li {
                margin: 10px 0;
                text-align: center;
            }
        }
    </style>
</head>
<body>
    <header class="gnb">
        <div class="logo">Logo</div>
        <div class="menu-icon" onclick="toggleMenu()">☰</div>
        <ul class="nav-links">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </header>

    <script>
        function toggleMenu() {
            const navLinks = document.querySelector('.nav-links');
            navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';
        }
    </script>
</body>
</html>

 

이 예시는 모바일 환경에서 햄버거 메뉴를 사용해 GNB를 숨기거나 표시하는 방식으로 설계되었습니다. 화면 크기에 따라 GNB가 반응형으로 동작합니다. 이를 바탕으로 필요한 기능을 추가하여 개발을 진행할 수 있습니다.

반응형
저작자표시 비영리 변경금지

'코딩ㆍ개발 정보 > HTML 연습' 카테고리의 다른 글

[CSS] 2 x 2 이상의 자식을 가진 요소의 flex 레이아웃으로  (0) 2024.07.24
[CSS] 웹페이지 스타일링 - 부모와 자식관계 7  (0) 2024.07.24
[웹폰트] NotoSans 에서 Pretendard 사용 방법  (0) 2024.07.24
[CSS] em, ex, small, smaller 기준  (0) 2024.07.23
[CSS] Flexbox와 Grid 정렬 속성 비교 align-, justify-, -items, -content  (0) 2024.07.22

댓글

티스토리툴바