학습] Creo.js 및 browser.creojs 불러오기 (웹에서 경로표기법)
□ 상대경로로 외부 라이브러리 파일 호출 방법
HTML에서 상대 경로는 현재 웹 페이지를 기준으로 다른 파일이나 리소스의 위치를 나타내는 방법입니다. 웹 페이지가 위치한 폴더를 기준으로 다른 파일의 위치를 지정하며, 파일 경로가 상대적으로 표시됩니다.현재 위치를 '나'로 기준을 삼고 상대를 찾는 표현 입니다.
1. 상대 경로의 장점
- 유연성: 웹 페이지의 위치가 변경되어도 상대 경로를 사용하면 관련된 파일들의 경로를 일일이 수정할 필요가 없습니다. 웹 페이지와 관련된 파일들이 함께 이동하면 상대 경로는 여전히 유효합니다.
- 간결성: 절대 경로에 비해 상대 경로는 일반적으로 더 짧고 간결하게 표현됩니다.
2. 상대 경로의 표현 방법
- 같은 폴더: 현재 웹 페이지와 같은 폴더에 있는 파일은 파일 이름만으로 접근할 수 있습니다. 예를 들어, image.jpg는 현재 웹 페이지와 같은 폴더에 있는 image.jpg 파일을 나타냅니다.
- 하위 폴더: 현재 웹 페이지가 위치한 폴더의 하위 폴더에 있는 파일은 폴더 이름과 파일 이름을 함께 사용하여 접근합니다. 예를 들어, images/image.jpg는 현재 웹 페이지가 위치한 폴더의 하위 폴더인 images 폴더 안에 있는 image.jpg 파일을 나타냅니다.
- 상위 폴더: 현재 웹 페이지가 위치한 폴더의 상위 폴더에 있는 파일은 ../를 사용하여 접근합니다. 예를 들어, ../image.jpg는 현재 웹 페이지가 위치한 폴더의 상위 폴더에 있는 image.jpg 파일을 나타냅니다. 상위 폴더가 여러 단계 위에 있는 경우에는 ../../와 같이 ../를 여러 번 사용할 수 있습니다.
3. 상대 경로 사용 예시
<!DOCTYPE html>
<html>
<head>
<title>상대 경로 예시</title>
</head>
<body>
<img src="images/logo.png" alt="로고">
<a href="about.html">소개 페이지로 이동</a>
</body>
</html>위 예시에서 images/logo.png는 현재 HTML 파일과 같은 폴더에 있는 images 폴더 안의 logo.png 파일을 나타내는 상대 경로입니다. about.html은 현재 HTML 파일과 같은 폴더에 있는 about.html 파일을 나타내는 상대 경로입니다.
절대주소 vs 상대주소 개념 정확히 이해하기 - 코딩웍스(Coding Works)님의 블로그 - 인프런 | 커뮤니
절대주소 vs 상대주소 개념 정확히 이해하기 - 안녕하세요. 코딩웍스입니다. 웹퍼블리싱을 시작하시는 분들이 혼란스러운 경우 중에 하나가 절대주소 vs 상대주소 개념입니다.실무에서 프로젝트
www.inflearn.com
□ Creo.js 및 browser.creojs 호출
반드시 상대 경로만 사용 할수 있습니다. 절대 경로는 사용 할수 없습니다. 되도록이면 폴더를 깊이를 적게 사용 합니다.
root 폴더에 index.html, Creo.js, browser.creojs 파일이 저장 되어 있습니다. 사이드 메뉴의 html은 하위 폴더에 있습니다.
하위 폴더의 html파일에서는 다음과 같이 정의 합니다.
▷예제 코드
<!DOCTYPE html>
<html lang="ko">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CreoJS Test WebSite</title>
<html>
<head>
<script src="../creojs.js"></script>
<script type="text/creojs" src="../browser.creojs"></script>
</head>
.
.
.
</html>
by korealinonkk@gmail.com