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

헤더 부분 - 기본

by Mr.코딩 2023. 7. 23.

"header"라는 이름의 class 섹션을 생성하고 그 안에 3개의 섹션을 넣음. 

      <body>
        <header class="header">
          <section id="header1"></section>        
          <section id="header2">맞춤제작 견적의뢰서</section>
          <section id="header3"></section>
      </header>
      </body>

 

style에서 플렉스박스를 적용. 

    <style>
      .header {
        border: 1px solid gray;
        width:75vW;
        height:10vh;
        min-height:30px;
        display: flex;
        padding: 0.2%;
        align-items: center; /* 세로 방향 정중앙 정렬 */
              }

 

Q. [CSS] 플렉스박스는 몇 년도 부터 사용되기 시작했나? 어떤 목적으로 마련되었나?

더보기

chatGTP

플렉스박스(flexbox)는 2009년에 W3C(월드 와이드 웹 컨소시엄)에서 처음으로 소개되었습니다. 그리드 레이아웃 시스템을 개선하고 복잡한 레이아웃 작업을 쉽게 처리할 수 있도록 하기 위해 만들어진 CSS 레이아웃 모델입니다.

 

기존의 CSS 레이아웃 방식은 블록 레벨과 인라인 레벨의 요소를 이용해 레이아웃을 구성하는 방식이었습니다. 하지만 복잡한 레이아웃을 구현하려면 다양한 트릭과 보조 요소들을 사용해야 했습니다. 이로 인해 레이아웃 구성이 복잡해지고 유지 보수가 어려워지는 문제점이 있었습니다.

 

플렉스박스는 이러한 문제점을 해결하고자 개발되었습니다. 플렉스박스는 요소들을 부모 요소의 컨테이너 안에서 유연하게 배치하고 정렬할 수 있는 기능을 제공합니다. 이를 통해 간단하고 유연한 레이아웃 구성이 가능해지며, 뷰포트 크기나 디바이스의 변화에도 레이아웃이 적절하게 조정되어 반응형 웹 디자인에 매우 유용합니다.

 

플렉스박스는 브라우저 지원 범위가 넓어지면서 현재는 대부분의 최신 브라우저에서 지원되고 있습니다. 이로 인해 플렉스박스는 웹 디자인에서 주요한 레이아웃 방식 중 하나로 자리 잡게 되었습니다.

 

아래 코드에서 'header1' 섹션 안에 섹션 크기에 딱 맞게 이미지를 삽입하려면?

 

<body>
  <header class="header">
    <section id="header1">
      <!-- 이미지를 섹션 안에 직접 삽입 -->
      <img src="이미지 파일 경로" alt="이미지 설명">
    </section>
    <section id="header2">맞춤제작 견적의뢰서</section>
    <section id="header3"></section>
  </header>
</body>

 

 #header1 img {
   width: 100%;
   height: 100%;
   object-fit: cover; /* 이미지 비율 유지 및 섹션 크기에 맞추기 */
    }

 

헤더 기본 완성

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

    <style>
      .header {
        border: 1px solid gray;
        width: 75vw;
        height: 10vh;
        min-height: 30px;
        display: flex;
        padding: 0.2%;
        align-items: center; /* 세로 방향 정중앙 정렬 */
      }

      #header1 {
        flex-basis: 7%;
        display: flex; /* #header1을 flex 컨테이너로 설정 */
        justify-content: center; /* 세로 방향 정중앙 정렬 */
        align-items: center; /* 가로 방향 정중앙 정렬 */
      }

      #header1 img {
        /* 이미지가 섹션 크기에 딱 맞게 들어맞도록 조정 */
        max-width: 100%;
        max-height: 100%;
        object-fit: contain; /* 이미지 비율 유지하며 섹션 크기에 맞추기 */
      }

      #header2 {
        border: 1px solid rgb(228, 225, 225);
        flex-basis: 57%;
        padding: 0.2%;
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.7vw;
      }
    </style>
  </head>
  <body>
    <header class="header">
      <section id="header1">
        <!-- 이미지를 섹션 안에 직접 삽입 -->
        <img src="malhannamu.png" alt="말하는나무_로고" />
      </section>
      <section id="header2">맞춤제작 견적의뢰서</section>
      <section id="header3"></section>
    </header>
  </body>
</html>


기존 코드에서의 문제점:

- 이미지를 감싸는 `#header1` 섹션에는 크기를 지정하지 않아서 이미지 크기를 결정할 기준이 없었습니다.
- `#header1` 섹션에 `display: flex;`를 적용하지 않아서 세로 방향으로 정중앙 정렬을 할 수 없었습니다.

 

수정한 부분:

1. `#header1` 컨테이너에 `display: flex;`를 적용하여 내부의 이미지를 세로 방향으로 정중앙에 배치할 수 있도록 했습니다.
2. 이미지에 `max-width: 100%;`와 `max-height: 100%;`를 적용하여 이미지가 컨테이너의 크기를 넘어가지 않도록 제한했습니다.
3. 이미지에 `object-fit: contain;`를 적용하여 이미지의 비율을 유지하며 컨테이너에 맞추도록 했습니다. `contain`은 이미지가 섹션 안에 꽉 찰 수 있도록 크기를 조절합니다. (`cover`는 이미지가 섹션을 완전히 덮도록 크기를 조절하는 것이기 때문에 이미지 일부가 잘릴 수 있습니다.)

