HTML 수업

웹의 신체

HTML 수업 웹의 신체

URL

URL

URL(Uniform Resource Locator)이란 웹페이지, 이미지, 동영상과 같은 정보가 위치하는 유니크한 위치 정보

URL의 구성

http://codingeverybody.com/codingeverybody_html_tutorial/url_72/example2.html?mode=view#bookmark

부분 명칭 설명
http:// scheme 통신에 사용되는 방식, 프로토콜
codingeverybody.com hosts 자원이 위치하고 있는 웹서버의 이름, 도메인이나 IP가 사용된다.
/codingeverybody_html_tutorial/url_72/example2.html url-path 루트 디렉토리부터 자원이 위치한 장소까지의 디렉토리와 파일명
?mode=view query 웹서버에 넘기는 추가적인 질문
#bookmark bookmark 하이퍼링크를 클릭했을 때 특정 위치로 이동하기 위해서 사용

경로(path)

  • 상대경로 : 문서를 기준으로 한 다른 리소스들의 위치정보
  • 절대경로 : 문서의 위치를 가르키는 도메인을 포함한 전체 위치정보

예제

example1.html  (github)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
		<style>
			img{
				height:50px;
				width:50px;
			}
			#structure{
				width:379px;
				height:124px;
				border:1px solid gray;
			}
			body{
				font-size:0.8em;
			}
			table {
				width:100%;
				border-collapse: collapse;
			}
			td, th{
				border:1px solid gray;
				padding:5px;
			}
			textarea{
				width:100%;
				border:none;
			}
			.div{width:50px}
			.ex{width:30px;}
			.desc{width:150px}
			.result{width:60px}
		</style>
	</head>
	<body>
		<p>
			exampe1.html 파일이 아래와 같은 디렉토리 구조 위에 위치한다고 간주한다. <br />
			<img id="structure" src="structure.gif" />
		</p>
		<table>
			<tr>
				<th class="div">구분</th>
				<th class="ex">기호</th>
				<th class="desc">설명</th>
				<th class="code">코드</th>
				<th class="result">결과</th>
			</tr>
			<tr>
				<td rowspan="3">상대경로</td>
				<td>../</td>
				<td>부모 디렉토리</td>
				<td>
					<textarea><img src="../image/logo.png" /></textarea>
				</td>
				<td>
					<img src="../image/logo.png" />
				</td>
			</tr>
			<tr>
				<td>./</td>
				<td>현재 디렉토리</td>
				<td>
					<textarea><img src="./image/logo.png" /></textarea>
				</td>
				<td>
					<img src="./image/logo.png" />
				</td>
			</tr>
			
			<tr>
				<td>없음</td>
				<td>현재 디렉토리 기호는 생략할 수 있다</td>
				<td>
					<textarea><img src="image/logo.png" /></textarea>
				</td>
				<td>
					<img src="image/logo.png" />
				</td>
			</tr>
			<tr>
				<td rowspan="2">절대경로</td>
				<td>/</td>
				<td>루트(root) 디렉토리</td>
				<td>
					<textarea><img src="/codingeverybody_html_tutorial/url_72/image/logo.png" /></textarea>
				</td>
				<td>
					<img src="/codingeverybody_html_tutorial/url_72/image/logo.png" />
				</td>
			</tr>
			<tr>
				<td>URL</td>
				<td>URL을 사용</td>
				<td>
					<textarea><img src="http://codingeverybody.com/codingeverybody_html_tutorial/url_72/image/logo.png" /></textarea>
				</td>
				<td>
					<img src="http://codingeverybody.com/codingeverybody_html_tutorial/url_72/image/logo.png" />
				</td>
			</tr>
		</table>
	</body>
</html>

참고

댓글

