[웹디자인기능사 실기] 기출문제(1)

728x90

안녕하세요 Foxy현입니다.

요즘 간단한 Web 공부를 하게되면서 접한 '웹디자인기능사' 실기 문제에 대한 코드 리뷰를 해보겠습니다!

많은 시간을 투자해서 공부를 한 게 아니라 클론코딩 식으로 공부하면서 조금이라도 모르는 부분이 있으면 검색해서 공부하는 과정 중이구요! 지금 이 실기 공부 또한 공부에 큰 도움이 될 것 같아서 진행중입니다.

이번에 만들어 볼 프로젝트는 보시는 바와 같습니다.

시험지는 몇 장의 도면으로 구성되어 있는데요, 아래 하나하나 읽어보면서 주의사항을 파악해야 하고, 요구사항에 따라 사이트를 만들어야 합니다.

자, 이제 시작해볼까요?

저는 먼저, HTML 파일을 만들고 가장 큰 구조부터 만들고 시작합니다.

크게 header, img slide, contents, footer 영역으로 나눠봤습니다.

개인마다 자유겠지만, 저는 큼직큼직하게 만들어두고, 하나씩 추가하는 게 편하더라구요.

<!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>Document</title>
</head>
<body>
    <!-- header -->
    <header></header>
    <!-- img slide -->
    <div class="imgslide"></div>
    <!-- contents -->
    <div class="contents"></div>
    <!-- footer -->
    <footer></footer>
</body>
</html>

헤더 영역에 로고와 메뉴 바가 들어갈 자리를 만들어줍니다.

<header>
        <div class="top">
            <div class="logo">로고</div>
            <nav class="menu">메뉴</nav>
        </div>
</header>

contents 영역에는 공지사항, 갤러리, 바로가기 등이 있겠네요

<div class="contents">
        <div class="notice">공지사항</div>
        <div class="gallery">갤러리</div>
        <div class="shortcut">바로가기</div>
</div>

footer 영역도 추가해줍니다.

<footer>
        <div class="bottom">
            <div class="btlogo">로고</div>
            <div class="copy">Copyright</div>
            <div class="familysite">패밀리사이트</div>
        </div>
</footer>

지금까지의 결과입니다. 위치도 그렇고 뭐가뭔지 모르겠네요. CSS 연결을 해서 조정을 해줘야 합니다.

먼저 CSS 파일을 생성해주고, link 태그를 이용해서 html 파일과 연결시켜줍니다.

<link rel="stylesheet" href="CSS/style.css">

먼저 모든 엘리먼트에 적용되게 CSS를 초기화 해줍니다.

@charset "UTF-8";

/* reset */
*{
    margin: 0 auto;
    padding: 0;
    list-style: none;
    font-family: "맑은 고딕";
    color: #333333;
}

margin: 0 auto = 좌우 바깥 여백을 자동 할당 시켜 중앙 정렬
padding : 0 = 안쪽 여백 없앰
list-style:none = 목록 스타일이 나타나지 않음

color와 같은 경우 위의 요구사항 대로 설정해준겁니다!

body{
    width: 1000px;
    height: 650px;
    background-color: #ffffff;
    font-size: 20px;
}

우리가 만들 페이지가 들어갈 body 태그 또한 기본 설정을 해줍니다.

a{
    text-decoration: none;
    display: block;
}

a는 인라인 요소로서 줄바꿈이 되지 않고 나열한 요소가 한 줄에 가로로 나타납니다.

따라서 인라인 요소를 줄바꿈 되어 나타나는 블록 요소로 나타나도록 display:block 을 지정합니다.

header {}
.top {}
.imgslide {}
.contents {}
footer {}
.bottom {}

처음에 우리가 만들었던 큼직한 구조에 대한 CSS를 까먹지 않도록 미리 만들어둡니다.

