본문 바로가기
컴퓨터자격증/웹디자인기능사

웹디자인기능사 실기 | 문제 풀이 A-2 (Green 복지재단)

by KISCH 2022. 2. 23.
반응형

 

A-2 그린복지재단 문제 풀이입니다. 메뉴는 가로형 전체배경, 슬라이드는 좌에서 우로, 공지사항과 갤러리는 나뉘어진 형태이며, 패밀리사이트 있습니다. 

 

웹디자인기능사실기
이미지 대충 만들어서 죄송해요
images.zip
0.03MB

 

 

A-2.pdf
0.33MB

 

 

이미지와 문제지 첨부합니다.

 

 

기본 설정 및 레이아웃

 

★ 파일 및 폴더

폴더 — css, images, js

파일 — index.html, css파일, js파일, jQuery파일, 이미지 파일(images폴더)  

 

★ HTML

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>초록복지재단</title>
        <link rel="stylesheet" href="css/common.css">
        <script src="js/jquery-1.12.3.js"></script>
        <script src="js/common.js"></script>
    </head>
    <body>
    	<div class="popup"></div> 		// 팝업창
        <header> 
            <h1> 로고 </h1> 
            <nav class="hNav"></nav> 		// 헤더 네비게이션
        </header> 

        <section> 
            <div class="notice"></div> 		// 공지사항
            <div class="gallery"></div> 	// 갤러리
            <div class="banner"> 배너 </div>   
            <div class="shortcut"></div>	// 공지사항 갤러리 분리형일 경우 바로가기 없음
        </section> 

        <footer> 
            <h1> 로고 </h1> 
            <p> 카피라이터 </p> 
            <div class="family"><button></button></div>  
        </footer>
    </body>
</html>

 

★ CSS

@charset "utf-8";
* {
    padding: 0; margin: 0;
    font-family: "맑은 고딕", sans-serif;
    font-size: 14px; color: #333333;
}
li { list-style: none; }
a { text-decoration: none; }
img { border: none; }

header { width: 1200px; height: 100px; margin: 0 auto; } /* 창의 가운데로 오게 좌우 여백처리 */ 
section { width: 1200px; height: 500px; margin: 0 auto; }
footer { width: 1200px; height: 100px; margin: 0 auto; }

header h1 { float: left; width: 200px; height: 40px; margin-top: 60px; }
.hNav { float: right; width: 600px; height: 40px; margin-top: 60px; }

.notice { float: left; width: 400px; height: 200px; }
.gallery { float: left; width: 400px; height: 200px; }
.banner { float: left; width: 400px; height: 200px; }

footer h1 { float: left; width: 200px; height: 40px; margin-top: 30px; }
footer p { float: left; width: 800px; height: 40px; margin-top: 30px; }
.family { float: left; width: 200px; height: 40px; margin-top: 30px; }

 

★ JAVASCRIPT

$(document).ready(function () {
   
})

 

 

로고, 카피라이트, 패밀리사이트

 

★ HTML

<header>
            <h1>
                <a href="#">
                    <img src="images/logo_header.png" alt="로고">
                </a>
            </h1>
            
</header>
<footer>
            <h1>
                <a href="#">
                    <img src="images/logo_footer.png" alt="로고">
                </a>
            </h1>
            <p>Copyright &copy; 초록복지재단 . All rights reserved.</p>
            <div class="family">
                <button>패밀리사이트<span class="icon">▼</span></button>
                <ul>
                    <li><a href="#">서울종합사회복지관</a></li>
                    <li><a href="#">부산종합사회복지관</a></li>
                    <li><a href="#">대구종합사회복지관</a></li>
                    <li><a href="#">대전종합사회복지관</a></li>
                    <li><a href="#">청주종합사회복지관</a></li>
                    <li><a href="#">제주종합사회복지관</a></li>
                </ul>
            </div>
</footer>

 

★ CSS

footer p { 
    float: left; width: 800px; height: 40px; margin-top: 30px;
    text-align: center; line-height: 40px;
}

