BACKEND [Kamranahmedse Roadmap]/HTML

[HTML] HTML 레이아웃(Layout) 개념과 구조 + flexbox, grid, 미디어 쿼리

Alex Han 2025. 2. 1. 15:25
반응형

웹 페이지의 레이아웃(Layout)은 HTML 요소들을 배치하는 방식을 의미한다.

HTML과 CSS를 이용하여 다양한 레이아웃을 구성할 수 있으며, 웹사이트의 가독성과 사용자 경험(UX)에 큰 영향을 미친다.

 

 

 

1. 기본적인 HTML 레이아웃 구조

웹사이트는 일반적으로 다음과 같은 기본 레이아웃 구조를 가진다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>기본 HTML 레이아웃</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        header, nav, main, aside, footer {
            border: 1px solid #ddd;
            padding: 20px;
            margin: 10px;
        }
        main {
            display: flex;
        }
        article {
            flex: 3;
            background-color: #f9f9f9;
            padding: 20px;
        }
        aside {
            flex: 1;
            background-color: #eee;
            padding: 20px;
        }
    </style>
</head>
<body>

    <header>
        <h1>웹사이트 제목</h1>
    </header>

    <nav>
        <ul>
            <li><a href="#">홈</a></li>
            <li><a href="#">소개</a></li>
            <li><a href="#">서비스</a></li>
            <li><a href="#">연락처</a></li>
        </ul>
    </nav>

    <main>
        <article>
            <h2>본문 내용</h2>
            <p>이곳에 주요 콘텐츠가 들어갑니다.</p>
        </article>
        <aside>
            <h2>사이드바</h2>
            <p>부가 정보, 광고 등을 배치할 수 있습니다.</p>
        </aside>
    </main>

    <footer>
        <p>© 2025 Website. All Rights Reserved.</p>
    </footer>

</body>
</html>

 

🔹 주요 HTML 레이아웃 태그

태그 역할
<header> 웹사이트의 헤더(로고, 제목, 메뉴 등)
<nav> 내비게이션(메뉴)
<main> 웹사이트의 주요 콘텐츠 영역
<article> 독립적인 콘텐츠 블록 (예: 블로그 글, 뉴스 기사)
<section> 주제를 가진 콘텐츠 그룹
<aside> 부가 정보 (광고, 추천 링크, 사이드바)
<footer> 웹사이트의 하단(저작권, 연락처 등)

 

 

 

2. CSS를 활용한 레이아웃 방식

HTML로 기본 구조를 만들었다면, CSS를 활용하여 레이아웃을 조정할 수 있다.

웹 개발에서 주로 사용되는 CSS 레이아웃 기법은 다음과 같다.

 

1) display: block (기본 블록 레이아웃)

• 기본적으로 <div>, <section>, <article> 등의 요소는 블록(block) 요소로 자동 배치됨.

• width 값을 지정하지 않으면 기본적으로 100% 너비를 가짐.

div {
    display: block;
    width: 80%;
    margin: auto;
    padding: 20px;
    background-color: lightgray;
}

 

2) display: inline-block (가로 정렬)

• 블록 요소이지만, 한 줄에 여러 개 배치 가능

• width와 height 조절 가능

.menu-item {
    display: inline-block;
    padding: 10px 20px;
    background-color: lightblue;
    margin: 5px;
}

 

3) float (옛날 방식, 사용 지양)

• 요소를 왼쪽(float: left;) 또는 오른쪽(float: right;)으로 배치

• 하지만 유지보수가 어려워 modern CSS 기술(Flexbox, Grid)로 대체됨.

.left {
    float: left;
    width: 50%;
}
.right {
    float: right;
    width: 50%;
}

 

4) flexbox (추천)

• 레이아웃을 쉽게 정렬할 수 있는 최신 CSS 방식

• 가로/세로 방향 정렬이 쉬움

.container {
    display: flex;
    justify-content: space-between; /* 요소 간 간격을 동일하게 */
}
.box {
    flex: 1;
    padding: 20px;
    background-color: lightcoral;
    margin: 10px;
}

 

5) grid (고급 레이아웃)

• 2차원(가로+세로) 레이아웃을 쉽게 관리 가능

• 복잡한 웹 디자인에 적합

.container {
    display: grid;
    grid-template-columns: 1fr 2fr; /* 1:2 비율의 컬럼 */
    grid-gap: 10px;
}
.box {
    background-color: lightgreen;
    padding: 20px;
}

 

3. 반응형(Responsive) 웹 레이아웃

 

1) 미디어 쿼리 (@media)

화면 크기에 따라 스타일을 다르게 적용할 수 있다.

@media (max-width: 768px) {
    .container {
        flex-direction: column; /* 작은 화면에서는 세로 정렬 */
    }
}

 

2) 뷰포트 단위 (vw, vh)

• vw(viewport width): 화면 너비의 %

• vh(viewport height): 화면 높이의 %

.container {
    width: 80vw; /* 화면 너비의 80% */
    height: 50vh; /* 화면 높이의 50% */
}

 

 

4. 정리

CSS 레이아웃 기법 특징 추천 사용
block 기본 블록 요소 기본적인 레이아웃
inline-block 블록이면서 가로 정렬 가능 간단한 메뉴 배치
float 좌우 정렬 (구식) 사용 지양 (Flexbox 추천)
flexbox 1차원 정렬 (가로/세로) 일반적인 레이아웃
grid 2차원 정렬 (행+열) 복잡한 레이아웃
@media 반응형 스타일링 모바일 대응 필수

 

➡ 현대 웹 개발에서는 flexbox와 grid를 조합하여 레이아웃을 구성하는 것이 가장 효율적이다.

➡ 반응형 웹을 만들기 위해 @media 미디어 쿼리를 사용하여 화면 크기에 따라 스타일을 조정하는 것이 중요하다.

반응형