header {float: left;}
.top {
    float: left;
    width: 200px;
    height: 650px;
    background: lightblue;
}
.imgslide {
    float: right;
    width: 800px;
    height: 350px;
    background: pink;
}
.contents {
    float: right;
    width: 800px;
    height: 200px;
    background: greenyellow;
}
footer {float: right;}
.bottom {
    float: right;
    width: 800px;
    height: 100px;
    background: rgb(174, 134, 174);
}

각 레이아웃을 float을 사용하여 위치에 맞게 배치하도록 합니다.

top의 height가 650px인 이유는 위의 와이어 프레임에 제시된 각 높이를 더한 값입니다.(350+200+100)

또한 top의 width를 200으로 지정했기 때문에 나머지 레이아웃의 width는 800이 됩니다.(1000-200)

보기 편하게 배경색을 줘서 각 레이아웃을 구별하도록 합니다.

레이아웃 배치까지 끝났으면 세부적인 영역들을 만들어줘야 합니다.

.logo{
    float: left;
    width: 200px;
    height: 40px;
    margin-top: 30px;
    margin-bottom: 30px;
}
.menu{
    float: left;
}

header 부분의 logo와 menu 부분입니다.

.notice{
    float: left;
    width: 300px;
    height: 200px;
}
.gallery{
    float: left;
    width: 300px;
    height: 200px;
}
.shortcut{
    float: left;
    width: 200px;
    height: 200px;
}

contents 부분의 3가지 content부분입니다.

.btlogo{
    float: left;
    width: 200px;
    height: 100px;
}
.copy{
    float: left;
    width: 400px;
    height: 100px;
}
.familysite{
    float: left;
    width: 200px;
    height: 100px;
}

마지막으로 footer 영역입니다.

지금까지의 결과네요.

이제 전체적인 구조는 잡혔습니다! 혹시라도 보고 따라 치시는 분들 고생하셨으니 5분이라도 쉬는 시간을 가져볼까요??

자!! Header 영역의 지시사항을 지켜봅시다.

먼저 로고를 추가해볼게요.

먼저 제공해주는 logo.png 파일을 열구요

https://license.youngjin.com/artyboard/mboard.asp?Action=view&strBoardID=Pds_g&intPage=1&intCategory=0&strSearchCategory=|s_name|s_subject|&strSearchWord=&intSeq=109593

이기적 영진닷컴 수험서 커뮤니티

<공지 사항> Q넷에 22년 3월 2일자로 시험에서 제공하는 소프트웨어 목록이 변경되었음을 알리는 공지가 올라왔습니다. 드림위버를 더 이상 제공하지 않는다고 합니다. 웹디자인기능사 실기 기

license.youngjin.com

파일은 여기서 받아올 수 있습니다.

또한 포토샵을 이용해서 작업을 할 예정이니 무료 체험판 혹은 유료로 다운로드 받아와주세요.

먼저 Layer -> Layer Style -> Gradient Overlay에서 그레이디언드 색을 지정해줍니다.

또한 우리가 CSS 에서 설정한 픽셀만큼의 크기를 지정해줍니다.

[이미지 -> 이미지 크기]

이제 파일을 저장하고, VScode에 옮겨줍니다.

<div class="logo">
       <a href="#">
           <img src="img/logo.png" alt="로고">
       </a>
</div>

html파일에 img 태그를 사용하여 넣어줍니다.

잘 들어와있네요. 픽셀 크기도 맞춰줌으로써 사이즈도 딱 맞는 것을 볼 수 있었습니다.

alt = 이미지의 속성
<a href="#"> = 임시링크 추가

메뉴 바도 만들어 주겠습니다.

