사용 안내서 취소

링크 및 내비게이션 정보

검색

마지막 업데이트 날짜 2022년 11월 28일

Dreamweaver에서의 링크 연결 및 내비게이션과 절대 경로, 문서 상대 경로 및 사이트 루트 상대 경로에 대해 살펴봅니다.

웹 사이트 문서를 저장할 Dreamweaver 사이트를 설정하고 HTML 페이지를 만든 후 특정 문서에서 다른 문서로 연결되도록 할 수 있습니다.

Dreamweaver에서는 문서, 이미지, 멀티미디어 파일 또는 다운로드할 수 있는 소프트웨어에 링크를 만드는 여러 가지 방법을 제공합니다. 머리글, 목록, 표, 절대 위치 요소(AP 요소) 또는 프레임에 있는 텍스트나 이미지를 비롯하여 문서 내의 모든 텍스트나 이미지에 연결되는 링크를 만들 수 있습니다.

링크를 만들고 관리하는 방법에는 여러 가지가 있습니다. 어떤 웹 디자이너는 작업할 페이지나 파일 없이 링크를 먼저 만드는 반면, 다른 디자이너는 먼저 파일과 페이지를 모두 만든 후 링크를 추가합니다. 링크를 관리하는 또 다른 방법은 모든 사이트 페이지를 완성하기 전에 링크를 추가하고 테스트할 수 있는 자리 표시자 페이지를 만드는 것입니다.

절대 경로, 문서 상대 경로 및 사이트 루트 상대 경로

링크가 시작되는 문서와 링크 대상이 되는 문서 또는 에셋 간의 파일 경로를 이해하는 것은 링크를 만드는 데 매우 중요합니다.

각 웹 페이지에는 URL(Uniform Resource Locator)이라는 고유 주소가 있습니다. 그러나 로컬 링크(동일한 사이트의 문서 간 링크)를 만들 때는 일반적으로 링크 대상 문서의 전체 URL 대신 현재 문서나 사이트의 루트 폴더에 대한 상대 경로를 지정합니다.

링크 경로에는 세 가지 유형이 있습니다.

