[HTML/CSS] 14. 전체 실습 예제

문정준

Mar 11, 2025

Contents

Inblog 만들어보기 문제 분석 1. HTML 구조 잡기 2. CSS Layout 3. CSS 디자인 & 완성

Inblog 만들어보기

Inblog의 UI를 참고하여 HTML 파일로 화면을 구성하시오.

문제 분석

logo/nickname
search

header

nickname
content

category

latest

img
content

title
info

grid

img
content

title
info

1. HTML 구조 잡기


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            border: 1px solid black;
        }

        .root {
            display: flex;
            justify-content: center;
        }

        .container {
            width: 80%;
        }

        .nav {
            display: flex;
            justify-content: space-between;
        }

        .menu {
            display: flex;
            justify-content: start;
        }

        .latest {
            display: grid;
            grid-template-columns: 3fr 2fr;
        }

        .latest-img {
            background-image: url("london.jpg");
            background-size: cover;
            background-position: center;
            height: 300px;
        }

        .latest-content {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .grid-box {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .grid-item {
            display: grid;
            grid-template-rows: 5fr 1fr 1fr;
        }
    </style>
</head>

<body>
    <div class="root">
        <div class="container">
            <div class="nav">
                <div class="logo">로고</div>
                <div class="search">검색</div>
            </div>
            <div class="header">
                <div class="header-title">sxias</div>
                <div class="header-content">
                    <a href="https://github.com/sxias">https://github.com/sxias</a>
                </div>
            </div>
            <div class="menu">
                <div class="menu-item">See All</div>
                <div class="menu-item">환경 세팅</div>
                <div class="menu-item">컴퓨터사이언스</div>
                <div class="menu-item">자바</div>
            </div>
            <div class="latest">
                <div class="latest-img"></div>
                <div class="latest-content">
                    <div class="latest-content-title">타이틀</div>
                    <div class="latest-content-info">내용</div>
                </div>
            </div>
            <div class="grid-box">
                <div class="grid-item">
                    <div class="grid-img">사진</div>
                    <div class="grid-title">타이틀</div>
                    <div class="grid-info">내용</div>
                </div>
                <div class="grid-item">
                    <div class="grid-img">사진</div>
                    <div class="grid-title">타이틀</div>
                    <div class="grid-info">내용</div>
                </div>
                <div class="grid-item">
                    <div class="grid-img">사진</div>
                    <div class="grid-title">타이틀</div>
                    <div class="grid-info">내용</div>
                </div>
                <div class="grid-item">
                    <div class="grid-img">사진</div>
                    <div class="grid-title">타이틀</div>
                    <div class="grid-info">내용</div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

2. CSS Layout


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            border: 1px solid black;
            padding: 5px;
            box-sizing: border-box;
        }

        .root {
            display: flex;
            justify-content: center;
        }

        .container {
            width: 1080px;
        }

        .nav {
            display: flex;
            justify-content: space-between;
        }

        .logo {
            display: flex;
        }

        .menu {
            display: flex;
        }

        .latest {
            display: grid;
            grid-template-columns: 4fr 3fr;
        }

        .latest-img {
            background-image: url("london.jpg");
            background-size: cover;
            background-position: center;
            height: 300px;
        }

        .latest-content {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .latest-content-info {
            display: flex;
        }

        .grid-box {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .grid-item {
            display: grid;
            grid-template-rows: 250px 1fr 1fr;
        }

        .grid-img {
            background-image: url("london.jpg");
            background-size: cover;
            background-position: center;
        }

        .grid-info {
            display: flex;
        }
    </style>
</head>

<body>
    <div class="root">
        <div class="container">
            <div class="nav">
                <div class="logo">
                    <div>로고</div>
                    <div>|</div>
                    <div>sxias</div>
                </div>
                <div class="search">검색</div>
            </div>
            <div class="header">
                <div class="header-title">sxias</div>
                <div class="header-content">
                    <a href="https://github.com/sxias">https://github.com/sxias</a>
                </div>
            </div>
            <div class="menu">
                <div class="menu-item">See All</div>
                <div class="menu-item">환경 세팅</div>
                <div class="menu-item">컴퓨터사이언스</div>
                <div class="menu-item">자바</div>
            </div>
            <div class="latest">
                <div class="latest-img"></div>
                <div class="latest-content">
                    <div class="latest-content-title">타이틀</div>
                    <div class="latest-content-info">
                        <div class="writer">작성자</div>
                        <div class="date">작성일</div>
                        <div class="category">카테고리</div>
                    </div>
                </div>
            </div>
            <div class="grid-box">
                <div class="grid-item">
                    <div class="grid-img"></div>
                    <div class="grid-title">타이틀</div>
                    <div class="grid-info">
                        <div class="writer">작성자</div>
                        <div class="date">작성일</div>
                        <div class="category">카테고리</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-img"></div>
                    <div class="grid-title">타이틀</div>
                    <div class="grid-info">
                        <div class="writer">작성자</div>
                        <div class="date">작성일</div>
                        <div class="category">카테고리</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-img"></div>
                    <div class="grid-title">타이틀</div>
                    <div class="grid-info">
                        <div class="writer">작성자</div>
                        <div class="date">작성일</div>
                        <div class="category">카테고리</div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-img"></div>
                    <div class="grid-title">타이틀</div>
                    <div class="grid-info">
                        <div class="writer">작성자</div>
                        <div class="date">작성일</div>
                        <div class="category">카테고리</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

3. CSS 디자인 & 완성

편의상 배경 그림은 하나로 통일

로고의 닉네임을 클릭하면 실제 inblog로 이동할 수 있도록 a 태그 부여

검색, 메뉴 (카테고리), 게시글의 카테고리 등은 전부 버튼으로 구성

내용의 github 링크에 a태그 부여 후 색깔 변경 → 직접 이동 가능


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
    <style>
        div {
            border: none;
            padding: 5px;
            box-sizing: border-box;
        }

        .root {
            display: flex;
            justify-content: center;
        }

        .container {
            width: 1080px;

        }

        .nav {
            display: flex;
            justify-content: space-between;
        }

        .logo {
            display: flex;
            align-items: end;
            gap: 10px;
        }

        .logo-img {
            background-image: url("logo.jpg");
            background-size: contain;
            background-position: cover;
            background-size: 100% 100%;
            width: 132px;
            height: 36px;

        }

        .logo-bar {
            font-size: 20px;
            font-weight: bold;
        }

        .logo-name a {
            font-size: 20px;
            font-weight: bold;
            border: none;
            text-decoration: none;
            color: black;
            font-family: malgun gothic;
        }

        .search {
            display: flex;
            align-items: center;
        }

        .search>button {
            border: none;
            background-color: transparent;
            cursor: pointer;
        }

        .header-title {
            font-size: 36px;
            font-weight: bold;
            margin: 50px 0px;
        }

        .header-content {
            font-size: 14px;
            font-weight: normal;
            margin-bottom: 50px;
        }

        .header-content a {
            color: black;
        }

        .menu {
            display: flex;
        }

        .menu-item>button {
            font-size: 12px;
            font-weight: 450;
            color: rgb(100, 100, 100);
            padding: 0px 10px;
            border: none;
            background-color: transparent;
            cursor: pointer;
        }

        .latest {
            display: grid;
            grid-template-columns: 4fr 3fr;
        }

        .latest-img {
            background-image: url("london.jpg");
            background-size: cover;
            background-position: center;
            height: 300px;
        }

        .latest-content {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }

        .latest-content-title {
            font-size: 32px;
            font-weight: bolder;
        }

        .latest-content-info {
            display: flex;
            margin-right: 10px;
        }

        .writer {
            background-image: url("profile.jpg");
            background-size: cover;
            background-position: center;
            width: 30px;
            height: 30px;
            border-radius: 50%;
        }

        .date {
            font-size: 12px;
            color: rgb(100, 100, 100);
        }

        .category>button {
            font-size: 12px;
            color: black;
            padding: 0px 10px;
            border: 1px solid lightgray;
            border-radius: 10px;
            background-color: lightgray;
            cursor: pointer;
        }

        .grid-box {
            display: grid;
            grid-template-columns: 1fr 1fr;
        }

        .grid-item {
            display: grid;
            grid-template-rows: 250px 1fr 1fr;
        }

        .grid-img {
            background-image: url("london.jpg");
            background-size: cover;
            background-position: center;
        }

        .grid-title {
            font-size: 18px;
            font-weight: bold;
        }

        .grid-info {
            display: flex;
        }
    </style>
</head>

<body>
    <div class="root">
        <div class="container">
            <div class="nav">
                <div class="logo">
                    <div class="logo-img"></div>
                    <div class="logo-bar">|</div>
                    <div class="logo-name">
                        <a href="https://inblog.ai/sxias">sxias</a>
                    </div>
                </div>
                <div class="search">
                    <button>
                        <i class="fa fa-search" style="font-size:20px;"></i>
                    </button>
                </div>
            </div>
            <div class="header">
                <div class="header-title">sxias</div>
                <div class="header-content">
                    <div>a32176740@gmail.com</div>
                    <div>
                        <a href="https://github.com/sxias">https://github.com/sxias</a>
                    </div>
                </div>
            </div>
            <div class="menu">
                <div class="menu-item">
                    <button>
                        See All
                    </button>
                </div>
                <div class="menu-item">
                    <button>
                        환경 세팅
                    </button>
                </div>
                <div class="menu-item">
                    <button>
                        컴퓨터사이언스
                    </button>
                </div>
                <div class="menu-item">
                    <button>
                        자바
                    </button>
                </div>
            </div>
            <div class="latest">
                <div class="latest-img"></div>
                <div class="latest-content">
                    <div class="latest-content-title">[컴퓨터사이언스] 7. OSI 7계층</div>
                    <div class="latest-content-info">
                        <div class="writer"></div>
                        <div class="date">Feb 03, 2025</div>
                        <div class="category">
                            <button>컴퓨터사이언스</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="grid-box">
                <div class="grid-item">
                    <div class="grid-img"></div>
                    <div class="grid-title">[컴퓨터사이언스] 6. Stateful & Stateless</div>
                    <div class="grid-info">
                        <div class="writer"></div>
                        <div class="date">Feb 03, 2025</div>
                        <div class="category">
                            <button>컴퓨터사이언스</button>
                        </div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-img"></div>
                    <div class="grid-title">[컴퓨터사이언스] 5. HTML</div>
                    <div class="grid-info">
                        <div class="writer"></div>
                        <div class="date">Jan 31, 2025</div>
                        <div class="category">
                            <button>컴퓨터사이언스</button>
                        </div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-img"></div>
                    <div class="grid-title">[컴퓨터사이언스] 4. 신뢰성 있는 통신 with CIA</div>
                    <div class="grid-info">
                        <div class="writer"></div>
                        <div class="date">Jan 31, 2025</div>
                        <div class="category">
                            <button>컴퓨터사이언스</button>
                        </div>
                    </div>
                </div>
                <div class="grid-item">
                    <div class="grid-img"></div>
                    <div class="grid-title">[컴퓨터사이언스] 3. 컴퓨터 구조</div>
                    <div class="grid-info">
                        <div class="writer"></div>
                        <div class="date">Jan 30, 2025</div>
                        <div class="category">
                            <button>컴퓨터사이언스</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

✏️

Trouble Shooting

navigation : 크기가 줄어들면 자동으로 비율을 맞추도록 수정해야 함

블로그 글을 클릭할 수 있도록 하이퍼링크 추가

a 태그를 써야하는지, 다른 방법이 있는지?

background-image로 처리 → 직접 img 소스를 받아오도록 수정해야 함

grid 사이의 gap 처리

See more posts

[HTML/CSS] 14. 전체 실습 예제

Inblog 만들어보기

문제 분석

1. HTML 구조 잡기

2. CSS Layout

3. CSS 디자인 & 완성

Trouble Shooting

[HTML/CSS] 17. Display Design

[HTML/CSS] 15. Airbnb 만들기

[HTML/CSS] 13. Card 박스 만들기

[HTML/CSS] 12-2. GridLayout 실습 2