HTML/CSS

[HTML/CSS] 11. HTML 그림 그리는 방법

김건우's avatar
김건우
Mar 13, 2025
[HTML/CSS] 11. HTML 그림 그리는 방법
Contents
1. HTML 구조 만들기2. HTML 레이아웃 잡기3. CSS 디자인 하기
notion image

1. HTML 구조 만들기

<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">ggg</div>
          <div class="h-content">gggg</div>
        </div>
        <div class="menu">
          <div class="m-item">SeeAll</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>
          <div class="r-title">최신글 제목</div>
          <div class="r-footer">최신글 정보</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>
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;
      }

      .r-img {
        height: 300px;
      }

      .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">ggg</div>
          <div class="h-content">gggg</div>
        </div>
        <div class="menu">
          <div class="m-item">SeeAll</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 디자인 하기

 <!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;
        padding-bottom: 20px;
      }

      .m-item {
        border-radius: 10px;
        margin-right: 30px;
      }

      .header {
        padding-top: 100px;
        padding-bottom: 100px;
      }

      .h-title {
        font-size: 45px;
        font-weight: bold;
        padding-bottom: 30px;
      }

      .h-content {
        font-size: 15px;
      }

      .recent {
        display: grid;
        grid-template-columns: 6fr 4fr;
        padding-bottom: 40px;
      }

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

      .r-footer {
        display: flex;
        font-size: 18px;
      }

      .r-info {
        /* 플렉스의 방향은 가로인데 컬럼으로 방향을 바꿔줌 */
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .r-img {
        height: 300px;
        margin-right: 30px;
      }

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

      .b-title {
        font-size: 25px;
        font-weight: bold;
        padding-bottom: 30px;
      }

      .b-footer {
        display: flex;
        padding-bottom: 30px;
      }

      .b-img {
        padding-right: 20px;
      }

      .category {
        background-color: rgba(65, 67, 70, 0.144);
        border-radius: 10px;
      }

      .circle-img {
        margin-right: 20px;
      }

      .date {
        margin-right: 15px;
      }

      .m-item button {
        padding: 10px 10px;
        border: none;
        background-color: rgba(247, 243, 243, 0.685);
        color: black;
        border-radius: 3px;
        cursor: pointer;
        font-size: 15px;
      }
    </style>
  </head>
  <body>
    <div class="root">
      <div class="container">
        <div class="nav">
          <div class="logo">
            <img src="/logo.webp" style="width: 70%; height: 80%" />
          </div>
          <div class="search">
            <link
              rel="stylesheet"
              href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"
            />
            <i class="fas fa-search"></i>
          </div>
        </div>
        <div class="header">
          <div class="h-title">gunwoo</div>
          <div class="h-content">Welcome to the gunwoo blog</div>
        </div>
        <div class="menu">
          <div class="m-item"><button>See All</button></div>
          <div class="m-item"><button>환경세팅</button></div>
          <div class="m-item"><button>컴퓨터사이언스</button></div>
          <div class="m-item"><button>자바</button></div>
        </div>
        <div class="recent">
          <div class="r-img">
            <img src="/london.jpg" style="width: 100%; height: 100%" />
          </div>
          <div class="r-info">
            <div class="r-title">
              [프로그래머스 SQL] 조건에 맞는 사용자 정보 조회하기
            </div>
            <div class="r-footer">
              <div class="circle-img">
                <i class="fas fa-circle"></i>
              </div>
              <div class="date">Mar 10, 2025</div>
              <div class="category">프로그래머스 SQL</div>
            </div>
          </div>
        </div>

        <div class="blog-list">
          <div class="blog-item">
            <div class="b-img">
              <img
                src="/Screenshot_22.png"
                style="width: 100%; height: 100%; object-fit: cover"
              />
            </div>
            <div class="b-title">프로그래머스 자바 문제 풀이</div>
            <div class="b-footer">
              <div class="circle-img">
                <i class="fas fa-circle"></i>
              </div>
              <div class="date">Mar 10, 2025</div>
              <div class="category">프로그래머스 자바</div>
            </div>
          </div>
          <div class="blog-item">
            <div class="b-img">
              <img
                src="/Screenshot_22.png"
                style="width: 100%; height: 100%; object-fit: cover"
              />
            </div>
            <div class="b-title">프로그래머스 SQL</div>
            <div class="b-footer">
              <div class="circle-img">
                <i class="fas fa-circle"></i>
              </div>
              <div class="date">Mar 07, 2025</div>
              <div class="category">프로그래머스 SQL</div>
            </div>
          </div>
          <div class="blog-item">
            <div class="b-img">
              <img src="/Screenshot_30.png" style="width: 100%; height: 100%" />
            </div>
            <div class="b-title">프로그래머스 SQL</div>
            <div class="b-footer">
              <div class="circle-img">
                <i class="fas fa-circle"></i>
              </div>
              <div class="date">Mar 07, 2025</div>
              <div class="category">프로그래머스 SQL</div>
            </div>
          </div>
          <div class="blog-item">
            <div class="b-img">
              <img src="/Screenshot_32.png" style="width: 100%; height: 100%" />
            </div>
            <div class="b-title">프로그래머스 자바 홀짝 구분</div>
            <div class="b-footer">
              <div class="circle-img">
                <i class="fas fa-circle"></i>
              </div>
              <div class="date">Mar 08, 2025</div>
              <div class="category">프로그래머스 자바</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
notion image
notion image
Share article

gunwoo

RSS·Powered by Inblog