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

3. 드롭다운을 삽입하고, 버튼 부분의 사이즈를 조절, 그리고 뷰포트 기준으로 아이템들이 줄어들다가 800px 이하에서 header, main, ad-area가 사라지게 함.

by Mr.코딩 2023. 7. 24.

HTML

 

<!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" type="text/css" />
  </head>

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

      <div class="custom">맞춤</div>

      <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"/>
        <img src="새의뢰서.png"/>
        <img src="작가와채팅.png"/>
        <img src="방문예약.png"/>
        <img src="보내기.png"/>
      </button>
        
      </div>
    </header>

    <main class="main">
      <div class="clent-info-container">의뢰자 정보</div>
      <div class="style-choice-container">원하는 스타일</div>
      <div class="level-method">
        <div class="level">제작수준</div>
        <div class="method">마감방법</div>
      </div>
      <div class="budget-dday">
        <div class="budget">원하는 금액대</div>
        <div class="dday">원하는 마감일</div>
      </div>
    </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>

 

CSS

/* 모든 구역의 가로 사이즈를 뷰포트 대비 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: 3vw; /* 글꼴 크기 */
  font-weight: bold; /* 글꼴 두께 */
  text-align: center; /* 텍스트 정렬 */
  /* 필요한 다른 텍스트 스타일 속성들 추가 */
  height: 10vw;
  max-height: 50px;
}

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

/* .type 클래스를 flex 컨테이너로 설정하여 자식 요소들을 가로로 배열합니다. */
.type {
  display: flex;
  flex-direction: column; /* 자식 요소들을 세로로 배치합니다. */
  align-items: center; /* 자식 요소들을 수직 방향으로 가운데로 정렬합니다. */
}

/* label 요소를 왼쪽으로 정렬합니다. */
.type label {
  align-self: flex-start; /* 왼쪽 정렬을 설정합니다. */
  font-size: 16px; /* 글자 크기를 16px로 설정 */
  font-weight: bold; /* 글자 두껍게 설정 */
  color: rgb(228, 205, 141); /* 글자 색상을 파란색으로 설정 */
}

/* CSS 스타일 수정 */
.label-for-type-select {
  font-size: 1vw; /* 글자 크기를 20px로 설정 */
  font-weight: bold; /* 글자 두껍게 설정 */
  color: rgb(21, 114, 68); /* 글자 색상을 파란색으로 설정 */
  /* 필요한 다른 글자 서식 속성 추가 */
}

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

/* .button-group 클래스에 스타일을 정의하여 버튼들을 그룹으로 묶습니다. */
.button-group {
  display: flex;
  justify-content: space-between;
  height: 80%; /* 버튼의 높이를 뷰포트 너비의 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의 오른쪽 여백을 줌 (원하는 간격으로 변경) */
}

/* 마지막 이미지에는 오른쪽 여백을 주지 않음 */
.button img:last-child {
  margin-right: 0;
}

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

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

.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픽셀 이상일 때 .ad-area 요소를 보이게 합니다. */
@media (max-width: 800px) {
  .ad-area {
    display: none;
  }
}

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

CSS 맨 아래 미디어 퀴리 두 개는 하나로 합쳐도 되지?

 

chatGTP

예, 그렇습니다.

 

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

헤더, 어사이드는 사라지는데 메인은 사라지지 않아. 뷰포트가 600px 이하일 때, 사라지게 하려는데 실행이 안 돼.

 

chatGTP 

이렇게 쓰면 작동할 겁니다.

 

@media (max-width: 800px) {
  .ad-area,
  .header,
  main {
    display: none;
  }
}

실제로 정상작동함

넌 역시 바보다. 작동 안한다니까!!!!

 

그럼 이렇게 작성해보세요.

 

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

'말하는나무 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
4-2. 견적 의뢰서 제작 갈무리  (0) 2023.07.25
2. 로고 이미지를 삽입함  (0) 2023.07.24
1. 덩어리별로 구역을 나눔  (0) 2023.07.24
이 코드만으로 14개의 섹션(구역)이 생성된 거지?  (0) 2023.07.23
오류를 바로잡은 코드인데, 내가 바라는 모양이 아니다.  (0) 2023.07.23

관련글

티스토리툴바