<nav class="menu">
                <ul class="navi">
                    <li><a href="#">축제소개</a>
                        <ul class="submenu">
                            <li><a href="#">Festival 소개</a></li>
                            <li><a href="#">행사장 안내</a></li>
                            <li><a href="#">조직 위원회</a></li>
                        </ul>
                    </li>
                    <li><a href="#">예약안내</a>
                        <ul class="submenu">
                            <li><a href="#">예약하기</a></li>
                            <li><a href="#">예약확인/취소</a></li>
                            <li><a href="#">단체예약문의</a></li>
                        </ul>
                    </li>
                    <li><a href="#">아티스트</a>
                        <ul class="submenu">
                            <li><a href="#">박효신</a></li>
                            <li><a href="#">Lauv</a></li>
                            <li><a href="#">Foxy현</a></li>
                            <li><a href="#">keshi</a></li>
                        </ul>
                    </li>
                    <li><a href="#">커뮤니티</a>
                        <ul class="submenu">
                            <li><a href="#">공지사항</a></li>
                            <li><a href="#">사진갤러리</a></li>
                            <li><a href="#">영상갤러리</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>

아직 스타일을 지정해주지 않았기 때문에 메뉴 모양처럼 보이지 않고, 일렬로 세워진 모습으로 보일겁니다.

li = 용어를 설명하는 목록
ul = 순서가 필요없는 목록

이런 모양을 만들기 위해 CSS 작업을 해야합니다!

header {
    float: left;
    position: absolute;
}

먼저, header 속성에 다음 속성을 추가하여 메뉴 전체의 영역의 위치를 고정합니다.

.menu{
    float: left;
    top: 100px;
    left: 10px;
    position: absolute;
    text-align: center;
    z-index: 1;
}

메뉴 바의 전체 폭과 여백을 지정합니다.

.navi>li{
    float:left ;
    width: 180px;
}
.navi>li>a{
    width: 180px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    font-weight: bold;
    background-color: #333333;
    color: #ffffff;
}
.navi>li>a:hover{
    background-color: #eeeeee;
    color: #000000;
}

.navi>li>a:hover = 마우스를 올리면 색이 변함
line-height를 height와 같은 값을 주면 글자가 세로로 정렬됩니다. 이때 글자 사이즈(16px) 기준으로 글자 위아래 여백이 같게 조정됩니다. 40-16px = 24px니까 위아래로 12px 여백이 생기겠네요.

submenu클래스의 스타일도 지정합니다.

.submenu{
    float: left;
    width: 180px;
    height: 100%;
    left: 180px;
    top: 0px;
    position: absolute;
    background-color: #cccccc;
    display: none;
    z-index: 1;
}
.submenu>li>a{
    width: 180px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    font-weight: bold;
    background-color: #cccccc;
    color: #ffffff;
}
.submenu>li>a:hover{
    background-color: #999999;
    color: #ffff00;
}

height:100% = 서브 메뉴 영역 전체의 높이는 무조건 상위 컨테이너 메인 메뉴의 요소들을 기준으로 같은 높이로 나타냄
left:180px = navi에서 180px로 나타냈기 때문에 180px를 떨어져서 나타나게합니다.

sub 메뉴에 대한 부분은 display:none으로 인해 안보이게 되는데 js 코드를 추가해서 작업해야 합니다.

메뉴에 슬라이드 다운 기능을 구현해보겠습니다.

제공받은 jquery 파일을 JS 폴더에 넣은 후 JS 폴더에서 js파일을 생성합니다.

html파일과 js 파일을 연결해줍니다.

<script src="JS/jquery-1.12.3.js"></script>
<script src="JS/script.js" defer type="text/javascript"></script>

js파일에는 슬라이드 다운 기능이 동작하도록 입력합니다.

jQuery(document).ready(function(){
    $('.navi>li').mouseover(function(){
        $(this).find('.submenu').stop().slideDown(500);
    }).mouseout(function(){
        $(this).find('.submenu').stop().slideUp(500);
    });
});

jQuery = HTML 요소를 선택한 후 그 요소에 수행할 액션을 지정함
$(this) = 현재 선택된 요소를 가리킴 => navi>li
find(.'submenu') = 선택된 요소의 자식 요소 중 .submenu와 일치하는 요소를 찾아 반환
stop() = 현재 수행하고 있는 애니메이션 동작 즉시 중단
slideDown , slideUp = 숫자가 클수록 천천히 애니메이션이 동작

