[intro] HTML - (경로/주소) ★★★★★ - (절대경로/상대경로)/(절대주소/상대주소) 뜻/의미/개념/정의

목차

1. 경로(PATH) / 주소(URL)
2. 절대경로 / 상대경로
3. 절대주소 / 상대주소
4. 상대주소를 절대주소로 일괄변경

경로(PATH) / 주소(URL)

[경로 (PATH)] 

 

서버 내 폴더/파일 간 관계 표시. (※ 절대경로/상대경로 2가지 존재.)

 

1.

서버 내에서 파일을 (include/require)시키거나 파일 호출 시 사용.

• (예) PHP : include("./common.php");

 

2. 

그누보드 상수 중, 대문자 PATH 들어간 것들.

• G5_PATH : (예) /home/hz/html
• G5_THEME_PATH : (예) /home/hz/html/theme/basic

 

---

[주소 (URL)]

 

웹브라우저로 접근 가능한 URL. (※ 절대주소/상대주소 2가지 존재)

 

1.

img 주소 / a 주소 / link 주소 / iframe 주소 / script 주소 등

• (예1) HTML: <img src="이미지주소"> 
• (예2) CSS: background:url(이미지주소);

 

2.

그누보드5 상수 중, 대문자 URL 들어간 것들.

• G5_URL : (예) https://homzzang.com
• G5_THEME_URL : (예) https://homzzang.com/theme/basic

 

절대경로 / 상대경로

[절대경로] 

 

서버 root 부터 표시한 경로.

 

(예) 

• include("/home/hz/html/common.php");
• include_once(dirname(__FILE__) .'/pbkdf2.compat.php'); 

 

---

[상대경로]

 

현재 파일 위치를 기준으로 상대 파일의 위치를 지정.

 

. (점1개) : 현재 디렉토리.

.. (점2개) : 상위 디렉토리. 

 

(예)

• include("./common.php"); // 현재
• include("../common.php"); // 1단 상위
• include("../../common.php"); // 2단 상위
• include("../../../common.php"); // 3단 상위

더 자세히 보기.

절대주소 / 상대주소

[절대주소]

 

방법1.

도메인 주소를 표시한 주소. 

(예) <img src="https://homzzang.com/img/logo.png">

 

방법2.

도메인 주소 제외한 서브 디렉토리 이하 표시한 주소.

(예) <img src="/img/logo.png">

 

PS1.

맨 앞에 슬래시 ( / ) 꼭 넣어줘야 함.

 

PS2.

서브 디렉토리(예: gnu5) 만들어 빌더 설치 시, 서브 디렉토리도 기재.

(예) <img src="/gnu5/img/logo.png">

 

---

[상대주소] 

 

현재 파일 위치를 기준으로 상대 파일의 위치를 지정.

주의: 맨 앞에 슬래시 ( / ) 추가하면 안 됨.

 

. (점1개) : 현재 디렉토리.

.. (점2개) : 상위 디렉토리. 

 

(예) 

• <img src="logo.png">; // 현재 디렉토리안
• <img src="img/logo.png">; // 서브 디렉토리 안
• <img src="../img/logo.png">; // 상위 디렉토리 안
• <img src="../../img/logo.png">; // 상위 상위 디렉토리 안

 

PS.

현재 파일이 타 파일로 include (또는, require)되는 경우, 타 파일 기준임.

(예)

•  /img/logo 파일을 /theme/basic/index.php 파일에 상대주소로 불러올 경우, <img src="./img/logo.png">처럼 불러와야 함. (∵ /theme/basic/index.php 파일은  /index.php 파일로 require됨.)
• ※ 주의: <img src="../../img/logo.png"> (X)
• 관련글: 트샷 님 (220217) https://sir.kr/qa/449851

 

[주의] div 태그 경우, (width/height) 영역 미지정 시 배경이미지 안 뜸.

 (예) <div style="background-image: url('img/file.jpg')"></div>

상대주소를 절대주소로 일괄변경

[PHP 이용 방법]

 

<?php

$str = <<<HEREDOC

<img src="./hz.gif">

<img src="./hz.gif">

<img src="./hz.gif">

<img src="./hz.gif">

<img src="./hz.gif">

HEREDOC;

$res = str_replace('<img src="./hz.gif">', '<img src="https://homzzang.com/hz.gif">', $str);

echo $res;

?>

 

---

[JavaScript 이용 방법]

 

<xmp id="box">

<img src="./hz.gif">

<img src="./hz.gif">

<img src="./hz.gif">

<img src="./hz.gif">

<img src="./hz.gif">

</xmp>

<script>

var box = document.getElementById('box');

if (box != null) {

    box.innerHTML = box.innerHTML.replace(/<img src="\.\/hz\.gif">/g, '<img src="https://homzzang/hz.gif">');

}

</script>

 

결과보기

배르만 님 (230527) https://sir.kr/qa/500248