모달
코드펜보고 간단 따라하기.
닫는버튼.
모달 - 헤더,바디,푸터.
html
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<!-- 버튼 -->
<button id="modal-btn" class="button">여길 누르세요!</button>
<!-- 모달 창 -->
<div id="my-modal" class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close"> </span>
<h2>모달 창</h2>
</div>
<div class="modal-body">
<p>이게 모달창이야</p>
<p>
최초의 아이스크림은 셔벗(또는 빙수) 형태에서부터 출발하였다. 최초의 아이스크림은 눈에 향료로 양념을 한 것으로, 지금의 아이스크림보다는 거칠었다. 냉장고 같은 냉방 수단이 없었던 고대에는 왕족과 귀족들이 먹는 고급 간식이었다.
</p>
</div>
<div class="modal-footer">
<h3>모달 아래.</h3>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>css
:root{--modal-duration:1s;--modal-color:#428bca}body{font-family:Arial,Helvetica,sans-serif;background:#f4f4f4;font-size:17px;line-height:1.6;display:flex;height:100vh;align-items:center;justify-content:center}.button{background:#428bca;padding:1em 2em;color:#fff;border:0;border-radius:5px;cursor:pointer}.button:hover{background:#3876ac}.modal{display:none;position:fixed;z-index:1;left:0;top:0;height:100%;width:100%;overflow:auto;background-color:rgba(0,0,0,.5)}.modal-content{margin:10% auto;width:60%;box-shadow:0 5px 8px 0 rgba(0,0,0,.2),0 7px 20px 0 rgba(0,0,0,.17);animation-name:modalopen;animation-duration:var(--modal-duration)}.modal-header h2,.modal-footer h3{margin:0}.modal-header{background:var(--modal-color);padding:15px;color:#fff;border-top-left-radius:5px;border-top-right-radius:5px}.modal-body{padding:10px 20px;background:#fff}.modal-footer{background:var(--modal-color);padding:10px;color:#fff;text-align:center;border-bottom-left-radius:5px;border-bottom-right-radius:5px}.close{color:#ccc;float:right;font-size:30px;color:#fff}.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}@keyframes modalopen{from{opacity:0}to{opacity:1}}
js
//문서 가져오기.
const modal = document.querySelector('#my-modal');
const modalBtn = document.querySelector('#modal-btn');
const closeBtn = document.querySelector('.close');
//이벤트
modalBtn.addEventListener('click', openModal);
closeBtn.addEventListener('click', closeModal);
window.addEventListener('click', outsideClick);
function openModal(){
modal.style.display = 'block';
}
function closeModal(){
modal.style.display = 'none';
}
function outsideClick(e){
if(e.target == modal){
modal.style.display = 'none';
}
}캐러셀
HTML
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<main>
<h1>바닐라 캐러셀.</h1>
<div class="container">
<!-- 좌우버튼. -->
<button id="left-btn"><i class="arrow"></i></button>
<img id ="carousel" src="" alt="">
<button id="right-btn"><i class="arrow"></i></button>
</div>
</main>
<script src="script.js"></script>
</body>
</html>CSS
*{padding:0;margin:0}body{font-family:"Roboto",sans-serif;display:flex;justify-content:center;align-items:center;height:100vh}h1{text-align:center}.container{width:500px;height:500px;display:flex;justify-content:center;box-shadow:0 24px 38px 3px rgba(0,0,0,.14),0 9px 46px 8px rgba(0,0,0,.12),0 11px 15px -7px rgba(0,0,0,.2)}.container img{width:100%;z-index:-2}button{height:10%;border:none;outline:none;background:rgba(46,110,134,.5);cursor:pointer;padding:1em;display:flex}button .arrow{border:solid #fff;border-width:0 4px 4px 0;display:inline-block;padding:10px;transition:transform 0.3s ease-out;outline:none}#right-btn{margin:auto 0 auto -2em}#right-btn .arrow{transform:rotate(-45deg)}#left-btn{z-index:0;margin:auto -2em auto 0}#left-btn .arrow{transform:rotate(135deg)}JS
const img = document.getElementById('carousel');
const rightBtn = document.getElementById('right-btn');
const leftBtn = document.getElementById('left-btn');
//이미지들 -- Unsplash
let pictures = ['https://images.unsplash.com/photo-1651517082362-ec52b7e1a7ce?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=765&q=80',
'https://images.unsplash.com/photo-1651522356854-624fcd9dc3da?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
'https://images.unsplash.com/photo-1651507332142-44127fc299cc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=765&q=80',
'https://images.unsplash.com/photo-1651520173017-7dd74dfd7ce4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=686&q=80'];
//기본 사진 배당, 기본 위치.
img.src = pictures[0];
let position = 0;
const moveRight = () => {
if(position >= pictures.length -1){
//사진수보다 많으면 초기화.
position = 0;
img.src = pictures[position];
return;
}
img.src = pictures[position + 1];
position++;
}
const moveLeft = () => {
if(position < 1 ){
//처음에서 뒤로가기를 하면 음수가 아니라 사진의 맨끝으로 다시 넘어감.
position = pictures.length - 1;
img.src = pictures[position];
return;
}
img.src = pictures[position - 1];
position--;
}
rightBtn.addEventListener("click", moveRight);
leftBtn.addEventListener("click", moveLeft);
왕초보