h HTML

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

11,259

경로(PATH) / 주소(URL)

절대경로 / 상대경로

절대주소 / 상대주소

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

경로(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단 상위

더 자세히 보기.

PS. common.php 경로: 비타주리 님 (230730) https://sir.kr/g5_tip/20935

절대주소 / 상대주소

[절대주소]

방법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>

결과보기