HTML/CSS

[HTML/CSS] 12. HTML 그림그리는 법

김미숙's avatar
김미숙
Apr 02, 2025
[HTML/CSS] 12. HTML 그림그리는 법
Contents
1. HTML 구조 만들기2. HTML 레이아웃 잡기3. 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">parangdajavous</div>
          <div class="h-content">Welcome to parangdajavous</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: 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-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }

      .r-footer {
        display: flex;
      }

      .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">parangdajavous</div>
          <div class="h-content">Welcome to parangdajavous</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>

3. CSS 만들기

‼️
비율 줄였을때 사진 작아지는 거 해결하기
notion image
notion image
<!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>
      .root {
        display: flex;
        justify-content: center;
      }

      .container {
        width: 80%;
      }

      .nav {
        display: flex;
        justify-content: space-between;
        padding-bottom: 250px;
      }
      .menu {
        display: flex;
        font-size: 20px;
        font-weight: lighter;
      }

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

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

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

      .r-footer {
        display: flex;
      }

      .b-footer {
        display: flex;
      }

      .h-title {
        font-size: 50px;
        font-weight: bold;
        padding-bottom: 50px;
      }
      .h-content {
        font-size: 20px;
        padding-bottom: 250px;
      }

      .circle-img {
        background-image: url("/ch08/Screenshot_101.png");
        width: 40px;
        height: 40px;
        border-radius: 40%;
        background-size: cover;
        margin-right: 10px;
      }
      .date {
        font-size: 15px;
        margin-right: 10px;
      }
      .category {
        font-size: 15px;
        margin-right: 10px;
        padding-bottom: 20px;
      }

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

      .b-img {
        width: 100%;
        height: 400px;
        padding-bottom: 20px;
      }

      .m-item {
        margin-right: 50px;
        padding-bottom: 50px;
      }

      .b-title {
        padding-bottom: 50px;
      }
    </style>
  </head>

  <body>
    <div class="root">
      <div class="container">
        <div class="nav">
          <div class="logo"><img src="/ch08/logo.webp" /></div>
          <div class="search">🔍</div>
        </div>
        <div class="header">
          <div class="h-title">parangdajavous</div>
          <div class="h-content">Welcome to parangdajavous</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"><img src="/ch06/sky.png" /></div>
          <div class="r-info">
            <div class="r-title">[Coding Test_Java] 2. a와 b 출력하기</div>
            <div class="r-footer">
              <div class="circle-img"></div>
              <div class="date">Mar 11, 2025</div>
              <div class="category">Coding Test_Java</div>
            </div>
          </div>
        </div>
        <div class="blog-list">
          <div class="blog-item">
            <div class="b-img"><img src="/ch06/sky.png" class="b-img" /></div>
            <div class="b-title r-title">
              [Coding Test_Java] 1. 문자열 출력하기
            </div>
            <div class="b-footer">
              <div class="circle-img"></div>
              <div class="date">Mar 11, 2025</div>
              <div class="category">Coding Test_Java</div>
            </div>
          </div>
          <div class="blog-item">
            <div class="b-img"><img src="/ch06/sky.png" class="b-img" /></div>
            <div class="b-title r-title">[HTML/CSS] 10. Img CSS 와 Icon</div>
            <div class="b-footer">
              <div class="circle-img"></div>
              <div class="date">Mar 11, 2025</div>
              <div class="category">HTML/CSS</div>
            </div>
          </div>
          <div class="blog-item">
            <div class="b-img"><img src="/ch06/sky.png" class="b-img" /></div>
            <div class="b-title r-title">[HTML/CSS] 9. CSS Position</div>
            <div class="b-footer">
              <div class="circle-img"></div>
              <div class="date">Mar 11, 2025</div>
              <div class="category">HTML/CSS</div>
            </div>
          </div>
          <div class="blog-item">
            <div class="b-img"><img src="/ch06/sky.png" class="b-img" /></div>
            <div class="b-title r-title">
              [Coding Test_MySQL] 13. 평균 일일 대여 요금 구하기
            </div>
            <div class="b-footer">
              <div class="circle-img"></div>
              <div class="date">Mar 11, 2025</div>
              <div class="category">Coding Test_MySQL</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
 
Share article

parangdajavous

RSS·Powered by Inblog