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

헤더 부분 - 우상단 명령 버튼들 추가

by Mr.코딩 2023. 7. 23.

우측 상단의 명령 버튼 5개 삽입하기 (헤더 섹션3 안에)

 

<body>
    <header class="header">
        <section id="header1">
            <!-- 이미지를 섹션 안에 직접 삽입 -->
            <img src="malhannamu.png" alt="말하는나무_로고" />
        </section>
        <section id="header2">맞춤제작 견적의뢰서</section>
        <section id="header3">
            <!-- 버튼 5개 삽입 -->
            <button class="button">버튼1</button>
            <button class="button">버튼2</button>
            <button class="button">버튼3</button>
            <button class="button">버튼4</button>
            <button class="button">버튼5</button>
        </section>
    </header>
</body>

여기에 스타일에 display:flex; 를 추가하여, 브라우저 창 사이즈가 줄거나 커지는데 반응하도록 만든다

      #header3 {
        display: flex;

 

버튼 사이즈 수정하기 

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

        .button img {
            /* 이미지 크기 설정 */
            width: 100%;
            height: 100%;
        }

버튼 사이즈 조절 : 미디어쿼리를 이용해서 버튼을 약간 유동적으로 바꿈

 

.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%;
}

@media (max-width: 600px) {
  .button {
    width: 40px;
    height: 30px;
  }
}

@media (max-width: 400px) {
  .button {
    width: 30px;
    height: 20px;
  }
}

header1 안의 이미지 사이즈를 특정 픽셀 이하로 줄어들지 않게 미디어 쿼리를 삽입

 

.header {
  border: 1px solid gray;
  width: 75vw;
  height: 10vh;
  min-height: 30px;

  display: flex;
  padding: 10px;
  align-items: center; /* 세로 방향 정중앙 정렬 */
}

#header1 {
  flex-basis: 7%;
  display: flex; /* #header1을 flex 컨테이너로 설정 */
  justify-content: center; /* 세로 방향 정중앙 정렬 */
  align-items: center; /* 가로 방향 정중앙 정렬 */
  padding-left: 5px; /* 좌측에 5px의 간격 추가 */
  padding-right: 15px; /* 우측에 15px의 간격 추가 */
}

#header1 img {
  /* 이미지가 섹션 크기에 딱 맞게 들어맞도록 조정 */
  max-width: 170%;
  max-height: 170%;

  object-fit: contain; /* 이미지 비율 유지하며 섹션 크기에 맞추기 */
}

/* 뷰포트가 600px 이하일 때 이미지 크기 고정 */
@media (max-width: 600px) {
  #header1 img {
    max-width: 50px;
    max-height: 40px;
  }
}

/* 나머지 스타일은 동일하게 유지 */
#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;
  padding-left: 10px; /* 좌측에 간격 추가 */
}

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

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

  padding-right: 10px; /* 우측에 5px의 간격 추가 */
}

.button img {
  /* 이미지 크기 설정 */
  width: 100%;
  height: 100%;
}

@media (max-width: 600px) {
  .button {
    width: 40px; /* 뷰포트 너비의 40%로 버튼 너비 조정 */
    height: 30px; /* 뷰포트 높이의 30%로 버튼 높이 조정 */
  }
}

@media (max-width: 400px) {
  .button {
    width: 30px; /* 뷰포트 너비의 30%로 버튼 너비 조정 */
    height: 20px; /* 뷰포트 높이의 20%로 버튼 높이 조정 */
  }
}

header2 섹션을 우측으로 살짝 옮기려면? 

 

chatGTP

header2 섹션을 우측으로 살짝 옮기려면, padding-left 속성을 더 큰 값으로 수정하면 됩니다. 현재 코드에서는 padding-left: 10px;으로 설정되어 있으니, 이 값을 늘려서 원하는 만큼 우측으로 옮길 수 있습니다.

 

꿈쩍도 안 해

 

죄송합니다, 제가 실수를 하였습니다. #header2 섹션을 우측으로 옮기기 위해서는 margin-left 속성을 사용해야 합니다. padding-left 속성은 해당 요소의 내용과의 간격을 조절할 때 사용되며, 영역을 옮기는 데에는 margin-left를 사용해야 합니다.

그러면 그 margin 값은 아예 고정되어 버리잖아.

 

#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;
  margin-left: 2vw; /* 뷰포트 너비의 2%만큼 우측으로 이동 */
}

헤드 부분 뼈대 완성

<!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" />
  </head>
  <body>
    <header class="header">
      <section id="header1">
        <!-- 이미지를 섹션 안에 직접 삽입 -->
        <img src="malhannamu.png" alt="말하는나무_로고" />
      </section>
      <section id="header2">
        맞춤제작 견적 의뢰서 Custom-made Quotation Request
      </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>
.header {
  border: 1px solid gray;
  width: 75vw;
  height: 7vh;
  min-height: 30px;

  display: flex;
  padding: 10px;
  align-items: center; /* 세로 방향 정중앙 정렬 */
}

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

  margin-left: 1vw;
}

#header1 img {
  /* 이미지가 섹션 크기에 딱 맞게 들어맞도록 조정 */
  max-width: 170%;
  max-height: 170%;

  object-fit: contain; /* 이미지 비율 유지하며 섹션 크기에 맞추기 */
}

/* 뷰포트가 600px 이하일 때 이미지 크기 고정 */
@media (max-width: 600px) {
  #header1 img {
    max-width: 50px;
    max-height: 40px;
  }
}

/* 나머지 스타일은 동일하게 유지 */
#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;
  margin-left: 2vw; /* 뷰포트 너비의 2%만큼 우측으로 이동 */
}

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

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

  padding-right: 10px; /* 우측에 10px의 간격 추가 */
}

.button img {
  /* 이미지 크기 설정 */
  width: 100%;
  height: 100%;
}

@media (max-width: 600px) {
  .button {
    width: 40px; /* 뷰포트 너비의 40%로 버튼 너비 조정 */
    height: 30px; /* 뷰포트 높이의 30%로 버튼 높이 조정 */
  }
}

@media (max-width: 400px) {
  .button {
    width: 30px; /* 뷰포트 너비의 30%로 버튼 너비 조정 */
    height: 20px; /* 뷰포트 높이의 20%로 버튼 높이 조정 */
  }
}

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

2. 로고 이미지를 삽입함  (0) 2023.07.24
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

관련글

티스토리툴바