잘 동작하네요!!

여기까지 간단한 js 동작 연결이였습니다.

이제 메뉴 바는 대충 완성된 것 같아요

다음 이미지 슬라이드를 넣어줄 차례입니다

<div class="imgslide">
        <a href="#">
            <img src="img/img1.jpg" alt="이미지1">
            <span class="imgtext">WorldFestival1</span>
        </a>
        <a href="#">
            <img src="img/img2.jpg" alt="이미지2">
            <span class="imgtext">WorldFestival2</span>
        </a>
        <a href="#">
            <img src="img/img3.jpg" alt="이미지3">
            <span class="imgtext">WorldFestival3</span>
        </a>
</div>

.imgslide {
    float: right;
    width: 800px;
    height: 350px;
    background: pink;
    position: relative;
}
.imgslide>a{
    display: block;
    position: absolute;
}
.imgslide span{
    width: 160px;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    left: 40%;top: 45%;
    position: absolute;
    background-color: rgba(200,200,200,0.5);
}

position: relative = 기본값 위치에서 상대적으로 위치를 지정함
position:absolute = a 요소에 지정하였으니 imgslide를 기준으로 삼아 absolute가 절대적인 좌표값을 가지게 됨.
display:block = 요소 앞뒤로 줄바꿈 되도록 함
left:40% = width가 800px인데 span이 160px이므로 640px이 남음 양쪽 320px라고 한다고하면 left:40%에 위치

이제 이 3개의 이미지를 js를 사용하여 FadeOut/FadeIn 기능을 구현할 것이다.

$('.imgslide a:gt(0)').hide();
    setInterval(function(){
        $('.imgslide a:first-child')
        .fadeOut(1000)
        .next('a')
        .fadeIn(1000)
        .end()
        .appendTo('.imgslide');
},3000);

gt(index)는 index 값보다 더 큰 값을 가진 요소들을 모두 선택함 => 0보다 큰 1,2,3 번째 요소를 모두 숨김
setInterval(function{},3000) = 3000ms(3초)마다 실행
next('a').fadeIn = 다음 요소를 선택하여 페이드인 실행
end = 이전 요소를 선택
appendTo = 선택한 요소를 imgslide 선택지의 요소의 자식 요소로 추가

※ 요소들의 속성 값은 시험자가 마음대로 설정해도 된다.

공지사항 및 갤러리, 바로가기를 세부 영역별 지시사항을 지켜보자.

먼저 공지사항 부분입니다.

<div class="contents">
        <div class="notice">
            <div class="tab"><h4>공지사항</h4></div>
            <ul>
                <li>
                    <a href="#">Vallery Festival 공지1<span>2022.08.03</span></a>
                </li>
                <li>
                    <a href="#">Vallery Festival 공지2<span>2022.08.03</span></a>
                </li>
                <li>
                    <a href="#">Vallery Festival 공지3<span>2022.08.03</span></a>
                </li>
                <li>
                    <a href="#">Vallery Festival 공지4<span>2022.08.03</span></a>
                </li>
            </ul>
</div>

.tab{
    float: left;
    width: 300px;
}
.notice h4{
    float: left;
    height: 50px;
    line-height: 50px;
}
.notice ul{
    float: left;
    width: 280px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
}
.notice li span{
    float: right;
}
.notice li:hover{
    font-weight: bold;
}

height와 line-height를 동일하게 적욤함으로서 세로로 정렬시킴

다음은 갤러리 부분입니다