.family {
    float: left; width: 200px; height: 40px; margin-top: 30px; 
    position: relative;					/* ul 위치 컨트롤하기 위해 */
}
.family button {
    cursor: pointer;                    /* 마우스오버 커서 손모양 */
    width: 100%; height: 100%;      	/* 부모크기의 100% */
    border: 1px solid #999999;			
    box-sizing: border-box;				/* 테두리와 패딩사이즈 인사이드로 처리 */
    background-color: #fff;
    padding-left: 10px;
    text-align: left; line-height: 38px;
}
.family button .icon {
    display: block; float: right;       /* 아이콘 오른쪽에 붙이기 */
    padding-right: 10px;
}
.family ul {
    display: none;                           
    position: absolute; top: -180px;    /* 버튼보다 위에 */ 
    width: 100%; height: 180px;
    box-sizing: border-box;
    border: 1px solid #999999; border-bottom: none;
    background-color: #fff; line-height: 29px;
}
.family li {
    width: 100%; height: 30px;			/* 리스트 한 개 영역 설정 */
    padding-left: 10px;
    box-sizing: border-box;
}

 

★ JAVASCRIPT

// 패밀리 사이트 버튼
    $('.family button').click(function(){ 	// 패밀리 사이트 버튼 클릭
      $('.family ul').fadeToggle('fast'); 	// 리스트 안보이면 보이게, 보이면 안보이게
    });

 

 

갤러리, 배너

 

★ HTML

            <div class="gallery">
                <h3>갤러리</h3>
                <ul>
                    <li><a href="#"><img src="images/gallery1.png" alt="갤러리이미지01"></a></li>
                    <li><a href="#"><img src="images/gallery2.png" alt="갤러리이미지02"></a></li>
                    <li><a href="#"><img src="images/gallery3.png" alt="갤러리이미지03"></a></li>
                </ul>
            </div>
            <div class="banner">
                <a href="#"><img src="images/banner.png" alt="카드배너"></a>
            </div>

 

★ CSS

/*갤러리*/
.gallery { 
    float: left; width: 400px; height: 200px; 
    padding: 0 10px; box-sizing: border-box;
}
.gallery h3 {
    width: 100%; height: 50px;					/* 갤러리 타이틀 영역 */
    box-sizing: border-box; border-bottom: 1px solid #999999;
    font-size: 18px; line-height: 49px;
}
.gallery ul { padding: 10px 0; }
.gallery li {
    float: left;
    width: 125px; height: 100px;
}
.banner { 
    float: left; width: 400px; height: 200px; 
    padding: 10px 20px 0;
    box-sizing: border-box;
}

 

 

 

 

공지사항, 팝업창

 

★ HTML

<body>
        <div class="popup"> 		
            <h2>미얀마 성장발달보고서</h2> 	/* 팝업타이틀 */
            <p>
                미얀마 아동을 후원해주시는 후원자님, <br>
                안녕하세요! <br>
                결연아동에게 보내주시는 따뜻한 관심과 <br>
                사랑에 감사드립니다.<br>
                <br>
                2019년 2월 22일(금) 결연아동의 사진이 <br>
                담긴 성장발달보고서와 사업장소식을<br>
                발송했습니다.<br>
                결연아동의 소식과 함께 오늘도 행복한 <br>
                하루 보내세요!<br>
                <br>
                초록복지재단 드림.
            </p>
            <a href="#">닫기 X</a>			/* 닫기버튼 */
        </div>
        
        <header>
        /* ... */
	<div class="notice">
                <h3> 공지사항 </h3>
                <ul>
                    <li>
                        <a href="#" class="popupOpen">• 미얀마 성장발달보고서 및 사업장소식 발송 </a>
                        <span class="date">2019..03.05</span>
                    </li>
                    <li>
                        <a href="#">• 네팔 성장발달보고서 및 사업장소식 발송 </a>
                        <span class="date">2019..03.02</span>
                    </li>
                    <li>
                        <a href="#">• 법인사무처 2019년 3월 주요일정 </a>
                        <span class="date">2019..02.11</span>
                    </li>
                    <li>
                        <a href="#">• 초록복지재단 개인정보처리방침 개정안내 </a>
                        <span class="date">2019..01.15</span>
                    </li>
                    <li>
                        <a href="#">• 발달장애인 사회적자립봉사자 지원 </a>
                        <span class="date">2019..01.11</span>
                    </li>
                </ul>
	</div>

 

