• 회원가입
  • 로그인
  • 구글아이디로 로그인

[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단 상위


더 자세히 보기.

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>

 

결과보기

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

방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
intro HTML - 준비물 + 추천링크 (※ 사용중지・사용폐기 태그) 2
intro HTML - 태그 문법 ★
basic HTML - <!DOCTYPE> 태그 ★ - 문서타입 (= !doctype태그 = !doctype요소 = …
basic HTML - <html> 태그 ★ - HTML문서 (= html태그/html요소 = 에이치티엠엘태그/에이치티…
basic HTML - <body> 태그 ★ - 문서영역 (= 문서본문영역 = body태그/body요소 = 바디태그/바…
font HTML - <h1> ~ <h6> 태그 ★ - 문단제목글씨크기 (= 표제태그 = 단락제목글자크기 = h1태그…
basic HTML - <p> 태그 ★ - 글단락 (= 글문단 = p태그/p요소 = 피태그/피요소)
basic HTML - <br> 태그 ★ - 줄바꿈 (=br태그/br요소 = 비알태그/비알요소) ※ 한줄아래로 줄바꿈 …
basic HTML - <hr> 태그 - 주제 다른 문단구분선 (= hr태그 = hr요소 = 가로선 = 수평선 = 에이…
basic HTML - <!--주석 내용--> 태그 ★ - 주석 처리 ※ 스크립트 태그 안 주석 의미
intro HTML - IE조건부주석 ★ (= 익스주석태그 = 익스플로러 조건문)
formatting HTML - <acronym> 태그 - 두문자어 (= acronym태그 = acronym요소 = 애크로님태그…
formatting HTML - <abbr> 태그 - 축약어/두문자어 (= abbr태그 = abbr요소 = 어브르태그 = 어브리…
formatting HTML - <address> 태그 - 연락처 (= address태그 = address요소 = 어드레스태그)
font HTML - <b> 태그 ★ - 굵은글씨 (= b태그 = 비태그) ※ 볼드태그 / bold태그 / 글씨 긁…
formatting HTML - <bdo> 태그 - 텍스트출력방향 (= bdo태그 = bdo요소 = 글자방향 = 브도태그 = …
1/18
목록
찾아주셔서 감사합니다. Since 2012