절대 경로(예: http://www.adobe.com/kr/support/dreamweaver/contents.html)
문서 상대 경로(예: dreamweaver/contents.html)
사이트 루트 상대 경로(예: /support/dreamweaver/contents.html)

Dreamweaver를 사용하면 링크를 만들 문서 경로의 유형을 쉽게 선택할 수 있습니다.

참고:

사이트 루트에 상대적이든 문서에 상대적이든, 사용하기 편하고 선호하는 링크 유형을 사용하는 것이 좋습니다. 경로를 직접 입력하는 대신 링크를 검색하면 항상 정확한 경로를 입력할 수 있습니다.

절대 경로

절대 경로는 http://www.adobe.com/kr/support/dreamweaver/contents.html과 같이 사용할 프로토콜(웹 페이지의 경우 보통 http://)을 포함하여 링크된 문서의 완전한 URL을 제공합니다. 이미지 에셋의 경우 완전한 URL은 http://www.adobe.com/kr/support/dreamweaver/images/image1.jpg와 같습니다.

문서를 다른 서버에 있는 문서 또는 에셋에 링크하려면 절대 경로를 사용해야 합니다. 동일한 사이트에 있는 문서에 대한 로컬 링크에도 절대 경로를 사용할 수 있지만, 사이트를 다른 도메인으로 이동하면 모든 로컬 절대 경로 링크가 끊어지므로 이 방법은 바람직하지 않습니다. 또한 로컬 링크에 상대 경로를 사용하면 사이트 내에서 파일을 이동해야 하는 경우 보다 유연하게 작업할 수 있습니다.

참고:

링크가 아닌 이미지를 삽입하는 경우에는 원격 서버의 이미지(로컬 하드 드라이브에서 사용할 수 없는 이미지)로 연결되는 절대 경로를 사용할 수 있습니다.

문서 상대 경로

문서 상대 경로는 일반적으로 대부분의 웹 사이트에서 로컬 링크에 가장 적합합니다. 절대 경로는 특히 현재 문서와 링크된 문서 또는 에셋이 같은 폴더에 있고 이후에도 같은 폴더에 유지되는 경우에 유용합니다. 폴더 계층 구조를 통해 현재 문서에서 링크된 문서로 연결되는 경로를 지정한 문서 상대 경로를 사용하여 다른 폴더에 있는 문서 또는 에셋을 링크할 수도 있습니다.

문서 상대 경로의 기본 개념은 절대 경로 중 현재 문서와 링크된 문서 또는 에셋에서 공통되는 부분을 생략하고 경로에서 서로 다른 부분만 제공하는 것입니다.

예를 들어 다음과 같은 구조의 사이트를 가정해 봅니다.

모두 같은 폴더에 있는 contents.html에서 hours.html로 링크하려면 상대 경로 hours.html을 사용합니다.
contents.html에서 resources 하위 폴더에 있는 tips.html에 링크하려면 상대 경로 resources/tips.html을 사용합니다. 각 슬래시(/)는 폴더 계층 구조에서 한 단계 아래를 나타냅니다.
contents.html에서 contents.html보다 한 단계 위에 있는 부모 폴더의 Index.html에 링크하려면 상대 경로 ../index.html을 사용합니다. 두 개의 점 및 슬래시(../)는 폴더 계층 구조에서 한 단계 위를 나타냅니다.
contents.html에서 부모 폴더의 다른 하위 폴더에 있는 catalog.html에 링크하려면 상대 경로 ../products/catalog.html을 사용합니다. 여기에서 ../는 부모 폴더로, products/는 products 하위 폴더로 이동합니다.
폴더 전체를 이동하여 폴더 내에 있는 모든 파일 간에 동일한 상대 경로를 유지하려는 경우와 같이 파일을 그룹 단위로 이동할 때는 파일 간의 문서 상대 링크를 업데이트할 필요가 없습니다. 그러나 문서 상대 링크가 들어 있는 개별 파일이나 문서 상대 링크의 대상이 되는 개별 파일을 이동할 때는 이러한 링크를 업데이트해야 합니다. 파일 패널을 사용하여 파일을 이동하거나 이름을 바꾸면 Dreamweaver에서 관련 링크가 모두 자동으로 업데이트됩니다.

사이트 루트 상대 경로

사이트 루트 상대 경로는 사이트의 루트 폴더에서 문서로 연결되는 경로를 설명합니다. 여러 서버가 사용되는 대규모 웹 사이트나 여러 사이트를 호스팅하는 하나의 서버에서 작업하는 경우 이러한 경로를 사용할 수 있습니다. 그러나 이러한 경로 유형에 익숙하지 않은 경우 문서 상대 경로를 그대로 사용할 수도 있습니다.

사이트 루트 상대 경로는 사이트의 루트 폴더를 나타내는 슬래시로 시작됩니다. 예를 들어 /support/tips.html은 사이트 루트 폴더의 support 하위 폴더에 있는 파일(tips.html)에 대한 사이트 루트 상대 경로입니다.

한 폴더에서 다른 폴더로 HTML 파일을 자주 옮기는 웹 사이트에서는 링크를 지정할 때 사이트 루트 상대 경로가 가장 적합한 경우가 많습니다. 루트 상대 링크가 들어 있는 문서를 이동할 때는 이 링크가 해당 문서가 아닌 사이트 루트에 상대적이므로 링크를 변경할 필요가 없습니다. 예를 들어 이미지와 같은 종속 파일에 대한 루트 상대 링크가 사용된 HTML 파일을 이동해도 종속 파일에 대한 링크는 계속 유효합니다.

그러나 루트 상대 링크의 대상이 되는 문서를 이동하거나 이름을 바꾸는 경우에는 문서 상대 경로가 변경되지 않았더라도 링크를 업데이트해야 합니다. 예를 들어 폴더를 이동하는 경우 해당 폴더에 포함된 파일에 대한 모든 사이트 루트 상대 링크를 업데이트해야 합니다. 파일 패널을 사용하여 파일을 이동하거나 이름을 바꾸면 Dreamweaver에서 관련 링크가 모두 자동으로 업데이트됩니다.