html hyperlink

카테고리 없음

html hyperlink

Aburger 2024. 4. 12. 17:23

하이퍼링크는 웹을 웹답게 만드는 요소이다.

하이퍼링크를 효과적으로 다루는 방법과 수많은 파일들을 함께 연결하는 법을 배우도록 한다.

1. what is hyperlink 하이퍼링크란.

웹이 제공하는 가장 흥미로운 혁신중 하나이며, 웹을 웹(web)으로 만드는 요소이다.

하이퍼링크를 사용하여 문서를 다른 문서나 리소스에 연결하고, 문서의 특정 부분에 연결하거나,

웹 주소에서 앱을 사용할 수 있게된다.

클릭하거나 다른 방법으로 활성화된 웹 브라우저가 다른 웹 주소(URL)로 이동하도록 거의 모든 웹 컨텐츠를 링크로 변환할 수 있다.

*URL은 HTML파일, 텍스트 파일, 이미지, 텍스트 문서, 비디오, 오디오 파일 등 웹 상에 존재할 수 있는 모든 컨텐츠에 연결 가능하다.

웹브라우저가 파일을 표시하거나 처리하는 방법을 모르는 경우 파일을 열 것인지 다운로드 할것인지 묻는 메시지가 표시된다.

BBC홈페이지를 접속해보자.

홈페이지를 보면 여러 뉴스기사 뿐 아니라 사이트의 다양한 영역(네비게이션 메뉴), 로그인/회원가입 등을 가르키는 많은 링크가 포함되어 있다.

2. 링크의 구조

기본 링크는 텍스트 또는 기타 내용(Block level links)을 <a>요소 안에 감싸고 웹 주소를 포함하는 'href'속성을 사용하여 생성한다. (herf = Hypertext Reference / 링크 참조)

<p>
  나는 <a href="https://www.mozilla.org/en-US/">Mozilla 홈페이지</a>로 향하는
  링크를 만들었습니다.
</p>

3. Block level links

어느 컨텐츠든 모두 link 시킬 수 있다.

block-level 요소들도 마찬가지이다.

만약 링크로 바꾸고 싶은 이미지가 있다면 element를 앵커<a>태그로 둘러쌓으면 된다.

또한 링크로 만들 이미지가 있는 경우 <a>태그와 <img>태그를 둘다 사용해보자.

      <a href="https://developer.mozilla.org/en-US/">
        <h1>MDN Web Docs</h1>
      </a>
      <p>
        Documenting web technologies, including CSS, HTML, and JavaScript, since 2005.
      </p>
      
      <a href="https://www.google.com/">
        <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_92x30dp.png" alt="Google homepage" />
      </a>

<h1>MDN Web Doc</h1> , Google 이미지 모두 클릭시 해당 사이트로 잘 이동된다.

title속성에 부가요소 더하기

링크에 추가할 수 있는 또 다른 속성은 title이다.

Title은 페이지에 포함된 정보 또는 웹 사이트에서 주의해야할 사항 등 링크에 대한 추가정보를 포함한다.

4. URL과 Path에 대한 기본 지침

link target에 대해 이해하기 위해, URL과 path에 대한 사전 지식이 필요하다.

URL, Uniform Resource Locator

웹 페이지를 찾기 위한 주소

네트워크 상에서 자원이 어디 있는지를 알려주기 위한 규약이다.

URL은 웹 사이트 주소뿐만 아니라 컴퓨터 네트워크상의 자원을 모두 나타낼 수 있다. 그 주소에 접속하려면 해당 URL에 맞는 프로토콜을 알아야 하고, 그와 동일한 프로토콜로 접속해야 한다.

URL은 파일들을 찾기 위해 path를 이용한다.

path는 찾는 파일이 파일 시스템 어디에 있는지 구체적으로 명시한다.

디렉토리의 구조의 root를 creating-hyperlinks라고 한다.

root 는 유닉스 계열의 운영체제에서 모든 권한을 가지고있는 최고 관리자가 사용하는 ID를 의미하기도 하나
여기선 root directory의 의미를 가지고 있다.
모든 디렉토리의 최상단, 조상의 의미를 가지고 있는 디렉토리이며
윈도우의 드라이브별 루트 디렉토리는 C:\, D:\ 등이다.
리눅스계열의 유일 최상위 디렉토리는 / 이다.

웹 사이트를 로컬 단에서 다룰 때, 전체 웹사이트가 모두 들어갈 수 있는 하나의 디렉토리를 가져야 할것이다.