<div class="contents">
        <div class="notice">
            <div class="tab"><h4>공지사항</h4></div>
            <ul>
                <li>
                    <a href="#">Vallery Festival 공지1<span>2022.08.03</span></a>
                </li>
                <li>
                    <a href="#">Vallery Festival 공지2<span>2022.08.03</span></a>
                </li>
                <li>
                    <a href="#">Vallery Festival 공지3<span>2022.08.03</span></a>
                </li>
                <li>
                    <a href="#">Vallery Festival 공지4<span>2022.08.03</span></a>
                </li>
            </ul>
        </div> 
        <div class="gallery">
            <div class="tab"><h4>갤러리</h4></div>
        <ul>
            <li><a href="#"><img src="img/gallery1.jpg" alt="갤러리1"></a></li>
            <li><a href="#"><img src="img/gallery2.jpg" alt="갤러리2"></a></li>
            <li><a href="#"><img src="img/gallery3.jpg" alt="갤러리3"></a></li>
        </ul>
</div>

.gallery h4{
    float:left ;
    height: 50px;
    line-height: 50px;
}
.gallery ul li{
    float: left;
    padding: 10px;
    margin-top: 10px;
}
.gallery img{
    width: 80px;
    height: 80px;
}
.gallery li:hover{
    opacity: 0.5;
}

마지막으로 바로가기 부분입니다!

<div class="shortcut">
            <a href="#">
                <img src="img/shortcut.jpg" alt="바로가기">
                <span class="sctext">바로가기</span>
            </a>
</div>

.shortcut img{
    float: right;
    width: 180px;height: 180px;
    padding: 10px;
}
.sctext{
    width: 100px;
    text-align: center;
    font-weight: bold;
    position: absolute;
    background-color: rgba(255,255,255,0.5);
    margin-top: 85px;
    margin-left: 50px;
}

이제 header 와 contents 부분이 완성되었습니다.

이제 모달 레이어 팝업창과 footer를 해보자. 먼저 footer 부분부터 해볼까요?

먼저 로고의 채색을 빼줍니다. 포토샵을 열고,

이미지 -> 조정 -> 채도 감소를 선택하여 채도를 감소합니다.

<footer>
        <div class="bottom">
            <div class="btlogo">
                <a href="#">
                    <img src="img/logo_footer.png" alt="하단로고">
                </a></div>
            <div class="copy">COPYRIGHT @by Foxyhyun</div>
            <div class="familysite">
                <select name="sitelist">
                    <option value="#">패밀리사이트1</option>
                    <option value="#">패밀리사이트2</option>
                    <option value="#">패밀리사이트3</option>
                </select>
            </div>
        </div>
</footer>

.btlogo img{
    float: left;
    width: 200px;height: 40px;
    margin-top: 25px;
    margin-left: 10px;
}

.copy{
    float: left;
    width: 400px;
    height: 100px;
    text-align: center;
    font-size: 14px;
    line-height: 100px;
}

.familysite select{
    float: right;
    height: 30px;
    width: 190px;
    margin-top: 35px;
    margin-right: 30px;
    font-size: 14px;
}

select를 쓰면 선택할 수 있는 창이 나옵니다

마지막으로 모달 레이어 팝업창입니다.

세부 지시사항을 보면 첫 번째 콘텐츠를 클릭할 경우, 레이어 팝업창이 나타나며, 닫기 버튼을 누르면 해당 팝업창이 닫힙니다.

<div id="modal">
        <div class="modal_up">
            <div class="uptitle">워터밤 축제</div>
            <div class="upbody">
                광주광역시 수완동 호수공원에서 호수공원 10주년을 맞이하여 워터밤 행사가 열립니다.
                워터밤 행사, 공연 등 많은 참여 바랍니다.
            </div>
            <div class="btn">닫기</div>
        </div>
</div>

$('.notice li:first').click(function(){
        $("#modal").addClass("active");
    });
    $('.btn').click(function(){
        $("#modal").removeClass("active");
});

("notice li:first").click() = notice 요소의 후손 요소 중에서 첫 번째 요소를 클릭
addClass = #modal과 일치하는 요소에 active 요소 추가
removeClass = #modal의 acitive 삭제

