4-2. 견적 의뢰서 제작 갈무리

<!DOCTYPE html>
<html lang="ko">
  <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" />
    <script src="script.js" defer></script>
  </head>

  <body>
    <!-- 헤더 섹션 -->
    <header class="header">
      <div class="logo-area">
        <img src="malhannamu.png" alt="말하는나무 로고" />
      </div>
  

            <!-- 스타일 선택 섹션 -->
            <section class="style-choice-container">
              <div class="style">
                <label for="style"></label>
                <input
                  type="text"
                  id="style"
                  name="style"
                  placeholder="스타일을 골라 보세요...."
                />
              </div>
            </section>
      <div class="type">
        <label for="type-select"></label>
        <select class="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="quotation-request">맞춤제작 견적의뢰서</div>
      <button class="button-group">
        <img src="인쇄.png" alt="인쇄 아이콘" />
        <img src="새의뢰서.png" alt="새의뢰서 아이콘" />
        <img src="작가와채팅.png" alt="작가와 채팅 아이콘" />
        <img src="방문예약.png" alt="방문예약 아이콘" />
        <img src="보내기.png" alt="보내기 아이콘" />
      </button>
    </header>

    <!-- 메인 섹션 -->
    <main class="main">
      <!-- 사용자 정보 입력 섹션 -->
      <section class="client-info">
        <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>
 

     

<!-- Level 옵션 섹션 (div로 묶기) -->
<div class="level">
  <legend>Level 옵션</legend>
  <label>
    <input type="checkbox" name="level-option" value="option1" />
    보통/DIY
  </label>
  <label>
    <input type="checkbox" name="level-option" value="option2" />
    고급/짜맞춤
  </label>
  <label>
    <input type="checkbox" name="level-option" value="option3" />
    조립/분해형
  </label>
  <label>
    <input type="checkbox" name="level-option" value="option4" />
    선택 안 함
  </label>
</div>

<!-- Finish 옵션 섹션 (div로 묶기) -->
<div class="finish">
  <legend>Finish 옵션</legend>
  <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>


    
  <!-- budget 아이템 -->
  <div class="below">
    <label for="below">원하는 금액대</label> <!-- '원하는 금액대'를 드롭다운 창 위쪽에 배치 -->
    <select class="below" name="below">
      <!-- 아래쪽 내용은 동일하게 유지 -->
      <option value="20">20만원 이하</option>
      <option value="30">30만원 이하</option>
      <option value="40">40만원 이하</option>
      <option value="50">50만원 이하</option>
      <option value="70">70만원 이하</option>
      <option value="90">90만원 이하</option>
      <option value="120">120만원 이하</option>
      <option value="150">150만원 이하</option>
      <option value="180">180만원 이하</option>
      <option value="230">230만원 이하</option>
      <option value="280">280만원 이하</option>
      <option value="330">330만원 이하</option>
      <option value="400">400만원 이하</option>
      <option value="500">500만원 이하</option>
      <option value="600">600만원 이하</option>
      <option value="700">700만원 이하</option>
      <option value="800">900만원 이하</option>
      <option value="1000">1000만원 이하</option>
      <option value="other">기타 금액</option>
    </select>
  </div>

  
  <!-- 마감 날짜 선택 -->
  <section class="deadline">
    <label for="deadline">마감 날짜 선택:</label> <!-- '마감 날짜 선택'을 캘린더 박스 위쪽에 배치 -->
    <input type="date" id="deadline" name="selectedDeadline">
  </section>


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

    <footer class="footer">바닥글
      <section>copywrite</section>
    </footer>

    <aside class="ad-area">
      <div class="ad1"> ad1</div>
      <div class="ad2"> ad2</div>
      <div class="ad3"> ad3</div>
      <div class="ad4"> ad4</div>
  </body>
</html>

/* 모든 구역의 가로 사이즈를 뷰포트 대비 75%로 설정합니다. */
/* .header, main, article, footer 모두 75vw 너비를 가지도록 스타일을 적용합니다. */
.header,
main,
article,
footer {
  width: 75vw;
}

.header {
  display: flex; /* 아이템들을 가로로 배열합니다. */
  justify-content: space-between; /* 아이템들 사이의 간격을 최대로 설정하여 가로로 정렬합니다. */
  align-items: center; /* 아이템들을 수직 방향으로 가운데로 정렬합니다. */
  border: 1px solid rgb(203, 198, 198); /* 테두리 스타일을 추가합니다. (선택사항) */
  padding: 10px; /* 헤더 내부 여백을 추가합니다. (선택사항) */
  /* header 안의 모든 자식 요소들의 텍스트 스타일 설정 */
  color: #504f18; /* 텍스트 색상 */
  font-family: Arial, sans-serif; /* 글꼴 설정 */
  font-size: 1.8vw; /* 글꼴 크기 */
  font-weight: bold; /* 글꼴 두께 */
  text-align: center; /* 텍스트 정렬 */
  /* 필요한 다른 텍스트 스타일 속성들 추가 */
  height: 10vw;
  max-height: 50px;
}

