1. 경로에 맞도록 파일 생성하기
[본인 이름 폴더]
[실습 날짜] → index.html
[css] - style.css
[img] - [logo] - 이미지 파일 저장 경로, 로고와 이미지 슬라이드용을 분리한다.
[javascript] - jquery.1.12.3.js
2.index.html / style.css / script.js 생성한 문서 기본형 맞추기
- index.html 기본형
<!doctype html> <!-- html5표준 정의 -->
<html>
<head>
<meta charset="utf-8" /> <!-- 인코딩 속성 정의 -->
<title>Untitled Document</title> <!-- 웹 문서 제목 -->
</head>
<body> <!-- 본문 시작 -->
</body>
</html>
- style.css의 기본형
@charset "utf-8";
/* CSS Document */
- script.js의 기본형
// JavaScript Document
3. 외부 링크로 연결짓기 <link> <script>
3-1 절대 주소로 jquery 연결하기 (온라인) : 편의를 위해서 수업 중에는 이것을 주로 쓴다.
아래 태그 head 태그 안에 삽입
<link rel="stylesheet" type="text/css" href="css/style.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>
- 최종 index.html
<!doctype html> <!-- html5표준 정의 -->
<html>
<head>
<meta charset="utf-8" /> <!-- 인코딩 속성 정의 -->
<link rel="stylesheet" type="text/css" href="css/style.css"> <!-- css 문서 연결 -->
<!-- jquery 문서 연결 -->
<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><!-- js 문서 연결 -->
<title>Untitled Document</title> <!-- 웹 문서 제목 -->
</head>
<body> <!-- 본문 시작 -->
</body>
</html>
3-2 상대 주소로 jquery 연결하기 (로컬) - 시험장에서는 이것을 써야 함.
(1) https://code.jquery.com/jquery-1.12.3.js 에 접속하여 [javascript]폴더 안에 파일 다운로드.
<head> 안에 아래 태그 삽입.
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="javascript/jquery-1.12.3.js" type="text/javascript"></script>
<script src="javascript/script.js" type="text/javascript" defer></script>
- 최종 index.html
<!doctype html> <!-- html5표준 정의 -->
<html>
<head>
<meta charset="utf-8" /> <!-- 인코딩 속성 정의 -->
<link rel="stylesheet" type="text/css" href="css/style.css"> <!-- css 문서 연결 -->
<script src="javascript/jquery-1.12.3.js" type="text/javascript"></script><!-- jquery 문서 연결 -->
<script src="javascript/script.js" type="text/javascript" defer></script><!-- js 문서 연결 -->
<title>Untitled Document</title> <!-- 웹 문서 제목 -->
</head>
<body> <!-- 본문 시작 -->
</body>
</html>
'웹디자인 기능사 시험예제 > 6) 시험 12 예제' 카테고리의 다른 글
| 웹 디자인 기능사 (5)번 레이아웃 B-1 대한은행 (0) | 2020.02.08 |
|---|---|
| 웹 디자인 기능사 (4)번 레이아웃 A-4 유진건설 (0) | 2020.02.08 |
| 웹 디자인 기능사 (3)번 레이아웃 A-3 강원천문대 (0) | 2020.02.08 |
| 웹 디자인 기능사 (2)번 레이아웃 A-2 green 복지재단 (2) | 2020.02.08 |
| 웹 디자인 기능사 (1)번 레이아웃 A-1 just 쇼핑몰 (0) | 2020.02.08 |
