CSS로 반응형 블로그 레이아웃 만드는 방법

CSS만으로도 간단한 마크업 구조와 몇 가지 스타일 규칙을 조합하면 데스크톱, 태블릿, 모바일 등 다양한 화면 크기에 자연스럽게 대응하는 반응형 블로그 레이아웃을 만들 수 있습니다.

핵심 포인트는 두 가지입니다. 첫째, <meta name="viewport"> 태그를 설정해 모바일 기기에서도 화면 너비를 올바르게 인식하도록 하고, 둘째, 고정 픽셀(px) 대신 퍼센트(%) 단위로 요소의 너비를 지정해 화면 크기에 따라 레이아웃이 유동적으로 조정되게 하는 것입니다.

전체 예제 코드

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    * {
        box-sizing: border-box;
    }
    body {
        margin: 0;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    nav {
        font-size: 20px;
        background-color: rgb(136, 22, 182);
        color: #cccccc;
        height: 75px;
    }
    ul {
        position: fixed;
        right:10px;
    }
    ul li {
        display: inline;
        padding-right: 30px;
        font-weight: 500;
        color: rgb(251, 255, 0);
    }
    .logo {
        width: 75%;
        margin-left: auto;
        margin-right: auto;
        color: white;
        float: left;
        font-size: 30px;
        padding-left: 20px;
        padding-top: 20px;
    }
    .blog {
        margin-top: 20px;
        width: 75%;
        margin-left: auto;
        margin-right: auto;
        height: 400px;
    }
    .post {
        margin-top: 20px;
        float: left;
    }
    .blogHeader {
        font-size: 36px;
        margin-bottom: 20px;
    }
    .links {
        float: right;
    }
    .links li {
        color: black;
    }
    footer {
        color: white;
        position: fixed;
        width: 100%;
        bottom: 0;
        margin-left: auto;
        margin-right: auto;
        font-size: 30px;
        height: 100px;
        padding: 20px;
        background-color: rgb(9, 141, 101);
        text-align: center;
    }
</style>
</head>
<body>
<nav>
<div class="logo">
↷ LOGO ↶
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<div class="blog">
<div class="post">
<div class="blogHeader">
<h1>Blog Heading</h1>
</div>
<div class="blog-body">
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Deserunt non neque eos eaque veritatis praesentium.
</p>
</div>
</div>
<div class="links">
<ul>
<li>BLOG 2</li>
<li>BLOG 3</li>
</ul>
</div>
</div>
<footer>
Copyright ©
</footer>
</body>
</html>

코드 주요 구성 요소 살펴보기

viewport 메타 태그: width=device-width, initial-scale=1 설정으로 모바일 브라우저에서도 실제 기기 너비에 맞춰 페이지가 렌더링됩니다.
box-sizing: border-box: 패딩과 테두리를 포함한 전체 크기를 계산해 레이아웃이 어긋나는 것을 방지합니다.
width: 75%: 로고와 본문 영역을 화면 너비의 75%로 지정해 어떤 해상도에서도 중앙 정렬된 유동 레이아웃이 유지됩니다.
float 활용: 본문(post)은 왼쪽에, 관련 글 링크(links)는 오른쪽에 배치해 2단 구조를 구성합니다.
고정 내비게이션과 푸터: 상단 nav와 하단 footer를 화면에 고정해 어느 위치에서든 접근성을 높였습니다.

실행 결과

위 코드를 브라우저에서 실행하면 보라색 상단 내비게이션 바, 중앙 정렬된 블로그 본문, 오른쪽 관련 글 링크 목록, 그리고 초록색 고정 푸터로 이루어진 반응형 블로그 페이지가 아래와 같이 출력됩니다.

CSS로 반응형 블로그 레이아웃 만드는 방법 – 실전 코드 예제

전체 예제 코드

코드 주요 구성 요소 살펴보기

실행 결과