웹사이트의 경로와 주소 - 바로 실행해보면서 배우는 HTML5/CSS3
바로 실행해보면서 배우는 HTML5/CSS3
  • 웹사이트의 경로와 주소
    05 링크 태그
    웹사이트의 경로와 주소

    href 값은 일반적으로 웹 사이트 주소와 경로를 사용했던 것을 기억하실 겁니다. 이번 시간에는 href의 값으로 사용되는 웹 사이트의 주소경로에 대해 자세히 알아보고자 합니다.

    보통 출발지부터 목적지까지 가는 길 모두를 통틀어 경로(Path)라고 부릅니다. 사전적 의미로 풀이하면 '지나는 길'이라는 뜻을 가진 단어이며, 프로그래밍에서 또한 같은 의미를 가집니다.

    예시를 하나 들어봅시다. 만약 구름EDU에 접속하여 강의 목록을 들어가고, 현재 이 강의인 <바로 실행해보면서 배우는 HTML5/CSS3>까지 도달하는 과정은 아래와 같습니다. 

    경로를 임의로 표시하기 위해 를 사용하였지만, 프로그래밍에서 경로는 /를 사용하여 표시합니다. 위의 과정을 다시 표현해봅시다.

    이제 웹페이지에서 실제로 사용되는 주소로 변경해봅시다.

    구름EDU의 주소(address)는 https://edu.goorm.io이고, <바로 실행해보면서 배우는 HTML5/CSS3>로 도달하는 경로는 /lecture/바로-실행해보면서-배우는-html5-css3라는 것을 쉽게 확인할 수 있습니다.


    URL


    이렇게 웹 사이트 주소(도메인, domain)와 경로(path)를 합쳐 URL(Uniform Resource Locator)이 생성됩니다.

    웹에서 HTML 페이지, CSS 문서, 이미지 등을 자원(Resource)이라고 부르며, URL은 인터넷에서 자원의 위치를 표현합니다. 이제까지 href의 속성 값에 주소가 입력되어야 한다고 설명했지만, 엄밀히 말하면 실제 링크 주소 값이 들어가야 하며, 더욱 자세히 얘기하면 주소와 경로가 합쳐진 URL이 입력되어야 합니다.

    HTML에서 URL은 매우 다양하게 쓰이며, 크게 절대 URL상대 URL로 나뉩니다.

    • 절대 URL(Absolute URL)은 접근하는 최초 시작점(주소)부터 경유한 경로를 모두 기록하여 리소스의 위치를 나타냅니다.
    • 상대 URL(Relative URL)현재 위치(기준점)를 기준으로 상대적인 경로를 기록하여 리소스의 위치를 나타냅니다.

    절대 URL과 상대 URL을 좀 더 쉬운 예시로 설명하면 다음과 같습니다. 우리가 아는 웹 사이트 주소를 파일 시스템이라고 가정해봅시다. https://edu.goorm.io의 폴더를 열고 있는 상태에서 바로-실행해보면서-배우는.html 강의 페이지를 불러오려고 합니다. 이때 절대URL과 상대 URL은 아래와 같습니다.

    그 다음, lecture 폴더에 들어가 바로-실행해보면서-배우는.html 강의 페이지를 불러오려고 합니다. 이때 절대URL과 상대 URL은 아래와 같습니다.

    두 방법 사이의 차이점이 보이시나요? 절대 URL은 말 그대로 절대적 위치입니다. 내 현재 위치에 상관 없이 URL 최초 시작점부터 경유한 경로를 모두 담고 있는 URL입니다. 반면, 상대 URL은 상대적인 위치에 따라 URL이 달라집니다.

    URL은 <a>href 값 이외에 여러 방면에서 사용하게 될 겁니다. 특히 파일 시스템과 관련해서 말이죠.

    Q & A
    Q&A forum that anyone can ask and answer.
    Share your questions and answers with other students and grow together!
    Registered Questions(0)