★ CSS

/*공지사항*/
.notice { 
    float: left; width: 400px; height: 200px; 
    padding: 0 20px; box-sizing: border-box;
}
.notice h3 {
    width: 100%; height: 50px;			/* 공지사항 타이틀 */
    box-sizing: border-box; border-bottom: 1px solid #999999;
    font-size: 18px; line-height: 49px;
}
.notice li {
    width: 100%; height: 30px;			/* 리스트 한 개 영역 */
    font-size: 12px; line-height: 30px;
}
.notice li a {
    float: left;						/* 부모영역인 리스트의 왼쪽에 붙임 */
    display: block;						/* 인라인 요소여서 영역 잡기 위해 */
    width: 290px; height: 30px;			/* 텍스트 영역 설정 */
    padding-left: 10px; box-sizing: border-box;
    font-size: 12px;
}
.notice li .date {
    float: right;						/* 부모영역인 리스트의 오른쪽에 붙임 */
    display: block;						/* 인라인 요소여서 영역 잡기 위해 */
    width: 70px; height: 30px;						
    padding-right: 10px; box-sizing: border-box;
    font-size: 12px; text-align: right;
}

/*팝업창*/
.popup {
    display: none;						/* 일단 안보이게 */
    width: 300px; height: 300px;		/* 제일 위로 */
    position: absolute; z-index: 6000;
    left: 0; right: 0; margin: 0 auto;
    top: 150px;
    border: 1px solid #999999;
    padding: 20px; box-sizing: border-box;
    background-color: #fff;
}
.popup h2 {
    font-size: 18px; margin-bottom: 10px;
}
.popup p {
    font-size: 12px; color: #666666;
    line-height: 17px; margin-bottom: 10px;
}
.popup a {
    display: block;
    font-size: 12px; text-align: right;
}

 

★ JAVASCRIPT

// 팝업창
    $('.popupOpen').click(function(){
       $('.popup').fadeIn(0); 			// 팝업창 띄우기
    });
    $('.popup a').click(function(){
       $('.popup').fadeOut(0); 			// 닫기 버튼
    });

 

 

메뉴

 

★ HTML

<nav class="hNav">
                <ul>
                    <li>
                        <a href="#" class="mainMenu">재단소개</a>
                        <ul class="subMenu">
                            <li><a href="#">설립취지</a></li>
                            <li><a href="#">연혁</a></li>
                            <li><a href="#">오시는길</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#" class="mainMenu">후원하기</a>
                        <ul class="subMenu">
                            <li><a href="#">국내후원</a></li>
                            <li><a href="#">국외후원</a></li>
                            <li><a href="#">맞춤후원</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#" class="mainMenu">자료실</a>
                        <ul class="subMenu">
                            <li><a href="#">서식자료실</a></li>
                            <li><a href="#">사진자료실</a></li>
                            <li><a href="#">후원양식</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#" class="mainMenu">스토리</a>
                        <ul class="subMenu">
                            <li><a href="#">웹진</a></li>
                            <li><a href="#">보고서</a></li>
                            <li><a href="#">나의 후원</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
<div class="hNavBg"></div>

 

★ CSS

