HTML/CSS

[HTML/CSS]14.인블로그 페이지 만들기

손영민's avatar
손영민
Mar 11, 2025
[HTML/CSS]14.인블로그 페이지 만들기
Contents
1. HTML 구조 만들기2. HTML 레이아웃 잡기3. CSS 디자인하기

1. HTML 구조 만들기

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

<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">Getinthere 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>
 

2. HTML 레이아웃 잡기

notion image
<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      div {
        border: 1px solid black;
        padding: 5px;
      }

      .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;
      }

      .r-footer {
        display: flex;
      }

      .r-img {
        height: 300px;
      }

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

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

      .b-footer {
        display: flex;
      }


    </style>
    <title>Document</title>
  </head>
  <body>
    <div class="div">
      <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">블로그이름</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 class="m-item">알고리즘</div>
            <div class="m-item">HTML/CSS</div>
            <div class="m-item">데이터베이스</div>
            <div class="m-item">코딩 기초 트레이닝</div>
            <div class="m-item">SQL 고득점 KIT</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-image">서클이미지</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-image">서클이미지</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-image">서클이미지</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-image">서클이미지</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-image">서클이미지</div>
                          <div class="date">날짜</div>
                          <div class="category">카테고리</div>
                   </div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
 

3. CSS 디자인하기


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

<!DOCTYPE html>
<html lang="en">
  <head>
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
    />
    <style>
      div {
        padding: 5px;
      }

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

      .container {
        width: 80%;
      }

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

      .logo {
        display: flex;
      }

      .logo-img {
        width: 128px;
        height: 32px;
      }

      .logo-text {
        font-size: 14px;
        font-weight: bold;
      }

      .h-title {
        padding-top: 50px;
      }

      .h-content {
        padding-bottom: 100px;
      }

      .menu {
        display: flex;
        font-size: 12px;
      }

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

      .r-footer {
        display: flex;
        height: 30px;
      }

      .r-img {
        max-width: 600px;
        max-height: 190px;
      }

      .r-img-item {
        width: 100%;
        height: 100%;
        border-radius: 5px;
        object-fit: cover;
      }

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

      .circle-img {
        width: 20px;
        height: 20px;
        border-radius: 50%;
      }

      .date {
        font-size: 12px;
      }


      .category-text {
        display: inline-block;
        font-size: 12px;
        background-color: rgba(229, 231, 235, 0.6);
        border-radius: 10px;
        padding: 2px 5px;
        line-height: 1;
      }

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

      .b-footer {
        display: flex;
      }

      .b-img {
        max-width: 430px;
        height: 160px;
      }

      .b-img-item {
        width: 100%;
        height: 100%;
        border-radius: 5px;
        object-fit: cover;
      }

    </style>
    <title>Document</title>
  </head>
  <body>
    <div class="div">
      <div class="root">
        <div class="container">
          <div class="nav">
            <div class="logo">
              <img src="logo.png" alt="logo" class="logo-img" />
              <div class="logo-text">|</div>
              <div class="logo-text">sson17</div>
            </div>
            <div class="search"><i class="fa fa-search"></i></div>
          </div>
          <div class="header">
            <div class="h-title">
              <h1>sson17</h1>
            </div>
            <div class="h-content">Welcome to the sson17 blog!</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 class="m-item">알고리즘</div>
            <div class="m-item">HTML/CSS</div>
          </div>
          <div class="recent">
            <div class="r-img">
              <img src="Screenshot_221.png" class="r-img-item" />
            </div>
            <div class="r-info">
              <div class="r-title">
                <h2>[HTML/CSS]13. Card 박스 만들기</h2>
              </div>
              <div class="r-footer">
                <div class="circle-image">
                  <img src="circle-image.png" alt="circle" class="circle-img" />
                </div>
                <div class="date">
                  <div class="date-text">Mar 11, 2025</div>
                </div>
                <div class="category">
                  <div class="category-text">HTML/CSS</div>
                </div>
              </div>
            </div>
          </div>

          <div class="blog-list">
            <div class="blog-item">
              <div class="b-img">
                <img src="Screenshot_222.png" class="b-img-item" />
              </div>
              <div class="b-title">[HTML/CSS]12. Gridlayout 실습</div>
              <div class="b-footer">
                <div class="circle-image">
                  <img src="circle-image.png" alt="circle" class="circle-img" />
                </div>
                <div class="date">Mar 11, 2025</div>
                <div class="category">
                  <div class="category-text">HTML/CSS</div>
                </div>
              </div>
            </div>

            <div class="blog-item">
              <div class="b-img">
                <img src="Screenshot_218.png" class="b-img-item" />
              </div>
              <div class="b-title">[HTML/CSS]11.Img CSS 와 icon</div>
              <div class="b-footer">
                <div class="circle-image">
                  <img src="circle-image.png" alt="circle" class="circle-img" />
                </div>
                <div class="date">Mar 11, 2025</div>
                <div class="category">
                  <div class="category-text">HTML/CSS</div>
                </div>
              </div>
            </div>

              <div class="blog-item">
                <div class="b-img">
                  <img src="Screenshot_226.png" alt="1" class="b-img-item" />
                </div>
                <div class="b-title">[HTML/CSS]10. CSS Position</div>
                <div class="b-footer">
                  <div class="circle-image">
                    <img src="circle-image.png" alt="circle" class="circle-img" />
                  </div>
                  <div class="date">Mar 11, 2025</div>
                  <div class="category">
                    <div class="category-text">HTML/CSS</div>
                  </div>
                </div>
            </div>

            <div class="blog-item">
                <div class="b-img">
                  <img src="Screenshot_227.png" alt="1" class="b-img-item" />
                </div>
                <div class="b-title">[HTML/CSS]9. Input 디자인</div>
                <div class="b-footer">
                  <div class="circle-image">
                    <img src="circle-image.png" alt="circle" class="circle-img" />
                  </div>
                  <div class="date">Mar 11, 2025</div>
                  <div class="category">
                    <div class="category-text">HTML/CSS</div>
                  </div>
                </div>
            </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
 
Share article

More articles

See more posts

[HTML/CSS]15.Airbnb 만들기

March 12, 2025
[HTML/CSS]15.Airbnb 만들기

[환경세팅(설치)]11.Tomcat WAS 설치 가이드

March 12, 2025
[환경세팅(설치)]11.Tomcat WAS 설치 가이드

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

March 11, 2025
[HTML/CSS]13. Card 박스 만들기

[HTML/CSS]12. Gridlayout 실습

March 11, 2025
[HTML/CSS]12. Gridlayout 실습

sson17

RSS·Powered by Inblog