CSS

[CSS] 15. 인블로그 만들기

백하림's avatar
백하림
Mar 11, 2025
[CSS] 15. 인블로그 만들기
Contents
1. HTML 구조 만들기2. HTML 레이아웃 잡기3. CSS 디자인 하기
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

1. HTML 구조 만들기

(인블로그 참고)

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

<head>
    <style>
        div {
            border: 1px solid black;
        }

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

        .container {
            width: 80%;
        }
    </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="h-title">Harimmon Blog</div>
                <div class="h-content">하림몬 블로그</div>
            </div>
            <div class="menu">
                <div class="m-item">See All</div>
                <div class="m-item">환경세팅</div>
                <div class="m-item">컴퓨터 사이언스</div>
                <div class="m-item">자바</div>
            </div>
            <div class="recent">
                <div class="r-img"></div>
                <div class="r-info">
                    <div class="r-title">최신글 제목</div>
                    <div class="r-footer">최신글 정보</div>
                </div>
            </div>
            <div class="blog-list">
                <div class="blog-item">
                    <div class="b-img">블로그 사진</div>
                    <div class="b-title">블로그 제목</div>
                    <div class="b-footer">블로그 하단</div>
                </div>
                <div class="blog-item">
                    <div class="b-img">블로그 사진</div>
                    <div class="b-title">블로그 제목</div>
                    <div class="b-footer">블로그 하단</div>
                </div>
                <div class="blog-item">
                    <div class="b-img">블로그 사진</div>
                    <div class="b-title">블로그 제목</div>
                    <div class="b-footer">블로그 하단</div>
                </div>
                <div class="blog-item">
                    <div class="b-img">블로그 사진</div>
                    <div class="b-title">블로그 제목</div>
                    <div class="b-footer">블로그 하단</div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
notion image

2. HTML 레이아웃 잡기

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

<head>
    <style>
        div {
            border: 1px solid black;
            padding: 3px;
        }

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

        .container {
            width: 80%;
        }

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

        .menu {
            display: flex;
        }

        .recent {
            display: grid;
            grid-template-columns: 5fr 4fr;
        }

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

        .r-footer {
            display: flex;
        }

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

        .b-footer {
            display: flex;
        }
    </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="h-title">Harimmon Blog</div>
                <div class="h-content">하림몬 블로그</div>
            </div>
            <div class="menu">
                <div class="m-item">See All</div>
                <div class="m-item">환경세팅</div>
                <div class="m-item">컴퓨터 사이언스</div>
                <div class="m-item">자바</div>
            </div>
            <div class="recent">
                <div class="r-img">이미지</div>
                <div class="r-info">
                    <div class="r-title">최신글 제목</div>
                    <div class="r-footer">
                        <div class="'circle-img">서클 이미지</div>
                        <div class="date">날짜</div>
                        <div class="category">카테고리 제목</div>
                    </div>
                </div>
            </div>
            <div class="blog-list">
                <div class="blog-item">
                    <div class="b-img">블로그 사진</div>
                    <div class="b-title">블로그 제목</div>
                    <div class="b-footer">
                        <div class="'circle-img">서클 이미지</div>
                        <div class="date">날짜</div>
                        <div class="category">카테고리 제목</div>
                    </div>
                </div>
                <div class="blog-item">
                    <div class="b-img">블로그 사진</div>
                    <div class="b-title">블로그 제목</div>
                    <div class="b-footer">
                        <div class="'circle-img">서클 이미지</div>
                        <div class="date">날짜</div>
                        <div class="category">카테고리 제목</div>
                    </div>
                </div>
                <div class="blog-item">
                    <div class="b-img">블로그 사진</div>
                    <div class="b-title">블로그 제목</div>
                    <div class="b-footer">
                        <div class="'circle-img">서클 이미지</div>
                        <div class="date">날짜</div>
                        <div class="category">카테고리 제목</div>
                    </div>
                </div>
                <div class="blog-item">
                    <div class="b-img">블로그 사진</div>
                    <div class="b-title">블로그 제목</div>
                    <div class="b-footer">
                        <div class="'circle-img">서클 이미지</div>
                        <div class="date">날짜</div>
                        <div class="category">카테고리 제목</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>
notion image

3. CSS 디자인 하기

블로그 로고 넣기

<div class="logo">
	<img src="img/다운로드.webp">
</div>

돋보기 이모티콘

<div class="search">
	<i class="fas fa-search"></i>
</div>
notion image

원형 프로필 사진

.circle-img {
            width: 25px;
            height: 25px;
            border-radius: 50%;
            overflow: hidden;
        }

.circle-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
notion image

사진 크기 고정

.b-img {
            width: 600px;
            height: 300px;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }

.b-img img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
notion image

최신글 제목, 블로그 제목의 글씨 크기 및 굵기 조정

.r-title {
            font-size: 40px;
            font-weight: bold;
        }

.b-title {
            font-size: 30px;
            font-weight: bold;
        }
notion image
 
Share article

More articles

See more posts

[CSS] 17. 카드 레이아웃 만들기

March 11, 2025
[CSS] 17. 카드 레이아웃 만들기

[CSS] 16. 구조 짜보기

March 11, 2025
[CSS] 16. 구조 짜보기

[CSS] 14. 실습 예제

March 10, 2025
[CSS] 14. 실습 예제

[CSS] 13. Object-fit

March 10, 2025
[CSS] 13. Object-fit

harimmon

RSS·Powered by Inblog