웹디자인기능사 실기 공개문제 - Green복지재단 (3)
Lpla
·2020. 5. 5. 22:13
이번 시간에는 C. Contents 영역과 D. Footer 영역을 제작하여 그린복지재단을 마무리하겠습니다.
A. Header와 B. Slide에 비교하면 쉬운 편으로 자바스크립트로 작업해야 하는 부분 하나가 있지만 그마저도 간단합니다.
가장 신경써야할 부분은 C.1 공지사항의 모달 레이어 팝업창입니다.
웹디자인 실기 유형 정리에서 언급했듯이 공지사항의 첫번째 글을 클릭할 때 모달 레이어 혹은 레이어 팝업 중에 하나의 형태로 제작해야 합니다.
웹디자인기능사 실기 유형 정리
지난 3월에 있었던 웹디자인기능사 2019년 1회차 시험에 최종 합격했습니다. 웹퍼블리싱을 6개월 정도 공부한 저에게는 무난한 난이도였습니다. 실제 준비 기간은 시험이 있던 그 주 평일 월화수목금 총 5일이었..
lpla.tistory.com
모달 레이어
한편 일반 레이어 팝업창을 지시할 수도 있습니다.
모달 레이어와 레이어 팝업의 차이는 팝업창 뒤에 반투명한 요소가 있고 없고 차이 밖에 없습니다.
팝업창은 숨겨져 있다가 공지사항 첫째 글을 클릭하면 나타나게 합니다.
레이어 팝업창
마지막 D. Footer는 내용도 짧은 만큼 특별하게 요구하는 사항은 없습니다.
로고만 포토샵에서 무채색으로 바꿔주면 됩니다.
이제 코드를 작성하겠습니다.
HTML
<section id="main_container">
<div id="notice_wrap">
<div class="main_top_text">
<p>공지사항</p>
</div>
<div class="main_bot_text" id="notice_bot_text">
<div class="clearfix">
<a href="#">[공지] Green 복지재단 이사장 취임</a>
<span>2019-03-18</span>
</div>
<div class="clearfix">
<a href="#">[공지] 기부금품 모집 및 사용명세 보고</a>
<span>2019-03-10</span>
</div>
<div class="clearfix">
<a href="#">[공지] 2019년 기부금품 모집완료보고</a>
<span>2019-02-22</span>
</div>
<div class="clearfix">
<a href="#">[공지] 2018년도 사업실적 및 결산보고서</a>
<span>2019-01-31</span>
</div>
</div>
</div>
<div id="gallery_wrap">
<div class="main_top_text">
<p>갤러리</p>
</div>
<div class="main_bot_text">
<div class="gallery_box" id="gallery_box_1">
<img src="http://placehold.it/100x120" alt="갤러리 이미지1" />
</div>
<div class="gallery_box" id="gallery_box_2">
<img src="http://placehold.it/100x120" alt="갤러리 이미지2" />
</div>
<div class="gallery_box" id="gallery_box_3">
<img src="http://placehold.it/100x120" alt="갤러리 이미지3" />
</div>
</div>
</div>
<div id="banner_wrap">
<div class="main_top_text">
<p>배너</p>
</div>
<div class="main_bot_text">
<div id="banner_box_1">
<img src="http://placehold.it/370x90" alt="배너 이미지" />
</div>
</div>
</div>
<div id="bg">
<div id="pop_up">
<div>
<p>[공지] Green 복지재단 이사장 취임</p>
</div>
<div>
<p>
기부금품 모집을 위해서는 기부금품 모집 등록을 해야 합니다. 모집목표금액이 10억원을 초과하는 경우에는 행정안전부에, 목표금액이 1천만원 이상 10억원 이하인 경우는 모집자
주소지를 관할하는 광역시도에 기부금품 모집등록을 신청합니다.기부금품 모집 등록을 하기 위해서는 다음 서류를 등록청에 제출해야 합니다.
</p>
</div>
<div>
<button>X</button>
</div>
</div>
</div>
</section>
<footer>
<div id="footer_logo_wrap">
<img src="images/logo_gray.png" alt="흑백로고" />
</div>
<div id="copyright">
<p>Copyright 2019. Green복지재단 All pictures cannot be copied without permission.</p>
</div>
<div id="family_site">
<div id="family_site_top">
<p>Family Site</p>
</div>
<div id="family_site_bot">
<div>
<a href="#">
<img src="images/family_site_1.png" alt="카카오" />
</a>
</div>
<div>
<a href="#">
<img src="images/family_site_2.png" alt="라인" />
</a>
</div>
<div>
<a href="#">
<img src="images/family_site_3.png" alt="지메일" />
</a>
</div>
</div>
</div>
</footer>
CSS
/*notice*/
#notice_wrap{
width: 33.33%;
height: 200px;
float: left;
overflow: hidden;
}
#gallery_wrap{
width: 33.33%;
height: 200px;
float: left;
overflow: hidden;
}
#banner_wrap{
width: 33.33%;
height: 200px;
float: left;
overflow: hidden;
}
.main_top_text{
width: 117px;
height: 46px;
margin-left: 16px;
margin-top: 14px;
background-color: #434748;
}
.main_top_text>p{
color: white;
font-size: 18px;
text-align: center;
line-height: 46px;
font-weight: 700;
}
.main_bot_text{
width: 100%;
background-color: #434748;
padding: 15px 0 0 15px;
height: 125px;
}
.main_bot_text a{
float: left;
color: white;
}
.main_bot_text span{
float: right;
font-size: 12px;
line-height: 19px;
margin-right: 15px;
color: white;
}
#notice_bot_text>div{
margin-bottom: 10px;
}
/*notice end*/
/*gallery*/
.gallery_box{
width: 100px;
height: 120px;
background-color: white;
float: left;
}
#gallery_wrap>.main_bot_text{
padding: 10px 0 0 30px;
height: 130px;
}
#gallery_box_2{
margin: 0px 30px;
}
/*gallery end*/
/*banner*/
#banner_box_1{
width: 370px;
height: 90px;
background-color: white;
margin-top: 10px;
}
/*banner end*/
/*pop up*/
#bg{
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.51);
display: none;
position: fixed;
top: 0;
left: 0;
z-index: 10;
}
#pop_up{
width: 400px;
height: 300px;
background-color: white;
position: relative;
top: 400px;
left: 50%;
transform: translate(-50%, -50%);
border: 3px solid #3cb149;
padding: 10px;
}
#pop_up>div{
padding: 5px;
}
#pop_up>div:first-child{
height: 20%;
color: #1d8844;
font-size: 24px;
font-weight: 700;
border-bottom: 1px solid #3cb149;
line-height: 60px;
}
#pop_up>div:nth-child(2){
height: 60%;
color: #333333;
}
#pop_up>div:last-child{
height: 10%;
}
#pop_up button{
width: 30px;
height: 30px;
float: right;
}
/*pop up end*/
/*footer*/
#footer_logo_wrap{
width: 200px;
height: 40px;
margin: 30px;
float: left;
}
#copyright{
width: 600px;
height: 100px;
float: left;
}
#family_site{
width: 340px;
height: 100px;
float: left;
}
#copyright>p{
font-size: 12px;
color: #333333;
text-align: center;
margin-top: 70px;
}
#family_site_top{
margin-top: 10px;
}
#family_site_top>p{
font-size: 20px;
color: #333333;
font-weight: 700;
}
#family_site_bot>div{
float: left;
}
#family_site_bot>div:first-child{
margin-left: 120px;
}
#family_site_bot>div:nth-child(2){
margin: 0 20px;
}
/*footer end*/
저는 공지사항, 갤러리, 배너를 감싸는 main_container를 만들었고 그 안에 notice_wrap, gallery_wrap, banner_warp로 3등분했습니다.
그리고 wrap도 상하로 구분하여 상단에는 제목을, 하단에는 내용을 작성했습니다.
공지사항 내용은 임의로 4개, 갤러리는 공개문제에서 요구하는대로 가로로 3개, 배너도 요구사항이 없어서 임의로 1개 작성했습니다.
그리고 팝업창인 pop_up과 모달 역할을 수행할 bg를 만들었습니다.
bg를 pop_up의 부모요소로 만든 이유는 bg에 fadein, fadeout 효과를 주면, 자식 요소인 pop_up도 같이 적용되기 때문에 간결하게 코드를 작성할 수 있기 때문입니다.
pop_up의 내부는 자유롭게 꾸미되, 취소버튼은 꼭 넣도록 합니다. 반드시 button일 필요는 없습니다.
Footer도 와이어프레임에 나와있는 대로 좌측부터 로고, 저작권, 패밀리사이트 세 구역으로 구분했습니다.
html과 css만으로 가능하기 때문에 어려운 부분은 없습니다.
JavaScript
$(document).ready(function(){
//popUP
$('#notice_bot_text>div:first-child>a').click(function(){
$('#bg').fadeIn();
});
$('#pop_up button').click(function(){
$('#bg').fadeOut();
});
//popUP end
});
제이쿼리로 클릭이벤트를 쉽게 만들 수 있습니다.
공지사항의 첫번째 글을 클릭하면, bg에 fadeIn 효과를 주고, 닫기 버튼을 클릭하면 bg에 fadeOut 효과를 줍니다.
이것으로 웹디자인기능사 실기 공개문제 - 그린복지재단이 완성되었습니다.
실제 문제도 이 유형에서 크게 벗어나지 않고 거의 그대로 출제됩니다.
메뉴 구성(가로, 세로)와 슬라이드(가로, 세로, 페이드인아웃)를 중심으로 연습하고 간다면 충분히 합격할 수 있습니다.
