말하는나무 PR. Mahannamu/맞춤제작 견적서 Customization Quote Request

1. 덩어리별로 구역을 나눔

Mr.코딩 2023. 7. 24. 17:40 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>맞춤제작 견적의뢰서</title>

    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <header class="header">
      <div class="logo-area">로고 에어리어</div>
      <div class="custom">맞춤</div>
      <div class="type-choice">가구종류</div>
      <div class="quotation-request">견적 의뢰서</div>
      <div class="button-area">버튼들</div>
    </header>

    <main class="main">
      <div class="clent-info">의뢰자 정보</div>
      <div class="style-choice">원하는 스타일</div>
      <div class="level-method">
        <div class="level">제작수준</div>
        <div class="method">마감방법</div>
      </div>
      <div class="budget-dday">
        <div class="budget">원하는 금액대</div>
        <div class="dday">원하는 마감일</div>
      </div>
    </main>

    <article class="article">
      <div class="design-area">디자인</div>
      <nav class="nav-area">설명 목록</nav>
    </article>

    <footer>바닥글</footer>
    <aside>광고들</aside>
  </body>
</html>

 

문서를 큰 덩어리 몇 개로 나누되, 가급적 시멘틱 태그를 사용함.

따라서 위 코드는

  • 로고, 문서 제목, 명령 버튼이 위치한 header 구역
  • 의뢰자 정보, 가구 스타일, 제작방식 및 마감방법, 원하는 금액대와 마감일을 설정할 수 있는 main 구역
  • 원하는 디자인을 삽입, 수정할 수 있는 article 구역 (그 안에 설명 목록 포함)
  • 바닥글 (footer)
  • 광고글 (aside)

로 구성함. 아래는 코드 실행 모습

결국 내가 쓴 태그는 전부 '블록' 요소였던 건가.

  display: flex; /* 아이템들을 가로로 배열합니다. */
  justify-content: space-between; /* 아이템들 사이의 간격을 최대로 설정하여 가로로 정렬합니다. */
  align-items: center; /* 아이템들을 수직 방향으로 가운데로 정렬합니다. */
  border: 1px solid rgb(203, 198, 198); /* 테두리 스타일을 추가합니다. (선택사항) */
  padding: 10px; /* 헤더 내부 여백을 추가합니다. (선택사항) */

 

위 5가지 CSS를 (거의) 무조건 입력해서, 

블럭을 한 눈에 파악할 수 있게 함.

각 블럭의 '이름'을 임시로라도 반드시 넣는 게 파악에 용이함.

display: flex 는 아이템을 가로로 배열하게 함.

 

위 CSS를 적용하면

뷰포트를 줄이면 광고가 사라지게

 

/* .ad-area 클래스에 스타일을 정의하여 페이지 우측에 고정합니다. */
.ad-area {
  position: fixed; /* 해당 요소를 페이지에 고정시킵니다. */
  top: 0; /* 페이지의 우측 상단에 배치됩니다. */
  right: 0; /* 페이지의 우측 상단에 배치됩니다. */
  width: 200px; /* 요소의 너비를 200픽셀로 지정합니다. */
  background-color: lightgray; /* 배경색을 밝은 회색으로 지정합니다. */
  padding: 10px; /* 내부 여백을 10픽셀로 지정합니다. */
  display: none; /* 뷰포트가 줄어들 때 요소를 숨깁니다. */
}

/* 뷰포트의 가로 너비가 800픽셀 이상일 때 요소를 보이도록 설정합니다. */
@media (min-width: 800px) {
  .ad-area {
    display: block;
  }
}

 

ad-area 에 display: none; 을 넣음

미디어 쿼리로 뷰포트가 800px 이하로 줄어들면 광고가 사라지게(block) 함.