#modal{
    width: 100%;height: 100%;
    position: absolute;
    left: 0px;top:0px;
    background: rgba(0,0,0,0.6);
    z-index: 1;
    display: none;
}
#modal.active{
    display: block;
}
.modal_up{
    width: 400px;height: 300px;
    position: fixed;
    left: 40%;
    top: 30%;
    background-color: #ffffff;
}
.uptitle{
    margin-top: 30px;
    text-align: center;
    line-height: 16px;
    font-size: 20px;
    font-weight: bold;
}
.upbody{
    padding: 30px;
    text-align: center;
    font-size: 16px;
    line-height: 30px;
}
.btn{
    width: 80px;height: 20px;
    display: block;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    background-color: #cccccc;
    position: absolute;
    right: 10px;
    bottom: 10px;
}

#modal 에서 display:none을 지정함으로서 처음엔 나타나지 않도록 지정함
#modal.active = modal에 active 클래스가 추가되면 나타냄(display:block)

자 !!! 이제 모든 과정이 완료됐습니다!!

지금까지 고생많으셨습니다.

지금까지의 코드입니다

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>Document</title>
    <link rel="stylesheet" href="CSS/style.css">
    <script src="JS/jquery-1.12.3.js"></script>
    <script src="JS/script.js" defer type="text/javascript"></script>
</head>
<body>
    <!-- header -->
    <header>
        <div class="top">
            <div class="logo">
                <a href="#">
                    <img src="img/logo.png" alt="로고">
                </a>
            </div>
            <nav class="menu">
                <ul class="navi">
                    <li><a href="#">축제소개</a>
                        <ul class="submenu">
                            <li><a href="#">Festival 소개</a></li>
                            <li><a href="#">행사장 안내</a></li>
                            <li><a href="#">조직 위원회</a></li>
                        </ul>
                    </li>
                    <li><a href="#">예약안내</a>
                        <ul class="submenu">
                            <li><a href="#">예약하기</a></li>
                            <li><a href="#">예약확인/취소</a></li>
                            <li><a href="#">단체예약문의</a></li>
                        </ul>
                    </li>
                    <li><a href="#">아티스트</a>
                        <ul class="submenu">
                            <li><a href="#">박효신</a></li>
                            <li><a href="#">Lauv</a></li>
                            <li><a href="#">Foxy현</a></li>
                            <li><a href="#">keshi</a></li>
                        </ul>
                    </li>
                    <li><a href="#">커뮤니티</a>
                        <ul class="submenu">
                            <li><a href="#">공지사항</a></li>
                            <li><a href="#">사진갤러리</a></li>
                            <li><a href="#">영상갤러리</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- img slide -->

    <div class="imgslide">
        <a href="#">
            <img src="img/img1.jpg" alt="이미지1">
            <span class="imgtext">WorldFestival1</span>
        </a>
        <a href="#">
            <img src="img/img2.jpg" alt="이미지2">
            <span class="imgtext">WorldFestival2</span>
        </a>
        <a href="#">
            <img src="img/img3.jpg" alt="이미지3">
            <span class="imgtext">WorldFestival3</span>
        </a>
    </div>
    <!-- contents -->

    <div class="contents">
        <div class="notice">
            <div class="tab"><h4>공지사항</h4></div>
            <ul>
                <li>
                    <a href="#">Vallery Festival 공지1<span>2022.08.03</span></a>
                </li>
                <li>
                    <a href="#">Vallery Festival 공지2<span>2022.08.03</span></a>
                </li>
                <li>
                    <a href="#">Vallery Festival 공지3<span>2022.08.03</span></a>
                </li>
                <li>
                    <a href="#">Vallery Festival 공지4<span>2022.08.03</span></a>
                </li>
            </ul>
        </div> 
        <div class="gallery">
            <div class="tab"><h4>갤러리</h4></div>
        <ul>
            <li><a href="#"><img src="img/gallery1.jpg" alt="갤러리1"></a></li>
            <li><a href="#"><img src="img/gallery2.jpg" alt="갤러리2"></a></li>
            <li><a href="#"><img src="img/gallery3.jpg" alt="갤러리3"></a></li>
        </ul>
        </div>
        
        <div class="shortcut">
            <a href="#">
                <img src="img/shortcut.jpg" alt="바로가기">
                <span class="sctext">바로가기</span>
            </a>
        </div>
    </div>

    <!-- modal -->
    <div id="modal">
        <div class="modal_up">
            <div class="uptitle">워터밤 축제</div>
            <div class="upbody">
                광주광역시 수완동 호수공원에서 호수공원 10주년을 맞이하여 워터밤 행사가 열립니다.
                워터밤 행사, 공연 등 많은 참여 바랍니다.
            </div>
            <div class="btn">닫기</div>
        </div>
    </div>

    <!-- footer -->
    <footer>
        <div class="bottom">
            <div class="btlogo">
                <a href="#">
                    <img src="img/logo_footer.png" alt="하단로고">
                </a></div>
            <div class="copy">COPYRIGHT @by Foxyhyun</div>
            <div class="familysite">
                <select name="sitelist">
                    <option value="#">패밀리사이트1</option>
                    <option value="#">패밀리사이트2</option>
                    <option value="#">패밀리사이트3</option>
                </select>
            </div>
        </div>
    </footer>