댓글 본문
  1. NAMO
    감사합니다!
  2. JustStudy
    고맙습니다
  3. egoing
    변수는 지원하지 않아요~
    대화보기
    • 촙오
      들으면서 궁금한게 있는데요.. 저 url부분을 address = "url" 이런식으로 선언한담에 <img src=address/> 이런식으로는 못쓰나요?..
    • 김명수
      거의 막바지네요 감사합니다~
    • YellowBall
      잘 들었습니다! 2015/5/1
    • egoing
      ../../ 입니다 ^^
      대화보기
      • kush
        재밌게 잘들었습니다! 개념이 확실히 서네요!

        혹시 (정말 궁금해서 그런데)
        부모 디렉토리가 ../ 이라면
        조부모 디렉토리도 있을까요? 즉 상위-상위 디렉토리로 가는개념이요 혹시 .../ 이려나요?
        (진지..)
        대화보기
        • Akinaro
          감사합니다!!ㅎ
          대화보기
          • egoing
            외부 사이트 링크를 걸려면 필요하겠죠.
            대화보기
            • Akinaro
              절대경로 상대경로를 이해했는데

              설명만 듣자면 상대경로를 쓰는게 아주 편리한데요

              그럼 절대경로는 왜 존재하는것이며

              꼭 절대경로를 사용해야 할 경우는 어떤경우가 있나요?
            • 별이
              감사합니다. 그런데 강의 중에 도메인을 임의로 생성했다고 하셨는데... 어떻게 그렇게 할수 있는지
              그리고 2차도메인이란 말만 들어왔었는데..그개념 설명좀 부탁드려도 되겠습니까?
            • 유형찬
              감사합니다.
            • 무른
              정말 훌륭한 강의입니다.
              다른 강의도 너모 좋지만 절대경로 상대경로편은 지금까지 보고 이해했던 그 어떤
              자료들보다 이해가 쉽고 명확했습니다.
              감사합니다요^^~!!
            • ejaguar211
              궁금증이 명쾌하게 풀렸습니다.
              핵심을 정확히 짚어주시고, 정말 쉬운 예제를 소개해주셔서 단번에 해결했네요.^^
              감사합니다.
              대화보기
              • egoing
                아래 링크를 참고해주세요.
                http://mytory.net......229
                대화보기
                • ejaguar211
                  하이퍼링크를 통해 스크롤바 위치값(bookmark)을 넣어서 원하는 위치로 페이지가 뜨도록 만들고 싶은데요.
                  그 스크롤바 위치값은 어떻게 해야 알수 있나요?
                • 박종길
                  먼저 한 파일을 없애고 파일을 다시 만들어 해보니 되네요...
                  죄송합니다.
                • egoing
                  상대경로를 권장하는 편이죠. 페이지가 속해 있는 다른 도메인의 리소스를 사용하거나 할 때 절대 경로를 사용하는 것이 일반적입니다.
                  대화보기
                  • zxcvxr
                    실질적인 업무 상황에서는 절대경로를 많이 쓰나요? 상대 경로를 많이 쓰나요???
                    디렉토리 변경시 수고로움을 생각해서 상대경로만 쓰면 안되나요??
                  • ppwangji
                    감사합니다! ^^
                  • 2vision
                    아후 무슨말씀 인제 모르겠네요. 여러번 듣고 도 들어야겠어요. .....
                  • 김창세
                    공부 잘 하고 있습니다. 감사^^
                  • Starmomo
                    URL, 절대경로, 상대경로를 이제야 이해하였습니다. 'URL'과 '절대경로' 구분을 못했었는데 명확해지네요. 절대경로는 '/...'(루트)에서 시작하여 경로를 표시하고, 상대경로는 './... '(현재 폴더 아래의 ...) 또는 '.. / ... '(부모 폴더 아래의 ...)로 정리하고, './...'(현재 폴더의 ...)와 '...'(현재 폴더의 ...)로 같은 뜻이라는 것도 정리 되었습니다. 핵심을 놓치지 않는 수업 잘 보고, 듣고 있습니다. 이고잉님, 고맙습니다. ^^
                  • Jmogoon
                    수고하셨습니다.
                  • egoing
                    설명이 부실해서 죄송 합니다. ㅠㅠ
                    예를들면 현재 접속하고 있는 페이지의 URL이 http://a.org......고 했을 때
                    아래의 URL에 접근하려면 다음과 같은 방법들이 있습니다. http://a.org....../72
                    아래는 절대경로 입니다.<a href="ㅊ">URL</a><a href="/course/11/72">URL</a>
                    * 아래는 상대경로 입니다.<a href="./72">URL</a>
                    다른 예를 보죠.만약 현재 접속하고 있는 페이지의 URL이 'http://a.org/course/11/72' 라고 했을 때
                    아래의 URL에 접속하는 방법은 다음과 같습니다.http://a.org/course/11
                    아래는 절대경로입니다. <a href="http://a.org/course/11">URL</a><a href="/course/11">URL</a>
                    ** 아래는 상대경로 입니다.<a href="../">URL</a>
                    상대경로는 현재 접속한 웹페이지의 URL을 기준으로 주소를 지정하는 방법입니다. 위에서 별표(*)한 예제를 보면 ./72 라고 했는데, 여기서 './'는 현재 접속한 페이지가 위치하는 디렉토리를 의미하고,'72'는 그 디렉토리의 파일을 의미합니다. 즉 './72'는 현재 접속한 디렉토리에 있는 파일 72를 의미한다는 것이죠.
                    위에서 별표한(**) 두번째 예제를 보면 ../라고 했는데,여기서 '../'는 현재 접속한 페이지가 위치하는 디렉토리의 부모디렉토리,즉 http://a.org....../11 를 의미합니다.
                    만약 ../73라고 하면 부모디렉토리의 파일 중에 73을 의미하기 때문에 http://a.org......을 의미하게 됩니다.
                    상대경로를 사용하는 이유는 http://a.org라고 하는 도메인이 변경되도 상대경로를 사용했기 때문에 URL을 변경할 필요가 없습니다.그리고 경로는 이동 복사에 의해서 변경될 수 있기 때문에 상대경로를 사용하면 상대적인 경로를 유지하기 때문에 경로를 수정할 필요가 없습니다.
                    저의 설명으로 이해가 되지 않으시면 검색엔진에서 '상대경로와 절대경로'로 검색해보시면 여러각도의 설명을 들을 수 있으니까요. 참고해주세요.
                    대화보기
                    • egoing
                      <
                    • Jang Hae Mi
                      상대경로를 이해해보려고 계속 돌려보는데 잘 모르겠어요ㅠㅠ 상대경로가 실제 웹에서 어떻게 되는지 알고 싶습니다 ㅠ
                    버전 관리
                    egoing
                    현재 버전
                    선택 버전
                    graphittie 자세히 보기