완성된 html의 노출되는 텍스트 부분들 전부를 <a href="#"></a>로 씌우면 된다.
완성된 index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>산업대학교</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.12.3.js" type="text/javascript" ></script>
<script src="javascript/script.js" type="text/javascript" defer></script>
</head>
<body>
<header>
<div class="wrap">
<div class="logo">
<img width="200" height="100" style="background:black" alt="" />
</div>
<nav>
<ul class="mainmenu">
<li>대학소개
<ul class="submenu">
<li>총장인사말</li>
<li>학교소개</li>
<li>홍보관</li>
<li>캠퍼스 안내</li>
</ul>
</li>
<li>입학안내
<ul class="submenu">
<li>수시모집</li>
<li>정시모집</li>
<li>편입학</li>
<li>재외국민</li>
</ul>
</li>
<li>정보서비스
<ul class="submenu">
<li>대학정보알림</li>
<li>정보공개</li>
<li>정보서비스안내</li>
</ul>
</li>
<li>커뮤니티
<ul class="submenu">
<li>공지사항</li>
<li>참여게시판</li>
<li>자료실</li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="bg"></div>
</header>
<section class="imgslide">
<ul class="rollings">
<li><img width="1200" height="300" style="background:blue" alt="" /></li>
<li><img width="1200" height="300" style="background:green" alt="" /></li>
<li><img width="1200" height="300" style="background:red" alt="" /></li>
</ul>
</section>
<div class="main">
<div class="notice">
<div class="title"><h3>공지사항</h3></div>
<div class="contents">
<table>
<thead>
<tr><td>순서</td><td>내용</td><td>작성자</td><td>날짜</td></tr>
</thead>
<tbody>
<tr><td>1</td><td>긴급 온라인 대체수업 안내</td><td>총무팀</td><td>03-03</td></tr>
<tr><td>2</td><td>3월 신입생오리엔테이션 안내</td><td>총무팀</td><td>03-02</td></tr>
<tr><td>3</td><td>2학기 전기 학위수여식 안내</td><td>홍보팀</td><td>02-28</td></tr>
</tbody>
<tfoot>
<tr><td colspan="4">더보기</td></tr>
</tfoot>
</table>
</div>
</div>
<div class="gallary">
<div class="title"><h3>갤러리</h3></div>
<div class="contents">
<img width="100" height="100" style="background:black" alt="" />
<img width="100" height="100" style="background:black" alt="" />
<img width="100" height="100" style="background:black" alt="" />
</div>
</div>
<div class="banner">
<img width="400" height="200" style="background:black" alt="" />
</div>
</div>
<footer>
<div class="wrap">
<div class="undermenu">
<p><span>천문대소개</span><span>인사말</span><span>오시는길</span><span>프로그램</span><span>관람시간표</span><span>이달의별자리</span><span>예약하기</span><span>예약확인</span><span>예약취소</span> <span>공지사항</span><span>방문후기</span><span>자유게시판</span>
</p>
</div>
<div class="copyright">
<p>Copyright © 2020 just shoppingMall Co.,Ltd. All Rights Reserved. </p>
</div>
<div class="family">
<p>패밀리사이트→</p>
</div>
</div>
</footer>
<div class="mlp">
<div class="popup">
<div class="heading"><h3>공지사항 안내</h3></div>
<div class="contents">
<img width="570" height="240" style="background:black" alt="" />
<p>공지사항과 관련된 내용이 들어갑니다.</p>
</div>
<div class="close">close</div>
</div>
</div>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>산업대학교</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.12.3.js" type="text/javascript" ></script>
<script src="javascript/script.js" type="text/javascript" defer></script>
</head>
<body>
<header>
<div class="wrap">
<div class="logo">
<a href="#"><img width="200" height="100" style="background:black" alt="" /></a>
</div>
<nav>
<ul class="mainmenu">
<li><a href="#">대학소개</a>
<ul class="submenu">
<li><a href="#">총장인사말</a></li>
<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="#">정시모집</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="#">참여게시판</a></li>
<li><a href="#">자료실</a></li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="bg"></div>
</header>
<section class="imgslide">
<ul class="rollings">
<li><a href="#"><img width="1200" height="300" style="background:blue" alt="" /></a></li>
<li><a href="#"><img width="1200" height="300" style="background:green" alt="" /></a></li>
<li><a href="#"><img width="1200" height="300" style="background:red" alt="" /></a></li>
</ul>
</section>
<div class="main">
<div class="notice">
<div class="title"><h3><a href="#">공지사항</a></h3></div>
<div class="contents">
<table>
<thead>
<tr><td><a href="#">순서</a></td><td><a href="#">내용</a></td><td><a href="#">작성자</a></td><td><a href="#">날짜</a></td></tr>
</thead>
<tbody>
<tr><td><a href="#">1</a></td><td><a href="#">긴급 온라인 대체수업 안내</a></td><td><a href="#">총무팀</a></td><td><a href="#">03-03</a></td></tr>
<tr><td><a href="#">2</a></td><td><a href="#">3월 신입생오리엔테이션 안내</a></td><td><a href="#">총무팀</a></td><td><a href="#">03-02</a></td></tr>
<tr><td><a href="#">3</a></td><td><a href="#">2학기 전기 학위수여식 안내</a></td><td><a href="#">홍보팀</a></td><td><a href="#">02-28</a></td></tr>
</tbody>
<tfoot>
<tr><td colspan="4"><a href="#">더보기</a></td></tr>
</tfoot>
</table>
</div>
</div>
<div class="gallary">
<div class="title"><h3><a href="#">갤러리</a></h3></div>
<div class="contents">
<a href="#"><img width="100" height="100" style="background:black" alt="" /></a>
<a href="#"><img width="100" height="100" style="background:black" alt="" /></a>
<a href="#"><img width="100" height="100" style="background:black" alt="" /></a>
</div>
</div>
<div class="banner">
<a href="#"><img width="400" height="200" style="background:black" alt="" /></a>
</div>
</div>
<footer>
<div class="wrap">
<div class="undermenu">
<p><span><a href="#">천문대소개</a></span><span><a href="#">인사말</a></span><span><a href="#">오시는길</a></span><span><a href="#">프로그램</a></span><span><a href="#">관람시간표</a></span><span><a href="#">이달의별자리</a></span><span><a href="#">예약하기</a></span><span><a href="#">예약확인</a></span><span><a href="#">예약취소</a></span><span><a href="#">공지사항</a></span><span><a href="#">방문후기</a></span><span><a href="#">자유게시판</a></span>
</p>
</div>
<div class="copyright">
<p><a href="#">Copyright © 2020 just shoppingMall Co.,Ltd. All Rights Reserved.</a></p>
</div>
<div class="family">
<p><a href="#">패밀리사이트→</a></p>
</div>
</div>
</footer>
<div class="mlp">
<div class="popup">
<div class="heading"><h3><a href="#">공지사항 안내</h3></div>
<div class="contents">
<a href="#"><img width="570" height="240" style="background:black" alt="" /></a>
<p><a href="#">공지사항과 관련된 내용이 들어갑니다.</a></p>
</div>
<div class="close">close</div>
</div>
</div>
</body>
</html>
아래처럼 모든 text, img에 <a href="#"></a>를 추가하면 된다.
'웹디자인 기능사 시험예제 > 6) 시험 12 예제' 카테고리의 다른 글
| 슬라이드 쇼 디자인 패턴 만들기. (0) | 2020.04.03 |
|---|---|
| 로고 디자인 패턴 3가지 (0) | 2020.04.03 |
| 웹 디자인 기능사 (12)번 레이아웃 C-4 Vallery Festival (0) | 2020.02.08 |
| 웹 디자인 기능사 (11)번 레이아웃 C-3 남도맛기행축제 (0) | 2020.02.08 |
| 웹 디자인 기능사 (10)번 레이아웃 C-2 부여 가을연꽃축제 (0) | 2020.02.08 |
