2023년 웹디자인 기능사 팝업 : P-1
소개
안녕하세요! 웹스토리보이입니다. 스크립트에서 가장 쉬운 스크립트입니다. 버튼을 클릭하면 숨긴 내용 보여주고, 다시 클릭하면 안보여주고, 시작해보겠습니다.
1. 구조 잡기
이번에는 A-2 유형의 레이아웃을 사용하였습니다. 소스는 그대로 복사하셔서 사용하셔도 상관없습니다.
<div id="wrap">
<header id="header">
<h1 class="logo"></h1>
<nav class="nav"></nav>
</header>
<!-- //header -->
<article id="slider">
</article>
<!-- //slider -->
<main id="contents">
<section class="content1"></section>
<section class="content2"></section>
<section class="content3"></section>
</main>
<!-- //contents -->
<footer id="footer">
<div class="footer1"></div>
<div class="footer2"></div>
<div class="footer3"></div>
</footer>
<!-- //footer -->
</div>
<!-- //wrap -->
</body>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #000;
}
#wrap {
width: 1200px;
margin: 0 auto;
}
#header {
width: 100%;
display: flex;
}
#header .logo {
width: 20%;
height: 100px;
background-color: #efefef;
}
#header .nav {
width: 80%;
height: 100px;
background-color: #e3e3e3;
}
#slider {
width: 100%;
height: 300px;
background-color: #d9d9d9;
}
#contents {
width: 100%;
display: flex;
}
#contents .content1 {
width: 33.3333%;
height: 200px;
background-color: #d1d1d1;
}
#contents .content2 {
width: 33.3333%;
height: 200px;
background-color: #c7c7c7;
}
#contents .content3 {
width: 33.3333%;
height: 200px;
background-color: #bcbcbc;
}
#footer {
width: 100%;
display: flex;
}
#footer .footer1 {
width: 20%;
height: 100px;
background-color: #b1b1b1;
}
#footer .footer2 {
width: 60%;
height: 100px;
background-color: #a3a3a3;
}
#footer .footer3 {
width: 20%;
height: 100px;
background-color: #9d9d9d;
}
팝업 버튼을 추가하고, 팝업 콘텐츠는 wrap 제일 마지막에 추가하였습니다.
필요한 CSS도 추가하였습니다.
<main id="contents">
<section class="content1"></section>
<section class="content2"></section>
<section class="content3">
<a href="#" class="popup-btn">팝업</a>
</section>
</main>
<!-- //contents -->
<!-- 팝업 -->
<div class="popup-view">
<a href="#" class="popup-close">닫기</a>
</div>
/* popup */
#wrap {
position: relative;
}
.content3 {
display: flex;
align-items: center;
justify-content: center;
}
.popup-btn {
background-color: rgba(255,255,255,0.6);
padding: 10px;
display: inline-block;
}
.popup-view {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 400px;
height: 400px;
background-color: #a2a2a2;
border: 3px solid #000;
z-index: 1000;
display: none;
}
.popup-close {
background-color: #fff;
padding: 10px;
display: inline-block;
}
2. 스크립트 작업 : 제이쿼리
스크립트는 비교적 간단합니다. 버튼을 클릭하면 팝업을 보여주고, 닫기 버튼을 클릭하면 팝업을 숨기는 형태입니다.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
$(".popup-btn").click(function(){
$(".popup-view").show();
});
$(".popup-close").click(function(){
$(".popup-view").hide();
});
});
</script>
3. 스크립트 작업 : 자바스크립트
자바스크립트도 간단합니다. 선택자나 문법이 길어서 그렇지 제이쿼리를 그대로 자바스크립트로 변경하면 이렇습니다.
preventDefault() 메서드는 링크 클릭으로 인한 상단으로 위치 이동을 막기 위함입니다.
window.onload = function(){
document.querySelector(".popup-btn").addEventListener("click", function(){
document.querySelector(".popup-view").style.display = "block";
});
document.querySelector(".popup-close").addEventListener("click", function(){
document.querySelector(".popup-view").style.display = "none";
});
}
3. 마무리
지금까지 메뉴 유형, 이미지 슬라이드 유형, 탭 메뉴 유형, 팝업 유형 스크립트를 작업하였습니다. 스크립트가 가장 중요합니다. 물론 레이아웃도 중요합니다. 이 두가지만 완벽하게 하면 시험은 떨어질 수 없습니다. 이제 마지막으로 정리하는 느낌으로 최종 사이트만 연습하면 될 것 같습니다. 이제 기본적인 튜토리얼은 끝났습니다. 실전 사이트에서 뵙겠습니다. 여기까지 따라와주셔서 너무 감사합니다. 이상한 부분이나, 좋은 부분이나, 사소한 글이라도 댓글 부탁드립니다. 😶
PDF 샘플
레이아웃
- A1 유형
- A2 유형
- A3 유형
- A4 유형
- B1 유형
- B2 유형
- B3 유형
- B4 유형
- C1 유형
- C2 유형
- C3 유형
- C4 유형
- D1 유형
- D2 유형
- D3 유형
- D4 유형
- E1 유형
- E2 유형
- E3 유형
- E4 유형
댓글