[HTML] HTML 링크 (1)

 

---

 

링크의 상대 주소

 

 현재 문서 위치를 기준으로 한 주소를 나타낸다.

 

 주로 웹 페이지에서 다른 리소스(파일, 이미지, 페이지 등)를 참조할 때, 사용되며 이는 현재 위치에서 어떤 위치로 이동해야 하는지 상대적으로 나타낸다.

---

 

  #1 현재 디렉토리의 파일 참조

 

결과 웹 사이트

 

 

   다음은 현재 디렉토리의 파일을 참조하는 경우에 대한 설명이다.

  <a href = "./contents2_240108.html"> content </a>

 

 

  사진을 보면, 현재 코드를 짜고 있는 파일이 속해 있는 디렉토리와 같은 곳에 속한 파일을 참조한 것을 알 수 있다.

  같은 디렉토리에 속한 파일을 참조하기 위해서는 주소 앞에 "./"을 써주면 된다.

 

  "./"을 쓰고 상위 디렉토리 혹은 다른 디렉토리에 속한 파일을 참조한다면 오류가 일어날 것이다.

 

---

 

   #2 상위 디렉토리의 파일 참조

 

   다음은 상위 디렉토리의 파일을 참조하는 경우에 대한 설명이다.

 

 

   사진을 보면, 현재 코드를 짜고 있는 파일보다 참조한 파일이 상위 디렉토리에  속해 있다는 것을 볼 수 있다.

   이와 같은 경우에는 주소 앞에 "../"을 써주면 된다.

 

---

 

 

   #3 다른 경로의 파일 참조

  

   다음은 다른 경로의 파일을 참조하는 경우에 대한 설명이다.

 

 

   사진을 보면, 현재 코드를 짜고 있는 파일과 다른 디렉토리에 참조한 파일이 속해 있다는 것을 볼 수 있다.

   이와 같은 경우에는 주소 앞에 "(다른 디렉토리명)/"을 써주면 된다.

 

---

 

  문서 내의 특정 위치로 이동하기

 

 

 

 결과 웹사이트

 

위의 작성된 코드는 키워드를 클릭하면 페이지 내에서 해당 키워드를 중점으로 화면 상에 비춰주는 코드이다.

나무위키에서 특정 키워드를 클릭하면 그 키워드를 설명하는 섹션으로 연결되는 것을 생각하면 이해하기 쉽다.

여기서 주의깊게 살펴보아야하는 관련 키워드는 두 가지이다.

 

 

 

 

 

첫 번째는 키워드에 id를 부여하는 코드이다.

 

<h2 id = "title1"> 제목 1 </h2>

 

 id = "title1"이 여기서 중요한 역할을 하지만, 다른 요소들도 짚고 넘어가도록 하겠다.

 

 

<h2 id = "title1"> 제목 1 </h2>

<h2>...</h2> : 제목(Heading)태그로 숫자가 작을 수록 큰 제목을 나타낸다.

                    * <h1> ~ <h6>까지 있다.

 

                    h2의 영향으로 content인 '제목 1'이 다른 글보다 크게 표현된다.

 

<h2 id = "title1"> 제목 1 </h2>

id = "title1" : id라는 속성은 속성값(title1)에 고유한 식별자를 부여하여,

               해당 요소를 구별하여, JavaScript나, CSS에서 특정 요소를 선택하거나 조작하는데 활용된다.

                   * 대소문자를 구분한다.*

 

 

 

 

 

두 번째는 <a>태그에서 href 속성과 함께 목표 위치의 id를 지정하는 코드이다.

 

<a href = "#title1"> 제목 1 </a>

 

<a>태그와 href 속성은 앞서 설명했기에 "#title1"만 짚고 넘어가겠다.

 

<a href = "#title1"> 제목 1 </a>

 href = "#title1" : href 속성은 title1이라는 id를 부여 받은 content(제목1)가 클릭되었을 때, 해당 링크 혹은 페이지로 넘어간다.

                 같은 페이지 내에서 특정 위치, 즉 id의 위치로 넘어가기 위해서는 "#(id이름)"을 href 속성 값으로 부여하여 이동한다.

 

 

---

 

HTML 링크 (1) 정리