과제1) 블로그 글 만들기

🌟레이아웃 신경써서 하기

1. box 나누고, 서열 정리하기

⬇️⬇️

2. HTML에서 서열정리 바탕으로 태그 묶기

  <body>
    <div class="container">

    <!--왼쪽 큰 사각형-->
      <div class="blog-content">

        <!--왼 위 사각형-->
        <div>
          <img class="blog-profile" src="lion.jpg"/>
          <div class="blog-name">
            <h4 class="name">OOO</h4>
            <p class="time">2024.00.00</p>
          </div>
        </div>

        <!--왼 아래 사각형-->
        <div style="clear: both">
          <h3 class="title">멋사 아기사자 12기 2주차입니다.</h3>
          <p class="content">
            블로그 글 목록 만들기 실습을 2주차 과제로 하고 있습니다.
          </p>
        </div>

      </div>

    <!--오른쪽 큰 사각형-->
      <div class="blog-img">
        <img src="lion.jpg" style="width: 100%" />
      </div>

    </div>

  </body>

3. CSS에서 레이아웃 정리

1. container

width: 800px 으로 기준잡음

2. blog-content / blog-image

각 width을 container width(부모)의 80%, 20%로.

float: left;으로 띄어서 왼쪽 정렬

3. blog-content 안의 div

편의상 위쪽 div박스를 div(1), 아래쪽 div박스를 div(2)라고 하겠다.

4. div(1) 안의 blog-profile/blog-name

float left;를 사용해 왼쪽 정렬해주어야 한다.

5. div(2) 안의 title/content

과제3) 폼 만들기

🌟box-sizing: border-box; 사용

div,
input, 
textarea{
  box-sizing: border-box;
}

1. form-background

display: flex; 로 flex container로 만든다.
justify-content: center; 수평 가운데 정렬
align-items: center; 수직 가운데 정렬

2. form-white

3. w-50, w-100

폼 인풋이 한줄에 같이 있는 First Name과 Last Name만 w-50, 이외에는 w-100을 가지고 있었고, name과 message사이에 clear: both가 있는 것을 보고 우선 w-50에는 너비를 w-50의 50%으로 하고, float: left를 사용을해서 한 줄에 정렬해야겠다고 생각.

.w-50 {
  padding: 10px;
  width: 50%; 
  float: left; 
}

.w-100 {
  padding: 10px;
  width: 100%; 
}

Last Name 다음 Message 블럭이 올때 <div style="clear: both"></div> 로 float 없애고 밑에 붙여주기

https://github.com/lvyest/frontend-handout-0328/tree/kayoung

'FE > HTML&CSS' 카테고리의 다른 글

[HTML/CSS] 웹레이아웃 기초 (2)	2025.06.29
[HTML/CSS] 과제 자기소개 홈페이지 제작하기 (0)	2025.06.29
[HTML/CSS] HTML/CSS 기초 정리 (4)	2025.06.29
[멋쟁이사자처럼] 12기 합격수기 (4)	2025.06.29

[HTML/CSS] 블로그/폼 레이아웃 제작