[Mission-01] 웹 페이지 구현

윤주·2023년 11월 5일

CSS html

mission

목록 보기

1/1

구현화면

사용한 도구

Visual Studio Code
Figma
W3C Markup Validation Service
W3C CSS Validation Service

HTML

전체 코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Mission-01</title>
    <link rel="stylesheet" href="./mission-01.css" />
    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400&display=swap"
    />
  </head>
  <body>
    <!-- 전체 박스 -->
    <div class="box-group">
      <!-- 오뚜기: 꿀생강차 -->
      <div class="ginger-tea">
        <img src="./images/logo01.png" alt="오뚜기" class="ottugi" />
        <h1>따뜻한 차 향기</h1>
        <img
          src="./images/product01.png"
          alt="꿀 생강차"
          class="ginger-product"
        />
        <!-- 구매 버튼 -->
        <div class="button">
          <img src="./images/button.svg" alt="" class="early-button" />
          <button type="button" class="buy-button" onclick="">
            구매하기<img src="./images/buy-emoji.svg" alt="구매하기" />
          </button>
        </div>
      </div>
      <!-- 아래 박스(핸드크림, 보리차) -->
      <div class="box">
        <!-- 카밀: 핸드크림-->
        <div class="handcream">
          <img src="./images/logo02.png" alt="kamill" class="kamill" />
          <h1>핸드크림 모음</h1>
          <img
            src="./images/product02.png"
            alt="카밀 핸드크림"
            class="hand-product"
          />
          <!-- 구매 버튼 -->
          <div class="button">
            <img src="./images/button.svg" alt="" class="early-button" />
            <button type="button" class="buy-button" onclick="">
              구매하기<img src="./images/buy-emoji.svg" alt="구매하기" />
            </button>
          </div>
        </div>
        <!-- 곰곰마켓: 보리차 -->
        <div class="barley-tea">
          <img src="./images/logo03.png" alt="곰곰마켓" class="gomgom" />
          <h1>고소한 보리차</h1>
          <img
            src="./images/product03.png"
            alt="보리차"
            class="barley-product"
          />
          <!-- 구매 버튼 -->
          <div class="button">
            <img src="./images/button.svg" alt="" class="early-button" />
            <button type="button" class="buy-button" onclick="">
              구매하기<img src="./images/buy-emoji.svg" alt="구매하기" />
            </button>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

문법 오류 검사

CSS

전체코드

/* 변수 */
:root {
  --gray-100: #f3f3f3;
  --gray-500: #c4c4c4;
  --gray-800: #4e4e4e;
  --White: #fff;
  --opacity-20: rgba(0, 0, 0, 0.2);
  --grayscale-gray-5: #555;
  --blue-600: #0074e9;
}


/* 기본 스타일 */
body {
  background: var(--gray-100);
  font-family: "Noto Sans", sans-serif;
}

.box-group {
  width: 502px;
  height: 630px;
  margin: 0 auto;
}

.ginger-tea {
  background: var(--White);
  width: 502px;
  height: 310px;
  border: 1px solid var(--gray-500);
  margin-bottom: 10px;
}

.handcream,
.barley-tea {
  background: var(--White);
  width: 243px;
  height: 310px;
  border: 1px solid var(--gray-500);
}


/* 작은 박스 배치 */
.handcream {
  float: left;
}

.barley-tea {
  float: right;
}

.ginger-tea,
.handcream,
.barley-tea {
  position: relative;
}


/* 문구 스타일 */
.ginger-tea h1 {
  color: var(--gray-800);
  text-align: center;
  font-size: 24px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
}

.handcream h1,
.barley-tea h1 {
  color: var(--grayscale-gray-5);
  text-align: center;
  font-size: 18px;
  font-style: normal;
  font-weight: 700;
  line-height: 150%;
}


/* 문구 배치 */
.ginger-tea h1 {
  position: absolute;
  bottom: 118px;
  left: 28px;
  width: 200px;
  height: 37px;
  margin: 0;
  /* flex-shrink: 0;  존재하지 않는 속성 오류 */
}

.handcream h1,
.barley-tea h1 {
  width: 200px;
  height: 27px;
  /* flex-shrink: 0; 존재하지 않는 속성 오류 */
  position: absolute;
  top: 66px;
  left: 21px;
  text-align: center;
  margin: 0;
}


/* 로고 배치*/
.ottugi {
  position: absolute;
  top: 75px;
  left: 73px;
}

.kamill,
.gomgom {
  position: absolute;
  top: 14px;
  left: 64px;
}


/* 상품 이미지 배치 */
.ginger-product {
  position: absolute;
  bottom: 20px;
  right: 28px;
}

.hand-product,
.barley-product {
  position: absolute;
  bottom: 14px;
  left: 23px;
}


/* 버튼 이미지 스타일 (활성화 전) */
.early-button {
  width: 42px;
  height: 42px;
  /* flex-shrink: 0; 존재하지 않는 속성 오류 */
  position: absolute;
  bottom: 20px;
  left: 20px;
  fill: var(--opacity-20);
}


/* 구매 버튼 기본 스타일 해제 */
.buy-button {
  border: none;
  outline: none;
  background: none;
}


/* 구매 버튼 스타일 */
.buy-button {
  padding: 12px 18px 13px 20px;
  /* justify-content: center;
  align-items: center;
  gap: 16px; 존재하지 않는 속성 오류 */
  position: absolute;
  bottom: 20px;
  left: 20px;
  background: var(--blue-600);
  color: var(--White);
  display: none;
}

.buy-button img {
  margin-left: 16px;
}


/* 구매 버튼 활성화 */
.early-button:hover {
  display: none;
}

.early-button:hover + .buy-button {
  display: block;
}