1. HTML 구조
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>행복한 마켓</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div id="wrap">
<header id="header">
<h1>행복한 마켓</h1>
</header>
<main id="container">
<button id="btn-modal" class="btn-modal">모달창 띄우기</button>
<!-- 웹 브라우저 보면 grid 라 써져 있는데 layout 잡기 좋음 -->
<form>
<input type="text" placeholder="상품명을 입력하세요." />
<button type="submit" class="sign-up">등록</button>
</form>
<!-- 자바스립트를 통해 동적으로 추가할 예정 -->
<!-- 동적으로 생길 때 <li> 태그로 넣을 것 -->
<ul></ul>
</main>
</div>
<!-- 보통 모달은 따로 빼주는 것이 좋음 -->
<div class="modal">
<div class="modal-wrap">
<div class="modal-header">
<h2>이메일 주소를 남기시면, 유익한 정보를 보내드립니다.</h2>
</div>
<div class="modal-content">
<div class="photo"></div>
<div class="description">
<div class="description-header">
<button class="btn-close">×</button>
</div>
<div class="description-content">
<input type="email" placeholder="이메일 주소를 입력하세요.">
<button>뉴스레터 구독하기</button>
<p>
이메일 주소를 남겨주시면, 행복한 마켓의 할인 혜택과 다양한 정보를
편하게 받아 보실 수 있습니다.
알뜰한 살림꾼인 당신, 지금 당장 이메일 주소를 남겨주세요!
</p>
</div>
</div>
</div>
</div>
</div>
<!-- 모달이 띄워졌을 때 보여지는 화면 -->
<!-- overlay 가 활성화 됐을 때 class="active" 추가 -->
<div class="overlay">
</div>
<script src="./index.js"></script>
</body>
</html>
2. CSS 스타일 적용
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700&display=swap');
/* 초기화 작업 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
border: 0;
font-family: 'Noto Sans KR', sans-serif;
}
body {
padding: 30px;
}
/* wrap */
#wrap {
width: 640px;
margin: 0 auto;
}
/* wrap - header */
#header {
text-align: center;
}
/* wrap - container */
#container form {
width: 100%;
height: 50px;
/* 이 부분 공부할 것 */
/* 그리드와 관련된 속성 */
display: grid;
column-gap: 10px;
grid-template-columns: repeat(4, 1fr);
justify-items: right;
/* -------------------- */
margin-top: 20px;
}
/* 검색창 부분 */
#container input {
grid-column: 1 / 4;
}
#container input {
border: 1px solid lightgrey;
border-radius: 3px;
}
#container input {
width: 100%;
padding: 0 15px;
outline: none;
}
/* 등록 버튼 */
#container button {
width: 100px;
background-color: #3498db;
color: white;
border-radius: 3px;
}
#container button:hover {
background-color: #029aff;
font-weight: bold;
/* 버튼 위에 마우스를 대면 손모양으로 변형(a 태그는 필요 x) */
cursor: pointer;
}
/* ----------- */
/* 자바스크립트 구현이 되지 않았지만, 미리 스타일 지정 */
#container ul {
list-style: none;
margin: 20px 10px;
}
#container ul li {
border-bottom: 1px dotted lightgray;
/* padding-bottom: 7px; */
line-height: 40px;
margin-bottom: 10px;
display: grid;
grid-auto-flow: column;
grid-template-columns: 1fr;
}
#container ul li button {
/* 백그라운드 색상이 투명 */
background-color: transparent;
width: 30px;
height: 30px;
}
#container ul li button::before {
content: '';
display: inline-block;
width: 30px;
height: 30px;
background: url(img/icon/cross.png) no-repeat center center;
box-sizing: content-box;
}
#container ul li button:hover::before {
background: url(img/icon/minus.png) no-repeat center center;
background-color: #fff;
}
/* modal */
.modal {
position: fixed;
top: 50%;
left: 50%;
/* translate : 모달 기준으로 이동
이동, 웹 브라우저에 너비,높이 상관없이 가로/세로 가운데 정렬 */
transform: translate(-50%, -50%);
color: #222;
font-size: 15px;
line-height: 1.6em;
z-index: 100;
/* 활성화 되지 않았을 때 */
/* 모달 투명도 설정 */
opacity: 0;
/* element 에서 블럭 보이지 않음 */
display: none;
}
/* modal 에 active 가 있다면 ! */
.modal.active {
/* 활성화 되었을 때 */
opacity: 1;
display: block;
}
.modal .modal-wrap {
border: 1px solid #000;
width: 600px;
background-color: #fff;
border-radius: 3px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.344);
text-align: center;
padding: 20px;
}
.modal .modal-wrap .modal-header {
padding: 20px 0;
}
.modal .modal-wrap .modal-content {
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.modal .modal-wrap .modal-content>div {
padding: 10px;
}
.modal .modal-wrap .modal-content .photo {
grid-column: 1 / 2;
background: url(img/shopping.jpg) no-repeat center center;
background-size: cover;
border-radius: 3px;
}
.modal .modal-wrap .modal-content .description {
grid-column: 2 / 4;
}
.description-content input,
.description-content button {
display: block;
width: 100%;
border: 1px solid #eee;
text-align: center;
padding: 10px;
margin-bottom: 10px;
border-radius: 3px;
outline: none;
}
.description-content button {
background-color: #3498db;
color: #fff;
padding: 10px;
cursor: pointer;
}
.btn-close {
position: absolute;
top: 5px;
right: 10px;
/* transparent : 투명 */
background-color: transparent;
font-size: 20px;
color: #999;
}
.btn-close:hover {
color: #000;
font-weight: bold;
cursor: pointer;
}
/* overlay */
/* 아직 content 가 없음 */
.overlay {
position: fixed;
top: 0;
left: 0;
/* 65 : 알파값 투명도 설정 되어 있음 */
background-color: #00000065;
width: 100%;
height: 100vh;
/* 활성화 되기 전 투명 */
opacity: 0;
transition: .5s;
/*
현재 overlay가 전체를 덮고 있어서 다른 요소들이 선택이 안되는데,
이 설정으로 클릭이 가능
이런 구조는 좋지 않음 -> display 설정해주기
*/
/* pointer-events: none; */
display: none;
}
/* overlay에 active 가 있다면 ! */
.overlay.active {
/* 활성화가 된 후 불투명 */
opacity: 1;
display: block;
}
'Language > HTML & CSS & JavaScript' 카테고리의 다른 글
[Javascript] 논리값 확인하기 (0) | 2024.05.29 |
---|---|
[Javascript] Element.classList 속성, 자바스크립트로 클래스 추가/제거 하기 (0) | 2024.05.29 |
[JavaScript] innerText 와 innerHTML 차이점 (0) | 2024.05.28 |
004. 웹 표준 활용 Web Front 개발 - JavaScript (1) | 2024.05.20 |
[HTML/CSS] float 을 활용하여 ul 태그로 메뉴 레이아웃 잡기 (0) | 2024.05.16 |