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

오류를 바로잡은 코드인데, 내가 바라는 모양이 아니다.

by Mr.코딩 2023. 7. 23.

몇 군데 오류를 바로잡은 코드인데, 내가 바라는 모양이 아니다.

<!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">맞춤제작 견적 의뢰서</section>
    <section id="header3"></section>
    <!-- 버튼 5개 삽입 -->
    <section id="header4">
      <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"><img src="방문예약.png"></button>
    </section>
  </header>
  <main class="main">
    <!-- 사용자 정보 입력 섹션 -->
    <section class="client">
      <!-- 이름 입력란 -->
      <div class="input-wrapper">
        <label for="name">이름</label>
        <input
          type="text"
          id="name"
          name="name"
          placeholder="성함을 입력하세요.."
          required
        >
      </div>

      <!-- 이메일 입력란 -->
      <div class="input-wrapper">
        <label for="email">이메일</label>
        <input
          type="email"
          id="email"
          name="email"
          required
          placeholder="이메일을 입력하세요.."
        >
      </div>

      <!-- 전화번호 입력란 -->
      <div class="input-wrapper">
        <label for="phone">전화번호</label>
        <input
          type="tel"
          id="phone"
          name="phone"
          required
          placeholder="전화번호를 입력하세요.."
        >
      </div>

      <!-- 주소 입력란 -->
      <div class="input-wrapper">
        <label for="address">주소</label>
        <input
          type="text"
          id="address"
          name="address"
          required
          placeholder="배송받을 주소를 입력하세요"
        >
      </div>
    </section>

    <!-- type_select 아이템의 오른쪽에 style 아이템을 놓습니다. -->
    <section class="object">
      <form>
        <div class="type-style-container">
          <div class="type_select">
            <label for="type-select">종류 선택</label>
            <select id="type-select" name="type-select">
              <option value="table">좌탁,식탁,테이블</option>
              <option value="desk">책상</option>
              <option value="Shelf_Bookcase">책장,책꽂이</option>
              <option value="Chest_Drawers">수납장,서랍장</option>
              <option value="chair_bench">의자,벤치</option>
              <option value="bed">침대</option>
              <option value="for_camping">캠핑용</option>
              <option value="etc">기타</option>
            </select>
          </div>
          <div class="style">
            <label for="style">스타일 선택</label>
            <input
              type="text"
              id="style"
              name="style"
              placeholder="스타일을 골라 보세요...."
            >
          </div>
        </div>
      </form>
    </section>

    <!-- level 아이템 그룹화 -->
    <fieldset>
      <legend>Level 옵션</legend>
      <div class="level">
        <label>
          <input type="checkbox" name="level-option" value="option1"> 고급/짜맞춤
        </label>
        <label>
          <input type="checkbox" name="level-option" value="option2"> 조립/분해 가능
        </label>
        <label>
          <input type="checkbox" name="level-option" value="option3"> 보통/DIY
        </label>
        <label>
          <input type="checkbox" name="level-option" value="option4"> 선택 안 함
        </label>
      </div>
    </fieldset>

    <!-- finish 아이템 그룹화 -->
    <fieldset>
      <legend>Finish 옵션</legend>
      <div class="finish">
        <label>
          <input type="checkbox" name="finish-option" value="option1"> 수성 마감
        </label>
        <label>
          <input type="checkbox" name="finish-option" value="option2"> 오일 마감 가능
        </label>
        <label>
          <input type="checkbox" name="finish-option" value="option3"> 페인팅
        </label>
        <label>
          <input type="checkbox" name="finish-option" value="option4"> 마감 안 함
        </label>
      </div>
    </fieldset>

    <section class="budget"></section>
    <section class="D_day"></section>
  </main>

  <!-- 클릭해서 접히는 버튼 추가 -->
  <!-- 이 부분은 주석 처리하여 미리 보여주지 않습니다. -->
  <!-- <button id="toggleMainButton">메인 섹션 접기/펼치기</button> -->

  <!-- JavaScript 파일 로드 -->
  <script src="script.js"></script>
</body>
</html>
.header {
  border: 1px solid gray;
  width: 75vw;
  height: 7vh;
  min-height: 30px;
  display: flex;
  padding: 10px;
  align-items: center; /* 세로 방향 정중앙 정렬 */
  box-sizing: border-box;
  max-height: 60px; /* 최대 높이를 60px로 제한 */
}

#header1 {
  flex-basis: 7%;
  display: flex; /* #header1을 flex 컨테이너로 설정 */
  justify-content: center; /* 세로 방향 정중앙 정렬 */
  align-items: center; /* 가로 방향 정중앙 정렬 */
  margin-left: 1vw;
  max-height: 140px; /* 최대 높이를 140px로 제한 */
}

#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%로 버튼 높이 조정 */
  }
}

/* main 클래스 선택자 */
.main {
  border: 1px solid gray;
  width: 75vw;
  padding: 10px;
  box-sizing: border-box;
  margin-top: 10px; /* header와 main 사이의 간격 설정 */
  display: flex; /* Flexbox를 사용하여 요소들을 한 줄로 배치 */
}

/* client 클래스 선택자 (사용자 정보 입력 섹션) */
.client {
  display: flex;
  flex-direction: column; /* 아이템들을 세로로 배치 */
  width: 17vw;
  margin-right: 30px; /* object 섹션과의 간격을 설정 (조절 가능) */
  
}

/* input-wrapper 클래스 선택자 (입력란을 감싸는 컨테이너) */
.input-wrapper {
  margin-bottom: 10px; /* 아이템들 사이의 간격 설정 */
}

/* input-wrapper 클래스 하위의 input 요소 선택자 (입력 요소 스타일 설정) */
.input-wrapper input {
  width: 100%;
  padding: 8px;
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* object 섹션 */
.object {
  flex-basis: 30vw; /* Flexbox 아이템의 너비를 30%로 설정 (조절 가능) */
}
/* object 섹션 내부의 아이템들의 세로 간격 설정 */
.object > * {
  margin-bottom: 14px;
}
.object {
  /* 기본 텍스트 서식 */
  font-size: 14px;
  font-style: normal;
  text-align: left;
}

/* 체크박스를 절대 위치로 설정하여 텍스트와 간격을 띄움 
label {
  display: block;
  position: relative;
  padding-left: 24px; /* 체크박스 크기만큼 여백 추가 */
}

label input[type='checkbox'] {
  position: absolute;
  left: 0;
  top: 2px; /* 텍스트와 수직으로 정렬 (조절 가능) */
}
*/

/* Type 아이템과 Style 아이템을 감싸는 컨테이너 */
.type-style-container {
  display: flex;
  align-items: center;
}

/* Type 아이템 스타일 */
.type_select {
  flex: 1; /* Type 아이템이 남은 공간을 모두 차지하도록 함 */
}

/* Style 아이템 스타일 */
.style {
  margin-left: 20px; /* Type 아이템과의 간격을 설정 (조절 가능) */
}

 

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

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
헤더 부분 - 기본  (0) 2023.07.23
빌드 테스트 1  (0) 2023.07.22
logo 부분 (2)  (0) 2023.07.22

관련글

티스토리툴바