</body>
</html>

CSS

@charset "UTF-8";

/* reset */
*{
    margin: 0 auto;
    padding: 0;
    list-style: none;
    font-family: "맑은 고딕";
    color: #333333;
}

body{
    width: 1000px;
    height: 650px;
    background-color: #ffffff;
    font-size: 20px;
}
a{
    text-decoration: none;
    display: block;
}

/* header  */
header {
    float: left;
    position: absolute;
}
.top {
    float: left;
    width: 200px;
    height: 650px;
}
.logo{
    float: left;
    width: 200px;
    height: 40px;
    margin-top: 30px;
    margin-bottom: 30px;
}
.menu{
    float: left;
    top: 100px;
    left: 10px;
    position: absolute;
    text-align: center;
    z-index: 1;
}
.navi>li{
    float:left ;
    width: 180px;
}
.navi>li>a{
    width: 180px;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
    font-weight: bold;
    background-color: #333333;
    color: #ffffff;
}
.navi>li>a:hover{
    background-color: #eeeeee;
    color: #000000;
}
.submenu{
    float: left;
    width: 180px;
    height: 100%;
    left: 180px;
    top: 0px;
    position: absolute;
    background-color: #cccccc;
    display: none;
    z-index: 1;
}
.submenu>li>a{
    width: 180px;
    height: 40px;
    line-height: 40px;
    font-size: 14px;
    font-weight: bold;
    background-color: #cccccc;
    color: #ffffff;
}
.submenu>li>a:hover{
    background-color: #999999;
    color: #ffff00;
}
/* header */


.imgslide {
    float: right;
    width: 800px;
    height: 350px;
    position: relative;
}
.imgslide>a{
    display: block;
    position: absolute;
}
.imgslide span{
    width: 160px;
    text-align: center;
    color: #ffffff;
    font-weight: bold;
    left: 40%;top: 45%;
    position: absolute;
    background-color: rgba(200,200,200,0.5);
}
/* contents */
.contents {
    float: right;
    width: 800px;
    height: 200px;
}
.tab{
    float: left;
    width: 300px;
}
.notice h4{
    float: left;
    height: 50px;
    line-height: 50px;
}
.notice ul{
    float: left;
    width: 280px;
    height: 30px;
    line-height: 30px;
    font-size: 14px;
}
.notice li span{
    float: right;
}
.notice li:hover{
    font-weight: bold;
}
.notice{
    float: left;
    width: 300px;
    height: 200px;
}
.gallery{
    float: left;
    width: 300px;
    height: 200px;
}
.gallery h4{
    float:left ;
    height: 50px;
    line-height: 50px;
}
.gallery ul li{
    float: left;
    padding: 10px;
    margin-top: 10px;
}
.gallery img{
    width: 80px;
    height: 80px;
}
.gallery li:hover{
    opacity: 0.5;
}
.shortcut{
    float: left;
    width: 200px;
    height: 200px;
}
.shortcut img{
    float: right;
    width: 180px;height: 180px;
    padding: 10px;
}
.sctext{
    width: 100px;
    text-align: center;
    font-weight: bold;
    position: absolute;
    background-color: rgba(255,255,255,0.5);
    margin-top: 85px;
    margin-left: 50px;
}
/* contents */

