아직 엉망진창임.
<!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;
