1. 이클립스 실행 -> Ch14 폴더 생성
-> 여행사이트.html 파일과
css, font, images, js 폴더 4개 생성
2. images 폴더에는 선생님이 주신 이미지들을 넣는다
3. js폴더에는 jquery를 넣는다 (이전 글 참고)
4. 여행사이트.html에는 아래 코드 복붙
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<script type="text/javascript" src="js/jquery-3.6.0.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<header id="firstheader">
<!-- 시각장애인용 -->
<div id="skip"><a href="#">본문바로가기</a></div>
<!-- 로고 -->
<h1><a href="#"><img alt="여행사이트" src="images/여행로고.png"></a></h1>
<!-- 검색 -->
<form action="#" name="sform" method="get" id="sform">
<fieldset>
<legend class="skip">여행검색</legend>
<label for="sbox" class="skip">여행검색어 입력</label>
<input type="search" id="sbox" class="tbox" placeholder="여행 검색어 입력">
<input type="image" class="sbtn" src="images/search.gif" alt="검색">
</fieldset>
</form>
<!-- 상단메뉴 -->
<ul class="util">
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Contact</a></li>
</ul>
<!-- 페이지별 네비게이션 -->
<nav id="gnb">
<h1 class="skip">메인메뉴</h1>
<ul class="gnblist">
<li class="m m1"><a class="mm">Travel회사소개</a>
<ul>
<li><a href="#">회사소개</a></li>
<li><a href="#">vision</a></li>
</ul>
</li>
<li class="m m2"><a class="mm">여행소개</a>
<ul>
<li><a href="#">국내여행</a></li>
<li><a href="#">해외여행</a></li>
</ul>
</li>
<li class="m m3"><a class="mm">여행자 커뮤니티</a>
<ul>
<li><a href="#">설레는 여행준비</a></li>
<li><a href="#">여행자추천 여행</a></li>
<li><a href="#">여행친구 구하기</a></li>
</ul>
</li>
<li class="m m4"><a class="mm">여행자료실</a>
<ul>
<li><a href="#">국내여행자료</a></li>
<li><a href="#">해외여행자료</a></li>
</ul>
</li>
</ul>
<div class="allmenu"><a href="#">전체메뉴</a></div>
</nav>
<!-- 전체메뉴 -->
<nav id="allMenu_box">
<h1 class="skip">메인메뉴</h1>
<ul class="gnblist">
<li class="m m1"><a class="mm">Travel회사소개</a>
<ul>
<li><a href="#">회사소개</a></li>
<li><a href="#">vision</a></li>
</ul>
</li>
<li class="m m2"><a class="mm">여행소개</a>
<ul>
<li><a href="#">국내여행</a></li>
<li><a href="#">해외여행</a></li>
</ul>
</li>
<li class="m m3"><a class="mm">여행자 커뮤니티</a>
<ul>
<li><a href="#">설레는 여행준비</a></li>
<li><a href="#">여행자추천 여행</a></li>
<li><a href="#">여행친구 구하기</a></li>
</ul>
</li>
<li class="m m4"><a class="mm">여행자료실</a>
<ul>
<li><a href="#">국내여행자료</a></li>
<li><a href="#">해외여행자료</a></li>
</ul>
</li>
</ul>
<div class="allmenu"><a href="#">전체메뉴</a></div>
</nav>
</header>
</body>
</html>'IT 공부 > JavaScript' 카테고리의 다른 글
| 아이콘 참고 사이트 (0) | 2022.07.20 |
|---|---|
| Bootstrap(BS)를 활용한 블로그 페이지 (0) | 2022.07.20 |
| wow활용 (1) | 2022.07.18 |
| Jquery (1) | 2022.06.21 |
| geolocation (2) | 2022.06.21 |