본문 바로가기
말하는나무 PR. Mahannamu/맞춤제작 견적서 Customization Quote Request

의뢰서 단계별 갈무리 1

by Mr.코딩 2023. 7. 28.

페이지의 전체적인 구획을 나누되,

시멘틱 측면을 고려하여 heade, main, article, nav, footer, aside 같은 태그를 사용한다.

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>구획과 포지션 연습</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="content">
      <header class="header">
        <div class="header1">헤더1</div>
        <div class="header2">헤더2</div>
        <div class="header3">헤더3</div>
        <div class="header4">헤더4</div>
        <div class="header5">헤더5</div>
      </header>
      <main class="main">
        <div class="main1">메인1</div>
        <div class="main2">메인2</div>
        <div class="main3">메인3</div>
        <div class="main4">메인4</div>
        <div class="main5">메인5</div>
      </main>
      <article class="article">
        <section class="design">디자인</section>
        <nav class="detail-list">디자인 상세</nav>
      </article>

      <footer class="footer">
        <div class="footer1">푸터1</div>
        <div class="footer2">푸터2</div>
        <div class="footer3">푸터3</div>
      </footer>
    </div>
    <aside class="ad">
      <div class="ad1">광고1</div>
      <div class="ad2">광고2</div>
      <div class="ad3">광고3</div>
      <div class="ad4">광고4</div>
      <div class="ad5">광고5</div>
    </aside>
  </body>
</html>

 

위에 쓰인 대부분의 태그들이 블록 요소임을 (세로로 쌓임)을 알 수 있다.

컨텐츠의 크기에 따라 늘어나게 되어 있다. (디폴트)

역으로 컨텐츠가 없으면 border를 줘도 티가 잘 나지 않는다.

글자든 이미지든 뭔 내용이 있어야, 가시적인 형태(박스)를 나타낼 수 있다.

가장 큰 덩어리인 .content와 aside를 가로로 배치한다. (display:flex; 선언으로)

그리고 그 아래의 부모 섹션들 안에 있는 자식 아이템들을  각각 가로로 배열한다.

 

이때 각 header 섹션과 main 섹션의 아이템들이 부모 컨테이너를 기준으로 비율적으로 공간을 차지하게 만든다.

이를 위해 

  • 부모 컨테이너에 플렉스박스가 선언되어 있어야 한다. (display: flex;)
  • 아이템 마다 배분율이 들어가야 한다 (flex: 1;, flex:3; -- 이렇게 하면 두 아이템은 부모 컨테이너를 1 대 3으로 각각 차지한다.)

 

body {
  display: flex;
}
.content {
  border: 1px solid rgb(97, 95, 91);
  width: 75vw;
  padding: 0.5%;
}

header,
main,
article,
footer {
  border: 1px solid rgb(97, 95, 91);
  display: flex;
}

.header1 {
  flex: 1; /* 1번 아이템은 나머지 아이템보다 1:1 비율로 공간 차지 */
  border
}

.header2 {
  flex: 2; /* 2번 아이템은 1번 아이템보다 두 배의 공간 차지 */
}

.header3 {
  flex: 3; /* 3번 아이템은 1번 아이템보다 세 배의 공간 차지 */
}

.header4 {
  flex: 2; /* 4번 아이템은 1번 아이템보다 두 배의 공간 차지 */
}

.header5 {
  flex: 1; /* 5번 아이템은 나머지 아이템보다 1:1 비율로 공간 차지 */
}

.main1 {
  flex: 1; /* 1번 아이템은 나머지 아이템보다 1:1 비율로 공간 차지 */
}

.main2 {
  flex: 3; /* 2번 아이템은 1번 아이템보다 세 배의 공간 차지 */
}

.main3 {
  flex: 2; /* 3번 아이템은 1번 아이템보다 두 배의 공간 차지 */
}

.main4 {
  flex: 1; /* 4번 아이템은 나머지 아이템보다 1:1 비율로 공간 차지 */
}

.main5 {
  flex: 2; /* 5번 아이템은 1번 아이템보다 두 배의 공간 차지 */
}

.design {
  flex: 5; /* 4번 아이템은 나머지 아이템보다 1:1 비율로 공간 차지 */
}

.detail-list {
  flex: 1; /* 5번 아이템은 1번 아이템보다 두 배의 공간 차지 */
}

.ad {
  padding: 0.2%;
  border: 1px solid gray;
}

전체 아웃라인 구성을 body 안에 새 컨테이너('total')를 추가하여, 그 안에 모든 요소를 넣어서 새로 작성함.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>구획과 포지션 연습</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="total">
      <div class="content">
        <header class="header">
          <div class="header1">헤더1</div>
          <div class="header2">헤더2</div>
          <div class="header3">헤더3</div>
          <div class="header4">헤더4</div>
          <div class="header5">헤더5</div>
        </header>
        <main class="main">
          <div class="main1">메인1</div>
          <div class="main2">메인2</div>
          <div class="main3">메인3</div>
          <div class="main4">메인4</div>
          <div class="main5">메인5</div>
        </main>
        <article class="article">
          <section class="design">디자인</section>
          <nav class="detail-list">디자인 상세</nav>
        </article>

        <footer class="footer">
          <div class="footer1">푸터1</div>
          <div class="footer2">푸터2</div>
          <div class="footer3">푸터3</div>
        </footer>
      </div>
      <aside class="ad">
        <div class="ad1">광고1</div>
        <div class="ad2">광고2</div>
        <div class="ad3">광고3</div>
        <div class="ad4">광고4</div>
        <div class="ad5">광고5</div>
      </aside>
    </div>
  </body>
</html>

그 다음 전체(total)에 플렉스박스를 선언해서 가로로 큰 덩어리가 두 블록으로 생성되도록 함.

.total {
  display: flex;
}

 

'말하는나무 PR. Mahannamu > 맞춤제작 견적서 Customization Quote Request' 카테고리의 다른 글

retry 1 - content와 aside(=ad)를 나누고 flexbox를 적용  (0) 2023.07.29
전체 구획 및 logo 부분, 중앙 정렬 및 간격 주기│의뢰서 단계별 갈무리 1-2  (0) 2023.07.28
4-2. 견적 의뢰서 제작 갈무리  (0) 2023.07.25
3. 드롭다운을 삽입하고, 버튼 부분의 사이즈를 조절, 그리고 뷰포트 기준으로 아이템들이 줄어들다가 800px 이하에서 header, main, ad-area가 사라지게 함.  (0) 2023.07.24
2. 로고 이미지를 삽입함  (0) 2023.07.24
1. 덩어리별로 구역을 나눔  (0) 2023.07.24
이 코드만으로 14개의 섹션(구역)이 생성된 거지?  (0) 2023.07.23
오류를 바로잡은 코드인데, 내가 바라는 모양이 아니다.  (0) 2023.07.23

관련글

티스토리툴바