될때까지

개념정리 :: 절대경로 vs 상대경로? 본문

학습/개념정리

개념정리 :: 절대경로 vs 상대경로?

랖니 2022. 5. 22. 23:21
728x90
이 블로그에 정리되어있는 모든 개념들은 학습 개념으로 혼자 정리한 내용입니다.
잘못 기술한 부분이 있을 수 있으니 발견하시면 언제든지 지적해주세요😄

🦸‍♀️ 개념정리

- 절대경로(Absolute path) : 루트 디렉토리(최상위 디렉토리)를 기준으로 찾아가는 경로 (import를 하는 파일이나 경로에 상관없이 항상 경로가 동일하다.). 한가지 단점으로는 경로가 길어질 수 있다.이를 보완하기 위해 상대경로를 사용한다.

- 상대경로(Relative path) : 나의 현재 위치를 기준으로 찾아가는 경로다. 경로의 길이를 줄여준다는 장점은 있지만, 헷갈리기 쉽고 파일의 위치가 변경되면 경로 위치도 변경되어야한다는 단점이 있기 때문에 절대경로를 사용하는 게 권장된다. 

    1)  ./   - 현재 내가 속해있는 웹 페이지의 폴더로 이동한다.

    2) ../  - 현재 내 위치보다 상위 폴더(부모)로 이동한다. 

상대경로 개념이 나에게는 조금 생소하게 다가와서, 이에 대한 추가 예시를 작성해봤다.

 

🛴 예시

index 페이지 기준으로 살펴보자. body태그 안의 a태그들이 페이지간의 이동을 할 수 있게 hypertext reference를 추가하고 싶은데 경로를 어떻게 작성해야 할까? 위의 개념정리에 적었듯이 내 웹페이지(index.html)를 기준으로 찾아가고자 하는 페이지의 경로를 쩜하나, 쩜두개 그리고 슬래쉬로 찾아가면 된다. 

index.html 페이지를 기준으로, page1은 myfolder안에 위치해있다. 여기서 myfolder는 index.html과 같은 폴더(TEST)안에 있는 이웃이기 때문에 myfolder/page1.html로 작성한다.

나머지 태그들도 똑같이 경로를 찾아가면 된다. index.html파일은 최상위 폴더(루트 디렉토리)에 있기 때문에 쩜을 사용할 필요가 없었다. 그럼 이번에는 폴더안의 폴더 안에 있는 page3.html을 기준으로 실습을 해보자.

<!DOCTYPE html>
<html lang="en">
<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>
    <h2>여기는 page3입니다.</h2>
    <a href="../../index.html">index</a> <!-- 상위폴더 myfolder로 나가고 상위폴더 TEST로 나가기 => ../를 2번 사용-->
    <a href="../page1.html">page1</a>  <!-- 상위 폴더 myfolder로 나가기 => ../ 사용-->
    <a href="../../page2.html">page2</a>   <!--상위폴더 myfolder나가고 상위폴더 TEST로 나가기 => ../를 2번 사용-->
    <a href="page3.html">page3</a>  
    <a href="../page4.html">page4</a>   <!--상위폴더 myfolder로 나가기 => ../ 사용-->
</body>
</html>

참고할 경로

page3기준으로 index와 page2는 1️⃣myfolder2폴더를 나가고 2️⃣myfolder폴더도 나가야한다. 부모 폴더를 2번 나가야 index와 page2파일이 있기 때문에 ../을 2번 작성한다.

page3기준으로 page1과 page4는 1️⃣myfolder2 폴더만 나가면 두 파일이 있기 때문에 ../를 1번 작성하면 된다.

 

예시 파일을 만들어보니까 ../과 ./의 뜻을 정확하게 알았다. ../은 현재 내 파일이 위치한 폴더보다 한단계 더 상위폴더로 이동하는 경로이고, ./은 현재 내 파일이 위치한 폴더로 이동을 하는 경로다.  정리 끝!!

728x90
저작자표시 비영리 변경금지

'학습 > 개념정리' 카테고리의 다른 글

개념정리 :: DOM과 렌더링이란?  (0) 2022.05.25
개념정리 :: 크로스 브라우징, Reset.css vs Normalize.css  (0) 2022.05.23
개념정리 :: 파이썬의 동작원리?  (0) 2022.05.19
개념정리 :: 인코딩, 유니코드, 아스키코드, UTF-8  (0) 2022.05.06
개념정리 :: 쿠키, 세션, 캐시  (0) 2022.04.04
'학습/개념정리' Related Articles more