[HTML] 2.HTML의 링크걸기 a 태그 주소 adress

 

첫번째 시간은 HTML의 기본 태그인 <a> 태그와 주소를 남기는 <address> 태그에 대해 알아보겠습니다.

 

1. HTML의 링크

 

HTML <a> 요소(앵커요소)는 href(하이퍼 링크) 특성을 통해 다른 페이지나 같은 페이지의 어느 위치, 파일, 이메일 주소와 그 외 다른 URL로 연결할 수 있는 하이퍼링크를 만듭니다. <a> 태그 안에 콘텐츠는 링크 목적지의 설명을 나타내야 합니다.

Download Visual Studio Code - Mac, Linux, Windows

 

html을 배우기 전 우선 해당 코드를 실행할 에디터를 설치해 주세요

 

html은 별도의 서버가 없기에 vscode의 live server를 설치하셔야 합니다.

<p>You can reach Koras02 at:</p>
    
<ul>
     <li><a href="https://thinky.tistory.com/91">일본 산업을 대표한 기업 Nintendo</a></li>
     <li><a href="https://thinky.tistory.com/97">후지TV 미나토 사장과 가노 회장 사임 의사</a></li>
</ul>

 

 

liveServer의 5500 포트로 들어가면 작성한 코드의 리스트가 나옵니다.

 

2. a 태그의 특성

 

링크를 띄워주는 <a> 태그의 요소는 전역 특성을 포함합니다.

• download
  • 링크로 이동하는 대신 사용자에게 URL을 저장할지 물어봄, 값을 지정할 수 있고 지정하지 않을 수 있음
  • 값이 없다면 파일 이름과 확장자는 브라우저가 다양한 인자로부터 생성해 제안함
    • Content-Disposition - HTTP 헤더
    • URL 경로의 마지막 조각
    • 미디어 유형 ( Content-Type 헤더, data: URL의 시작 부분, blob: URL의 Blob.type에서 알아낼 수 있음
  • 값을 지정하면 저장할 때 파일 이름으로 제안하고./ 와 \ 문자는 _ 로 변환하고 파일 시스템에서 다른 문자도 제한할 수 있으며 필요한 경우 추가로 이름을 조정할 수 있음
• href 
  • 하이퍼링크가 가리키는 URL. 링크는 HTTP 기반 URL일 필요는 없으며, 브라우저가 지원하는 모든 URL 스킨을 사용할 수 있음
    • 페이지 구역을 가리키는 프래그먼트 URL
    • 미디어 파일 일부를 가리키는 미디어 프래그먼트
    • tel:  URL을 사용하는 전화번호와 같음
    • mailto: URL을 사용하는 이메일 주소
    • 웹 브라우저에서는 다른 URL 스킴을 지원하지 않지만, 웹 사이트는 Navigator.registerProtocolHandler()를 통해 지원할 수 있음 
• rel
  • 하나의 스페이스로 구분하는, 연결한 URL과 관계를 나타내는 링크 유형 목록
• target
  • 링크한 URL을 표시할 위치로 가능한 값은 브라우징 맥락으로, 즉 탭, 창 <iframe>의 이름이나 특정 키워드임
    • _self: URL을 현재 브라우징 맥락에 표시함. 기본값
    • _blank: URL을 새로운 브라우징으 맥락으로 표시함. 보통 새탭으로 실행되나. 직접 설정 가능
    • _parent: URL을 현재 브라우징 맥락의 부모에 표시함. 부모가 존재하지 않으면 _self 와 동일하게 행동함
    • _top: URL을 최상단 브라우징 맥락(현재 맥락의 부모며 자신의 부모가 존재하지 않는, 제일 높은 맥락)에 표시. 부모가 존재하지 않으면 _self와 동일하게 행동

3. 절대 URL 연결

 

<li> <a href="https://thinky.tistory.com/">Koras02's 여러가지 이야기</a></li>

4. 상대 URL 연결

 <a href="//example.com">Schema-relative URL</a>
 <a href="/ko/docs/Web/HTML">Origin-relative URL</a>
 <a href="./p">Directory-relative URL</a>

 

5. 같은 페이지의 요소 연결

<!-- <a> 요소로 아래의 구획을 연결 -->
<p><a href="#Section_further_dowm">아래 제목으로 건너뛰기</a></p>

<!-- 링크가 향할 제목 -->
<h2 id="Section_further_dowm">아래 제목</h2>

 

6. 이메일 주소 연결

 

사용자 이메일 프로그램을 통한 새로운 메일을 보낼 수 있는 링크를 생성할 수 있습니다.

<a href="내 이메일 주소">이메일 주소</a>

 

7. 전화번호 연결

<a href="tel:+000 000 000">+000 000 000</a>
<a href="tel:+1234 5678 000">+1234 5678 000</a>

 

8. onclick 이벤트

 

앵커 요소의 href를 #이나 javascript:void(0)으로 지정해 페이지 새로고침을 막고, click 이벤트 처리기를 등록해 가짜 버튼을 만드는 방식으로 남용할 수 있습니다. 이런 가짜 href 값은 링크를 복사하거나 드래그할때, 새 탭이나 새 창에서 열때, 즐겨찾기에 추가할 때와 JavaScript를 불러오고 있거나 스크립트 오류가 발생했을 때며 대신 button 태그를 사용할 수 있습니다.

 

9.외부 링크와 비 HTML 리소스 링크

 

target="_blank" 태그로 인한 새탭/창을 여는 링크와, 파일을 다운로드하는 링크는, 링크를 클릭할 시 어떤 현상이 발생하는 지에 대해 명시해야 합니다. 

 

<a href="https://ko.wikipedia.org/wiki/%EB%8B%8C%ED%85%90%EB%8F%84" target="_blank">
    닌텐도 - 위키백과, 우리 모두의 백과사전
</a>
    <br>
<!-- 비 HTML 리소스 링크 -->
 <a href="2025-all">2025 결산</a>

 

아이콘을 사용해 링크를 강조할 땐 대체 텍스트를 지정해줘야합니다.

<a href="https://ko.wikipedia.org/wiki/%EB%8B%8C%ED%85%90%EB%8F%84" target="_blank">
    닌텐도 - 위키백과, 우리 모두의 백과사전
  <img src="nintendo" alt="(새탭에서 열림)">
</a>
  <br>
  <!-- 비 HTML 리소스 링크 -->
<a href="2025-all">2025 결산
  <img src="2025-all.svg" alt="(2025결산)">
</a>

 

10. address

 

HTML에 <address>요소는 가까운 HTML 요소의 사람, 단체, 조직등에 대한 연락처 정보를 나타내는 태그입니다.

<p>회사 정보</p>
  <address>
   <a href="abcd@abcd.com">📧 abcd@abcd.com</a>
   <br>
   <a href="tel:+123456">+123456</a>
  </address>

 

adress 요소의 콘텐츠가 제공하는 연락처 정보는 현재 맥락에 적절한 아무 형태나 취할 수 있고, 물리적 주소, URL, 이메일 주소, 전화번호, SNS 식별자, 좌표 등 어떠한 정보라도 포함할 수 있습니다.

 <div>
    <address>
         Koras02's 여러가지 이야기 블로그임니다
         <a href="https://thinky.tistory.com/">링크</a>.<br/>
         문제가 발생한다면 아래로
         <a href="myemail-link">content koras02</a> <br/>
          tistory@ <br/>
          Korea@<br/>
    </address>
</div>

 

<a> - HTML: Hypertext Markup Language | MDN

 

<address> - HTML: Hypertext Markup Language | MDN