<!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">로고 에어리어</div>
<div class="custom">맞춤</div>
<div class="type-choice">가구종류</div>
<div class="quotation-request">견적 의뢰서</div>
<div class="button-area">버튼들</div>
</header>
<main class="main">
<div class="clent-info">의뢰자 정보</div>
<div class="style-choice">원하는 스타일</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>바닥글</footer>
<aside>광고들</aside>
</body>
</html>문서를 큰 덩어리 몇 개로 나누되, 가급적 시멘틱 태그를 사용함.
따라서 위 코드는
- 로고, 문서 제목, 명령 버튼이 위치한 header 구역
- 의뢰자 정보, 가구 스타일, 제작방식 및 마감방법, 원하는 금액대와 마감일을 설정할 수 있는 main 구역
- 원하는 디자인을 삽입, 수정할 수 있는 article 구역 (그 안에 설명 목록 포함)
- 바닥글 (footer)
- 광고글 (aside)
로 구성함. 아래는 코드 실행 모습
결국 내가 쓴 태그는 전부 '블록' 요소였던 건가.
display: flex; /* 아이템들을 가로로 배열합니다. */
justify-content: space-between; /* 아이템들 사이의 간격을 최대로 설정하여 가로로 정렬합니다. */
align-items: center; /* 아이템들을 수직 방향으로 가운데로 정렬합니다. */
border: 1px solid rgb(203, 198, 198); /* 테두리 스타일을 추가합니다. (선택사항) */
padding: 10px; /* 헤더 내부 여백을 추가합니다. (선택사항) */
위 5가지 CSS를 (거의) 무조건 입력해서,
블럭을 한 눈에 파악할 수 있게 함.
각 블럭의 '이름'을 임시로라도 반드시 넣는 게 파악에 용이함.
display: flex 는 아이템을 가로로 배열하게 함.
위 CSS를 적용하면
뷰포트를 줄이면 광고가 사라지게
/* .ad-area 클래스에 스타일을 정의하여 페이지 우측에 고정합니다. */
.ad-area {
position: fixed; /* 해당 요소를 페이지에 고정시킵니다. */
top: 0; /* 페이지의 우측 상단에 배치됩니다. */
right: 0; /* 페이지의 우측 상단에 배치됩니다. */
width: 200px; /* 요소의 너비를 200픽셀로 지정합니다. */
background-color: lightgray; /* 배경색을 밝은 회색으로 지정합니다. */
padding: 10px; /* 내부 여백을 10픽셀로 지정합니다. */
display: none; /* 뷰포트가 줄어들 때 요소를 숨깁니다. */
}
/* 뷰포트의 가로 너비가 800픽셀 이상일 때 요소를 보이도록 설정합니다. */
@media (min-width: 800px) {
.ad-area {
display: block;
}
}
ad-area 에 display: none; 을 넣음
미디어 쿼리로 뷰포트가 800px 이하로 줄어들면 광고가 사라지게(block) 함.
'말하는나무 PR. Mahannamu > 맞춤제작 견적서 Customization Quote Request' 카테고리의 다른 글
| 의뢰서 단계별 갈무리 1 (0) | 2023.07.28 |
|---|---|
| 4-2. 견적 의뢰서 제작 갈무리 (0) | 2023.07.25 |
| 3. 드롭다운을 삽입하고, 버튼 부분의 사이즈를 조절, 그리고 뷰포트 기준으로 아이템들이 줄어들다가 800px 이하에서 header, main, ad-area가 사라지게 함. (0) | 2023.07.24 |
| 2. 로고 이미지를 삽입함 (0) | 2023.07.24 |
| 이 코드만으로 14개의 섹션(구역)이 생성된 거지? (0) | 2023.07.23 |
| 오류를 바로잡은 코드인데, 내가 바라는 모양이 아니다. (0) | 2023.07.23 |
| 헤더 부분 - 우상단 명령 버튼들 추가 (0) | 2023.07.23 |
| 헤더 부분 - 기본 (0) | 2023.07.23 |