/* 로고 이미지의 스타일 설정 */
.logo-area img {
  max-width: 120px; /* 로고 이미지의 최대 너비를 120px로 제한합니다. */
  height: auto; /* 이미지의 높이를 자동으로 조정하여 가로 세로 비율을 유지합니다. */
  vertical-align: middle; /* 로고 이미지를 수직 가운데 정렬합니다. */
}

/* style과 type 요소에 동일한 스타일을 적용 */
#style,
.type {
  font-size: 2vw; /* 폰트 크기 설정 */
  font-family: Arial, sans-serif; /* 글꼴 설정 (Arial 또는 sans-serif) */
  /* 추가적인 스타일 속성들을 여기에 추가할 수 있습니다. */
}
  #style {
    width: 80%;
    text-align: center; /* 텍스트 정렬 */
    background-color: #ccc;
    border: none;
    padding: 5px;
  }
}


.label-for-type-select {
  font-size: 1vw; /* 글자 크기를 20px로 설정 */
 
  color: rgb(21, 114, 68); /* 글자 색상을 파란색으로 설정 */
}

/* select 박스 스타일 설정 */
.type-select {
  font-size: 2vw; /* 선택된 텍스트 크기 설정 */
  padding: 5px; /* 선택 박스 내부 여백 설정 */
  width: 100%; /* 선택 박스 너비를 100%로 설정하여 부모의 가로 너비에 맞춤 */
  margin-top: 5px; /* 위쪽 여백 추가 */
  text-align: center; /* 텍스트 가운데 정렬 */
}

.quotation-request {
  font-size: 1.6vw; /* 폰트 크기 설정 */
  font-family: Arial, sans-serif; /* 글꼴 설정 (Arial 또는 sans-serif) */
  width: 25%;
}
/* .button-group 클래스에 스타일을 정의하여 버튼들을 그룹으로 묶습니다. */
.button-group {
  display: flex;
  justify-content: space-between;
  height: 100%; /* 버튼의 높이를 뷰포트 너비의 8%로 설정 (원하는 비율에 맞게 조정) */
  max-height: 120px; /* 버튼의 최대 높이를 100px로 제한 (원하는 최대 높이로 변경) */
  border: none; /* 버튼 테두리 제거 */
  align-items: center; /* 세로 중앙 정렬 */
}

/* .button-group 내부의 이미지들의 스타일 설정 */
.button-group img {
  display: block; /* 이미지를 블록 요소로 설정하여 가로 중앙 정렬 */
  height: 18vw; /* 버튼 이미지의 높이를 뷰포트 너비의 6%로 설정 (원하는 비율에 맞게 조정) */
  max-height: 80%; /* 버튼 이미지의 최대 높이를 30px로 제한 (원하는 최대 높이로 변경) */
  margin-right: 10px; /* 이미지들 사이에 10px의 오른쪽 여백을 줌 (원하는 간격으로 변경) */
  margin-left: 10px; /* 이미지들 사이에 10px의 오른쪽 여백을 줌 (원하는 간격으로 변경) */
}

.main {
  display: flex; /* 아이템들을 가로로 배열합니다. */
  justify-content: space-between; /* 아이템들 사이의 간격을 최대로 설정하여 가로로 정렬합니다. */
  flex-wrap: wrap; /* 내부 요소들이 한 줄에 다 들어가지 않으면 다음 줄로 넘어가게 함 */
  gap: 20px; /* 아이템들 사이의 간격을 20px로 설정 */
  height: calc(
    110% * 10%
  ); /* main 섹션의 높이를 client-info보다 10% 크게 설정 */

  align-items: stretch; /* main 섹션의 높이를 자식 요소에 맞춤 */
  border: 1px solid rgb(203, 198, 198); /* 테두리 스타일을 추가합니다. (선택사항) */
  padding: 0.15%; /* 헤더 내부 여백을 추가합니다. (선택사항) */

  /* 높이의 최대치를 설정 */

  font-size: 0.9vw;
}

/* 예시: 입력 창의 폰트 크기를 부모 요소에 상대적인 크기로 설정 */
.client-info {
  /* client-info 섹션의 너비를 main 섹션의 너비에 대한 60%로 설정 */
  width: 33%;
  height: 30%;
  /* 상단 간격을 15px로 설정 */
  margin: 10px 20px 5px 3px;

  padding: 5px;
  /* client-info 섹션과 주변 요소들과의 간격을 10px로 설정 */

  font-size: 1em;
  /* input 요소의 세로 간격을 10px로 설정 */
  margin-bottom: 15px;
}
/* input 요소의 너비를 조정하여 폰트 크기도 비례적으로 조정됩니다. */

.client-info input {
  /* input 요소의 너비를 100%로 설정하여 부모 요소에 맞게 조정합니다. */
  width: 100%;
  /* input 요소의 세로 간격을 10px로 설정 */
  margin-bottom: 3px;
  /* input 요소의 배경 색상을 연한 회색(#f2f2f2)으로 설정 */
  background-color: #f0ecec;
  /* input 요소의 테두리를 없애기 위해 border 속성을 none으로 설정 */
  border: none;
  /* 아래와 위 폭(높이)을 10px로 설정 */
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 5px;
}