이러한 수정으로 이미지는 섹션 크기에 맞게 딱 맞게 들어맞도록 반응형으로 조정되어집니다.

 

최종 코드에서  

 justify-content: center; /* 세로 방향 정중앙 정렬 */
 align-items: center; /* 가로 방향 정중앙 정렬 */

왜 이 부분을 첨가했어?

 

저 부분은 `justify-content: center;`와 `align-items: center;`를 사용하여 세로와 가로 방향 모두에서 요소를 정중앙에 정렬하기 위해서 추가되었습니다.

`.header` 클래스에 `display: flex;`를 사용하면 해당 요소와 그 안에 포함된 자식 요소들이 flexbox 컨테이너가 되어 flexbox 레이아웃이 적용됩니다. `justify-content: center;`는 세로 방향을 기준으로 하여 flexbox 컨테이너 내의 자식 요소들을 수평으로 정렬하는 속성입니다. `align-items: center;`는 가로 방향을 기준으로 하여 flexbox 컨테이너 내의 자식 요소들을 수직으로 정렬하는 속성입니다.

따라서 이 두 속성을 함께 사용하면 `.header` 클래스에 속한 자식 요소들이 세로와 가로 방향 모두에서 정중앙에 정렬되게 됩니다. 이를 통해 이미지가 섹션의 크기에 맞게 세로와 가로 모두 중앙에 위치하도록 만들어지는 것입니다.

 

정중앙 정렬을 빼 버리면 어떤 문제가 생기는데?

새 버전

좀 마음에 듦

 

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

    <style>
      .header {
        border: 1px solid gray;
        width: 75vw;
        height: 10vh;
        min-height: 30px;
        display: flex;
        padding: 0.2%;
        align-items: center; /* 세로 방향 정중앙 정렬 */
      }

      #header1 {
        flex-basis: 7%;
        display: flex; /* #header1을 flex 컨테이너로 설정 */
        justify-content: center; /* 세로 방향 정중앙 정렬 */
        align-items: center; /* 가로 방향 정중앙 정렬 */
      }
      #header1-blank {
        flex-basis: 3%; /* header1 왼쪽의 간격 설정 */
      }
      #header1 img {
        /* 이미지가 섹션 크기에 딱 맞게 들어맞도록 조정 */
        max-width: 170%;
        max-height: 170%;
        object-fit: contain; /* 이미지 비율 유지하며 섹션 크기에 맞추기 */
      }
      /* 추가한 빈 공간을 위한 스타일 */
      #header2-blank {
        flex-basis: 5%; /* header2와 header1 사이의 간격 설정 */
      }
      #header2 {
        border: 1px solid rgb(228, 225, 225);
        flex-basis: 100%;
        padding: 0.2%;
        text-align: center;
        font-family: Arial, Helvetica, sans-serif;
        font-size: 1.7vw;
      }

      #header3 {
        display: flex;
        flex-basis: 15%; /* 남은 영역을 5개의 버튼으로 균등 분할 */
        justify-content: center; /* 버튼들을 가로로 중앙에 정렬 */
        align-items: center; /* 세로 방향 정중앙 정렬 */
      }

      .button {
        /* 버튼 사이즈 조정 */
        width: 50px;
        height: 40px;
        border: none;
        background-color: transparent;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      .button img {
        /* 이미지 크기 설정 */
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <header class="header">
      <section id="header1-blank"></section>
      <!-- 추가한 빈 공간 -->
      <section id="header1">
        <!-- 이미지를 섹션 안에 직접 삽입 -->
        <img src="malhannamu.png" alt="말하는나무_로고" />
      </section>
      <section id="header2-blank"></section>
      <!-- 추가한 빈 공간 -->
      <section id="header2">맞춤제작 견적의뢰서</section>
      <section id="header3"></section>
      <section id="header3">
        <!-- 버튼 5개 삽입 -->
        <button class="button"><img src="미리보기.png"</button>
        <button class="button"><img src="보내기.png"</button>
        <button class="button"><img src="새의뢰서.png"</button>
        <button class="button"><img src="작가와채팅.png"</button>
        <button class="button"><image src="방문예약.png"</button>
      </section>
    </header>
  </body>
</html>

 

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

1. 덩어리별로 구역을 나눔  (0) 2023.07.24
이 코드만으로 14개의 섹션(구역)이 생성된 거지?  (0) 2023.07.23
오류를 바로잡은 코드인데, 내가 바라는 모양이 아니다.  (0) 2023.07.23
헤더 부분 - 우상단 명령 버튼들 추가  (0) 2023.07.23
빌드 테스트 1  (0) 2023.07.22
logo 부분 (2)  (0) 2023.07.22
logo 부분  (0) 2023.07.22
이미지(로고) 삽입  (0) 2023.07.20

관련글

티스토리툴바