/* footer */
footer {float: right;}
.bottom {
    float: right;
    width: 800px;
    height: 100px;
    background: #cccccc;
}
.btlogo{
    float: left;
    width: 200px;
    height: 100px;
}
.btlogo img{
    float: left;
    width: 200px;height: 40px;
    margin-top: 25px;
    margin-left: 10px;
}
.copy{
    float: left;
    width: 400px;
    height: 100px;
    text-align: center;
    font-size: 14px;
    line-height: 100px;
}
.familysite{
    float: left;
    width: 200px;
    height: 100px;
}
.familysite select{
    float: right;
    height: 30px;
    width: 190px;
    margin-top: 35px;
    margin-right: 30px;
    font-size: 14px;
}
#modal{
    width: 100%;height: 100%;
    position: absolute;
    left: 0px;top:0px;
    background: rgba(0,0,0,0.6);
    z-index: 1;
    display: none;
}
#modal.active{
    display: block;
}
.modal_up{
    width: 400px;height: 300px;
    position: fixed;
    left: 40%;
    top: 30%;
    background-color: #ffffff;
}
.uptitle{
    margin-top: 30px;
    text-align: center;
    line-height: 16px;
    font-size: 20px;
    font-weight: bold;
}
.upbody{
    padding: 30px;
    text-align: center;
    font-size: 16px;
    line-height: 30px;
}
.btn{
    width: 80px;height: 20px;
    display: block;
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    background-color: #cccccc;
    position: absolute;
    right: 10px;
    bottom: 10px;
}

JavaScript

jQuery(document).ready(function(){
    $('.navi>li').mouseover(function(){
        $(this).find('.submenu').stop().slideDown(500);
    }).mouseout(function(){
        $(this).find('.submenu').stop().slideUp(500);
    });

    $('.imgslide a:gt(0)').hide();
    setInterval(function(){
        $('.imgslide a:first-child')
        .fadeOut(1000)
        .next('a')
        .fadeIn(1000)
        .end()
        .appendTo('.imgslide');
    },3000);
    $('.notice li:first').click(function(){
        $("#modal").addClass("active");
    });
    $('.btn').click(function(){
        $("#modal").removeClass("active");
    });
});

지금까지 이기적 웹디자인기능사 실기 Test1의 실습 과정이였습니다.

고생하셨습니다

728x90

저작자표시

'Project' 카테고리의 다른 글

[ 환경방사선 예측 프로그램 ] 3. LSTM 모델 활용하여 예측하기 (0)	2023.03.08
[ 환경방사선 예측 프로그램 ] 2. 데이터 전처리 및 병합 (0)	2023.02.18
[ 환경방사능 예측 프로그램 ] 1. 공공 데이터 포털 API 가져오기 (0)	2023.02.18
[웹디자인 기능사 실기] 기출문제(2) (0)	2022.08.09

FoxyProgramming

[웹디자인기능사 실기] 기출문제(1)

HTML

CSS

JavaScript

'Project' 카테고리의 다른 글

티스토리툴바

[웹디자인기능사 실기] 기출문제(1)

HTML

CSS

JavaScript

'Project' 카테고리의 다른 글

관련글

티스토리툴바