5.3 블로그

약 8분

읽기 설정

글자 크기

줄 간격

글꼴

5.3 블로그

이번 섹션에서는 실제 블로그 웹사이트를 구축하면서 반응형 웹 디자인의 원리를 더욱 깊이 이해하고 실습할 것입니다. 블로그는 콘텐츠 중심의 웹사이트로 다양한 장치에서 정보에 접근할 수 있도록 설계되어야 합니다. 이를 위해 HTML, CSS, 그리고 JavaScript를 활용하여 기본적인 블로그 레이아웃을 구현할 것입니다.

블로그 실습 목표

블로그의 기본 구조와 레이아웃 설계
CSS Flexbox와 Grid를 활용한 반응형 디자인
다양한 장치에서 블로그가 어떻게 보이는지 체험
JavaScript를 활용한 간단한 기능 추가

블로그 기본 구조

HTML을 사용하여 블로그의 기본 구조를 설정합니다. 기본적으로 헤더, 메인 콘텐츠, 사이드바, 푸터의 구조로 나누어집니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>나의 블로그</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <header>
        <h1>나의 블로그</h1>
        <nav>
            <ul>
                <li><a href="#">홈</a></li>
                <li><a href="#">포스트</a></li>
                <li><a href="#">연락처</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <article>
            <h2>첫 번째 포스트</h2>
            <p>블로그 콘텐츠 예시...</p>
        </article>
    </main>
    <aside>
        <h3>최근 포스트</h3>
        <ul>
            <li><a href="#">두 번째 포스트</a></li>
            <li><a href="#">세 번째 포스트</a></li>
        </ul>
    </aside>
    <footer>
        <p>&copy; 2023 나의 블로그</p>
    </footer>
</body>
</html>

CSS 작성

CSS를 사용하여 위에서 설정한 HTML 구조에 스타일을 추가하고, 반응형 레이아웃을 설정합니다. Flexbox와 Grid를 활용하여 요소를 정렬합니다.

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}
header, footer {
    background: #333;
    color: white;
    padding: 10px 20px;
}
header h1 {
    margin: 0;
}
nav ul {
    list-style: none;
    padding: 0;
}
nav ul li {
    display: inline;
    margin-right: 15px;
}
main {
    display: flex;
    flex-direction: column;
    padding: 20px;
}
article {
    flex: 1;
    margin: 10px 0;
}
aside {
    background: #f4f4f4;
    padding: 10px;
}
footer {
    text-align: center;
}
@media (min-width: 768px) {
    main {
        flex-direction: row;
    }
    article {
        flex: 3;
        margin-right: 20px;
    }
    aside {
        flex: 1;
    }
}

JavaScript로 기능 추가

간단한 JavaScript를 적용하여 블로그 포스트 목록을 동적으로 생성하거나 사용자 상호작용을 처리할 수 있습니다.

const posts = [
    { title: '첫 번째 포스트', content: '블로그 콘텐츠 예시...' },
    { title: '두 번째 포스트', content: '두 번째 포스트 내용...' },
];
const main = document.querySelector('main');
posts.forEach(post => {
    const article = document.createElement('article');
    article.innerHTML = `<h2>${post.title}</h2><p>${post.content}</p>`;
    main.appendChild(article);
});

실습

위의 코드를 바탕으로 블로그 웹사이트를 직접 만들어보세요. 위의 HTML, CSS, JavaScript 코드를 지역 환경에서 구현하고, Chrome DevTools를 사용하여 다양한 화면에서의 반응형을 테스트해 보세요.

복습 및 과제

블로그 레이아웃을 수정하여 디자인을 개선해보세요.
새로운 포스트를 추가하는 기능을 JavaScript로 구현해보세요.
다양한 디바이스에서 블로그의 레이아웃이 어떻게 변화하는지 관찰하고 정리해보세요.

5.3 블로그

5.3 블로그

블로그 실습 목표

블로그 기본 구조

CSS 작성

JavaScript로 기능 추가

실습

복습 및 과제

댓글 0