/* Level 옵션 섹션 스타일 */
.level {
  display: flex;
  flex-direction: column; /* 아이템들을 세로로 배열합니다. */
  border: 1px solid #ccc; /* 테두리 스타일을 추가합니다. */
  padding: 10px; /* 내부 여백을 설정합니다. */
  width: 12%; /* 가로 너비를 50%로 설정합니다. */
 
}

/* Level 옵션 섹션의 제목(label) 스타일 */
.level legend {
  margin-bottom: 5px; /* 제목 아래의 간격을 조정합니다. */
}

/* Level 옵션 섹션의 각 항목(label) 스타일 */
.level label {
  margin-bottom: 5px; /* 항목 아래의 간격을 조정합니다. */
}

/* Finish 옵션 섹션 스타일 */
.finish {
  display: flex;
  flex-direction: column; /* 아이템들을 세로로 배열합니다. */
  border: 1px solid #ccc; /* 테두리 스타일을 추가합니다. */
  padding: 10px; /* 내부 여백을 설정합니다. */
  width:12%; /* 가로 너비를 50%로 설정합니다. */

}

/* Finish 옵션 섹션의 제목(label) 스타일 */
.finish legend {
  margin-bottom: 5px; /* 제목 아래의 간격을 조정합니다. */
}

/* Finish 옵션 섹션의 각 항목(label) 스타일 */
.finish label {
  margin-bottom: 5px; /* 항목 아래의 간격을 조정합니다. */
}


/* level과 finish 클래스를 가진 요소들의 좌우 여백을 조정하는 스타일 */
.level,
.finish {
  margin-right: 2px; /* 오른쪽 여백을 10px로 설정 */
}

/* 마지막 아이템의 오른쪽 여백은 없애기 위한 스타일 */
.level:last-child,
.finish:last-child {
  margin-right: 0;
}

/* .below 영역의 스타일 설정 */
.below {
  flex: 1; /* 남은 공간을 모두 차지하도록 함 */
}

/* .deadline 영역의 스타일 설정 */
.deadline {
  flex: 1; /* 남은 공간을 모두 차지하도록 함 */
}


 


/* .below 영역 내부 레이블(label)의 스타일 설정 */
.below label {
  margin-bottom: 5px; /* 레이블 아래에 5px의 간격 추가 */
}

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

 /* .deadline 영역의 스타일 설정 */
 .deadline {
  display: flex; /* Flexbox 레이아웃을 사용하여 내부 아이템을 세로로 정렬 */
  flex-direction: column; /* 아이템을 세로로 배치 */
}

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

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

/* 뷰포트의 가로 너비가 800픽셀 이하일 때 main, ad-area, header, footer를 숨깁니다. */
@media (max-width: 800px) {
  .ad-area,
  .header,
  .main,
  .footer {
    display: none;
  }

  /* article 섹션을 최대 사이즈로 크게 만듭니다. */
  article {
    width: 100vw;
    height: 100vh;
  }
}

/* fieldset 요소의 테두리 스타일 설정 */
fieldset {
  border: 1px solid #ccc; /* 테두리를 얇게 설정합니다. */
  padding: 7px; /* 필요에 따라 내부 여백을 추가할 수 있습니다. */
}

// 자바스크립트로 level 섹션과 finish 섹션의 간격을 조절하는 함수
function adjustSectionSpacing() {
  const levelSection = document.querySelector('.level');
  const finishSection = document.querySelector('.finish');

  if (levelSection && finishSection) {
    const levelLabels = levelSection.querySelectorAll('label');
    const finishLabels = finishSection.querySelectorAll('label');

    // 간격을 조절할 크기 (원하는 값으로 변경)
    const spacing = '6px';

    levelLabels.forEach((label) => {
      label.style.marginBottom = spacing;
    });

    finishLabels.forEach((label) => {
      label.style.marginBottom = spacing;
    });
  }
}

// 페이지 로드 시 간격 조절 함수 호출
window.addEventListener('load', adjustSectionSpacing);
// level 옵션과 finish 옵션의 테두리를 제거하는 함수
function removeBorders() {
  const levelSection = document.querySelector('.level');
  const finishSection = document.querySelector('.finish');
  levelSection.style.border = 'none';
  finishSection.style.border = 'none';
}

// 페이지 로딩 후 removeBorders 함수 실행
window.onload = removeBorders;

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

retry 1 - content와 aside(=ad)를 나누고 flexbox를 적용 (0)	2023.07.29
전체 구획 및 logo 부분, 중앙 정렬 및 간격 주기│의뢰서 단계별 갈무리 1-2 (0)	2023.07.28
의뢰서 단계별 갈무리 1 (0)	2023.07.28
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

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

Mr. Coding

4-2. 견적 의뢰서 제작 갈무리

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

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역

4-2. 견적 의뢰서 제작 갈무리

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

관련글

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역