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://)을 포함하여 링크된 문서의 완전한 URL을 제공합니다. 예: http://www.adobe.com/support/dreamweaver/contents.html. 이미지 에셋의 경우 완전한 URL은 http://www.adobe.com/kr/support/dreamweaver/images/image1.jpg와 같습니다.
다른 서버의 문서나 에셋에 링크하려면 절대 경로를 사용해야 합니다. 로컬 링크(동일한 사이트의 문서)에도 절대 경로를 사용할 수 있지만, 이 방법은 권장되지 않습니다. 사이트를 다른 도메인으로 이동하면 모든 로컬 절대 경로 링크가 끊어집니다. 로컬 링크에 상대 경로를 사용하면 사이트 내에서 파일을 이동해야 하는 경우 더 큰 유연성을 제공합니다.
이미지를 삽입할 때(링크가 아님), 원격 서버에 있는 이미지(즉, 로컬 하드 드라이브에서 사용할 수 없는 이미지)에 대해 절대 경로를 사용할 수 있습니다.
문서 상대 경로
문서 상대 경로는 대부분의 웹사이트에서 로컬 링크에 가장 적합합니다. 현재 문서와 링크된 문서나 에셋이 같은 폴더에 있고 함께 유지될 가능성이 높은 경우 특히 유용합니다. 현재 문서에서 링크된 문서까지 폴더 계층을 통한 경로를 지정하여 다른 폴더의 문서나 에셋에 링크하는 데도 문서 상대 경로를 사용할 수 있습니다.
문서 상대 경로의 기본 아이디어는 현재 문서와 링크된 문서나 에셋 모두에 동일한 절대 경로의 부분을 생략하고, 다른 경로 부분만 제공하는 것입니다.
예를 들어 다음과 같은 구조의 사이트를 가정해 봅니다.
contents.html에서 hours.html로 링크하려면(둘 다 같은 폴더에 있음) 상대 경로 hours.html을 사용합니다.
contents.html에서 tips.html로 링크하려면(resources 하위 폴더에 있음) 상대 경로 resources/tips.html을 사용합니다. 슬래시 (/) 각각에서 폴더 계층에서 한 레벨 아래로 이동합니다.
contents.html에서 index.html로 링크하려면(contents.html보다 한 레벨 위인 상위 폴더에 있음) 상대 경로 ../index.html을 사용합니다. 점 두 개와 슬래시(../)는 폴더 계층에서 한 레벨 위로 이동합니다.
contents.html에서 catalog.html로 링크하려면(상위 폴더의 다른 하위 폴더에 있음) 상대 경로 ../products/catalog.html을 사용합니다. 여기서 ../는 상위 폴더로 이동하고, products/는 products 하위 폴더로 이동합니다.
파일을 그룹으로 이동할 때(예: 전체 폴더를 이동하여 해당 폴더 내의 모든 파일이 서로에 대한 동일한 상대 경로를 유지하는 경우)에는 이러한 파일 간의 문서 상대 링크를 업데이트할 필요가 없습니다.하지만 문서 상대 링크가 포함된 개별 파일이나 문서 상대 링크의 대상이 되는 개별 파일을 이동할 때는 해당 링크를 업데이트해야 합니다.(파일 패널을 사용하여 파일을 이동하거나 이름을 바꿀 경우 Dreamweaver가 관련된 모든 링크를 자동으로 업데이트합니다.)
사이트 루트 상대 경로
사이트 루트 상대 경로는 사이트의 루트 폴더에서 문서까지의 경로를 나타냅니다.여러 서버를 사용하는 대형 웹 사이트나 여러 사이트를 호스팅하는 하나의 서버에서 작업하는 경우 이러한 경로를 사용할 수 있습니다.하지만 이런 유형의 경로에 익숙하지 않은 경우 문서 상대 경로를 사용하는 것이 좋습니다.
사이트 루트 상대 경로는 사이트의 루트 폴더를 나타내는 선행 슬래시(/)로 시작됩니다.예를 들어 /support/tips.html은 사이트 루트 폴더의 support 하위 폴더에 있는 파일(tips.html)에 대한 사이트 루트 상대 경로입니다.
웹 사이트에서 HTML 파일을 한 폴더에서 다른 폴더로 자주 이동하는 경우 사이트 루트 상대 경로가 링크를 지정하는 데 효과적인 방법인 경우가 많습니다.사이트 루트 상대 링크가 포함된 문서를 이동할 때는 링크가 문서 자체가 아닌 사이트 루트를 기준으로 하므로 링크를 변경할 필요가 없습니다. 예를 들어 HTML 파일이 종속 파일(이미지 등)에 대해 사이트 루트 상대 링크를 사용하는 경우 HTML 파일을 이동해도 해당 종속 파일 링크는 여전히 유효합니다.
하지만 사이트 루트 상대 링크의 대상이 되는 문서를 이동하거나 이름을 바꿀 때는 문서의 상대 경로가 서로 변경되지 않았더라도 해당 링크를 업데이트해야 합니다.예를 들어 폴더를 이동하는 경우 해당 폴더의 파일에 대한 모든 사이트 루트 상대 링크를 업데이트해야 합니다.파일 패널을 사용하여 파일을 이동하거나 이름을 바꾸면 Dreamweaver에서 관련 링크가 모두 자동으로 업데이트됩니다.
