HTML 링크 만들기: 웹 페이지 연결하는 방법

웹 페이지를 만들 때 다른 웹 페이지, 이미지 또는 파일로 연결되는 링크를 추가하는 것은 매우 중요합니다. 이러한 링크는 사용자가 웹사이트를 탐색하고 관련 정보를 쉽게 찾는 데 도움이 됩니다. HTML에서 하이퍼링크를 만드는 방법은 간단하며, 이 글에서는 기본적인 단계를 안내해 드리겠습니다.

부제목 1: HTML 링크의 기본 구조: #부제목-1-html-링크의-기본-구조
부제목 2: 링크 텍스트 만들기: #부제목-2-링크-텍스트-만들기
부제목 3: 링크 대상 지정하기: #부제목-3-링크-대상-지정하기
부제목 4: 추가 속성 사용하기: #부제목-4-추가-속성-사용하기
부제목 5: 링크 예시: #부제목-5-링크-예시

부제목 1: HTML 링크의 기본 구조

HTML 링크는 a 태그를 사용하여 만들어집니다. 이 태그에는 반드시 href 속성이 포함되어야 하며, 이 속성에는 링크될 페이지의 URL 주소를 지정해야 합니다.

<a href="URL">링크 텍스트</a>

위 코드에서 URL은 링크될 페이지의 주소를 의미하며, 링크 텍스트는 사용자가 클릭할 때 표시되는 텍스트입니다. 예를 들어, 다음 코드는 "Google: https://www.google.com/" 링크를 만듭니다.

<a href="https://www.google.com/">Google</a>

부제목 2: 링크 텍스트 만들기

링크 텍스트는 사용자가 링크를 클릭할 때 표시되는 텍스트입니다. 따라서 명확하고 간결하게 작성해야 사용자가 쉽게 이해할 수 있습니다. 또한, 링크 텍스트는 링크될 페이지의 내용을 정확하게 반영해야 합니다.

예를 들어, 다음 코드는 "네이버 블로그: https://blog.naver.com/" 링크를 만들지만, 링크 텍스트가 페이지 내용을 명확하게 반영하지 못합니다.

<a href="https://blog.naver.com/">네이버</a>

따라서 다음과 같이 링크 텍스트를 수정하는 것이 좋습니다.

<a href="https://blog.naver.com/">네이버 블로그</a>

부제목 3: 링크 대상 지정하기

기본적으로 링크는 현재 페이지를 떠나 새로운 창에서 링크된 페이지를 엽니다. 하지만 target 속성을 사용하여 링크 대상을 변경할 수 있습니다.

_blank: 새로운 탭에서 링크된 페이지를 엽니다.
_self: 현재 페이지에서 링크된 페이지를 엽니다.
_parent: 부모 프레임에서 링크된 페이지를 엽니다.
_top: 최상위 창에서 링크된 페이지를 엽니다.

예를 들어, 다음 코드는 "새로운 탭에서 열기: https://www.youtube.com/" 링크를 만들고, 링크 클릭 시 새로운 탭에서 YouTube 페이지를 엽니다.

<a href="https://www.youtube.com/" target="_blank">새로운 탭에서 열기</a>

부제목 4: 추가 속성 사용하기

a 태그에는 href와 target 외에도 다양한 속성을 사용하여 링크의 기능을 더욱 강화할 수 있습니다.

title: 링크 마우스 오버 시 표시되는 텍스트를 지정합니다.
class: CSS 클래스를 지정하여 링크의 스타일을 변경합니다.
id: 링크에 고유한 ID를 지정합니다.
download: 링크 클릭 시 파일을 다운로드하도록 지정합니다.

예를 들어, 다음 코드는 "파일 다운로드: [유효하지 않은 URL 삭제됨]" 링크를 만들고, 링크 클릭 시 file.zip 파일을 다운로드하도록 지정합니다.

```html <a href="https://example.com

좋은정보

이 블로그 검색

버버리 키즈 트렌치 코트: 스타일리시하고 편안하게 입는 방법