.hNav { 
    float: right; width: 600px; height: 40px; margin-top: 60px; 
}
.hNav > ul > li {
    float: left;					/* 메인메뉴 가로 정렬 정리 */
    width: 150px; height: 40px;		/* 메인메뉴 한개 영역 설정 */
    text-align: center; line-height: 40px;
    position: relative;				/* 서브메뉴의 위치 컨트롤 위해 */
}
.mainMenu {
    display: block; 
    width: 100%; height: 100%;
    font-size: 18px; font-weight: bold;
}
.hNav > ul > li:hover .mainMenu {
    color: #fff; background-color: #3cb149;
}
.subMenu {
    position: absolute; top: 40px; z-index: 5000;	/* 슬라이드보다 위쪽 */
    width: 100%; height: 120px;					/* 서브메뉴 전체 영역 설정 */
}
.subMenu li {
    width: 100%; height: 40px;					/* 서브메뉴 한 개 영역 설정 */
    text-align: center; line-height: 40px;
}
.subMenu li a {
    display: block; width: 100%; height: 100%;	/* 서브메뉴 링크영역 설정 */
    font-size: 14px; color: #fff;
}
.subMenu li a:hover {							/* 서브메뉴 마우스 오버 시 배경색 글자색 변경 */
    background-color: #ededed; color: #333;
}
.hNavBg {										/* 메뉴 배경 */
    position: absolute;
    top: 100px; left: 0; z-index: 4000;			/* 슬라이더보다 위 서브메뉴 아래 */
    width: 100%; height: 120px;
    background-color: #3cb149;					/* 배경색 지정 */
}

 

★ JAVASCRIPT

// 메뉴
    $('.subMenu, .hNavBg').slideUp(0);		/* 일단 들어가 있어 */
    
    $('.hNav').hover(function(){			/* 마우스 올리면 서브메뉴랑 배경 나와 */
       $('.subMenu, .hNavBg').stop().slideDown('fast');
    }, function (){							/* 다시 들어가 */
        $('.subMenu, .hNavBg').stop().slideUp('fast'); 
    });

 

 

슬라이드

 

★ HTML

<!-- 슬라이드-->
            <div class="slide">
                <ul>
                    <li>
                        <a href="#">
                            <img src="images/slide1.png" alt="슬라이드이미지1">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/slide2.png" alt="슬라이드이미지2">
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <img src="images/slide3.png" alt="슬라이드이미지3">
                        </a>
                    </li>
                </ul>
            </div>

 

★ CSS

.slide { 
    width: 1200px; height: 300px; 
    position: relative;			/* 슬라이드 위치 조절 */
    overflow: hidden;			/* 다른 슬라이드 이미지는 안 보이게 */
}
.slide ul {
    width: 3600px;				/* 슬라이드 이미지 3개 영역 */
    height: 300px;
    position: absolute;			/* 절대적 위치지정 */
    left: 0;					/* 첫번째 사진 */
}
.slide li {
    float: left;				/* 왼쪽으로 나열 처리 */
    width: 1200px; height: 300px;
}

 

★ JAVASCRIPT

    var num = 1;
    
    setInterval(function(){			/* 일정시간마다 해 */
       if(num<3) {
           $('.slide ul').animate({
              left: '-=' + 1200 	/* 다음 슬라이드 이미지 */
           },'slow');
           num++;
       } else {
           $('.slide ul').animate({
              left: 0 				/* 마지막 슬라이드 이미지면 첫번째 슬라이드 이미지 다시 */
           },'slow');
           num = 1;
       }
    }, 3000);						/* 3초마다 작업해 */

 

고생많으셨어요. 좋은 결과 있으시길 기원합니다.

 

관련포스트

 

그린복지재단

반응형
저작자표시

'컴퓨터자격증 > 웹디자인기능사' 카테고리의 다른 글

웹디자인기능사 실기 | 문제 풀이 B-3 (세계의 미술작품)  (0) 2022.03.14
웹디자인기능사 실기 | 문제 풀이 B-2 (대한투어)  (0) 2022.03.11
웹디자인기능사 실기 | 문제 풀이 C-1 (해운대 빛축제)  (0) 2022.03.08
웹디자인기능사 실기 | 문제 풀이 A-4 (유진건설)  (0) 2022.03.04
웹디자인기능사 실기 | 메뉴, 슬라이드, 본문 유형  (0) 2022.02.17
웹디자인기능사 실기 | 기본적인 와이어프레임 구조  (0) 2022.01.19
웹디자인기능사 실기 | 문제 풀이 B-1 (대한은행)  (0) 2021.08.10
웹디자인기능사 실기 | 주요 코드 정리  (2) 2021.08.04

관련글

댓글

티스토리툴바