<!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>
/* 변수 */ :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; }
MDN - root
https://developer.mozilla.org/en-US/docs/Web/CSS/:root
버튼 활성화 전 / 후
onclick
속성 사용position: absolute
속성 외에 다른 방법 찾아보기