Root로부터 path(경로)를 지정해주어 원하는 폴더, 파일을 명시할 수 있다.

예제를 들어 path를 지정하는 법을 살펴보자.

동일 디렉토리(폴더)
- 같은 디렉토리에 있는 파일로 이동하려면 연결하려는 파일의 이름만 지정해주면 된다.

'PRACTICE'폴더 안에 두개의 파일을 만들자.

practice.html , practice2.html

parctice.html 파일에서 <a>태그를 클릭하면 practice2로 이동하게 만들어보자.

    <!-- practice.html -->
    <a href="practice2.html">
        <h1>go practice2.html</h1>
    </a>
    
    <!-- practice2.html -->
    <p>Hello practice2</p>

하위 디렉토리로 하향 이동
- 파일을 표시하기 전에 디렉토리를 하향이동 시켜야 한다.
- 사용할 디렉토리 이름, /, 파일 이름 순으로 사용하면 된다.

PRACTICE 폴더 안에 SUB PRACTICE 폴더를 만들고 그 안에 파일을 생성한다.

parctice.html 파일에서 <a> 태그를 클릭하면 practice2로 이동하게 만들어보자.

    <a href="SUB PRACTICE/practice2.html">
        <h1>go practice2.html</h1>
    </a>

URL에서 디렉토리가 바뀐걸 확인할 수 있다.

상단 디렉토리로 상향 이동
- 상위 디렉터리로 이동하려면 두개의 점(..) 을 사용하여 표시한다.

    <a href="../practice2.html">
        <h1>go practice2.html</h1>
    </a>

필요한 경우 상향이동이나 하향이동을 여러번 사용해 복잡한 URL표현이 가능하다.
- ../../../complex/path/to/my/file.html

문서로 이동할 때 HTML문서 내부의 특정 부분에 연결할 수 있다.

Document fragments* 문서 조각

연결하고 싶은 태그에 id속성을 넣어주어 사용한다.

일반적으로 특정 헤드라인에 연결할 때 사용하고는 한다.

id속성을 넣어주었다면 해시파운드(#)기호를 사용해 URL을 완성한다.

    <p>
      우리에게 메일을 보내고 싶나요? 그럼
      <a href="practice.html#Mailing_address">메일 주소</a>를 확인해주세요.
    </p>

    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

    <p>
      <a href="#Mailing_address">회사 메일 주소</a>는 페이지의 단에서 찾을 수
      있습니다.
    </p>

    <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

    <h2 id="Mailing_address">Mailing 주소</h2>

<a>태그를 누르면 같은 페이지에 해당 id로 이동하게 된다.

5. 절대 URL, 상대 URL

웹에서는 절대 URL과 상대 URL두가지 용어를 볼 수 있다.

절대URL

protocol, domain을 포함한 웹에서 정의된 절대적인 위치를 가르킨다.

상대URL

연결되어 있는 파일로부터의 상대적인 위치를 가르킨다.

www.example.com/test/aa.html 파일에서

www.example.com/test/bb.html 파일로 이동하려한다면

<!-- 절대URL -->
<a href="www.example.com/test/bb.html">hi bb</a>
<!-- 상대URL -->
<a href="bb.html">hi bb</a>

6. 관습

쓸모 없는 단어를 사용하지말것
- 좋은 예 : Download Firefox
- 나쁜 예 : Click here to download Firefox
링크 텍스트에 "link"나 "links to"라고 쓰지 말것
링크 텍스트를 가능한 짧게 작성할 것
동일한 텍스트의 여러 복사본("여기 클릭", "여기 클릭")이 다른 리소스에 링크되는 경우를 최소화 할것

비 HTML 리소스 연결시 명확한 표식을 남길 것
- PDF나 WORD문서를 다운로드 하거나 스트리밍될 리소스(비디오, 오디오) 또는 다른 잠재적으로 예기치 않은 효과(팝업)에 연결할 경우, 혼동을 줄이기 위해 명확한 문구를 추가할 것.
- - 저대역폭 연결 중인 경우 링크를 클릭하면 수 메가바이트 다운로드가 시작됩니다.
다운로드 연결시 download 속성을 사용

<a
  href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=en-US"
  download="firefox-latest-64bit-installer.exe">
  Download Latest Firefox for Windows (64-bit) (English, US)
</a>

저작자표시 (새창열림)