본문 바로가기
AI.IT 정보/코딩초보 전문가되기

HTML 속성 중에서 가장 기본적이고 유용한 속성 중 하나인 'href' 속성

by 줍줍나미 2024. 9. 4.
반응형

 

1. 속성 이름: href

href는 "Hypertext Reference"의 줄임말로, 주로 링크를 만들 때 사용되는 속성입니다. 이 속성을 통해 클릭했을 때 이동할 웹 페이지나 파일의 URL을 지정할 수 있습니다.

2. 속성 코드 입력 방법:

<a> 태그 안에 href 속성을 사용합니다. 예를 들어, 아래와 같이 링크를 만들 수 있습니다:

html
 
<a href="https://코딩나미...">Visit Example</a>

위 코드에서는 "Visit Example"이라는 텍스트가 링크로 표시되고, https://코딩나미... 클릭하면 으로 이동합니다.

3. 속성값의 종류:

  • URL: 웹 페이지나 파일의 주소를 입력합니다. 예를 들어, https://코딩나미... 과 같은 URL이 있을 수 있습니다.
  • 파일 경로: 로컬 파일이나 같은 웹사이트 내의 다른 페이지로 연결할 때 사용됩니다. 예를 들어, about.html 또는 images/photo.jpg처럼 쓸 수 있습니다.
  • 특수 값: #은 페이지 내의 특정 위치로 이동할 때 사용하거나, 빈 링크를 만들 때 사용할 수 있습니다.

4. 속성값을 여러 가지로 입력하면 나오게 될 결과값:

href 속성에 여러 URL을 한 번에 입력하는 것은 일반적으로 하지 않습니다. 한 번에 하나의 값만 지정해야 합니다. 만약 여러 개의 링크를 만들고 싶다면 <a> 태그를 여러 개 만들어야 합니다. 예를 들어:

html
코드 복사
<a href=" https://코딩나미...1">Example 1</a> <a href=" https://코딩나미...2">Example 2</a>

이렇게 하면 두 개의 다른 링크가 생성됩니다.

5. 어떤 부분에 사용하면 좋은지:

href 속성은 다음과 같은 경우에 사용하면 좋습니다:

  • 네비게이션: 웹사이트 내에서 다른 페이지로 이동하는 메뉴를 만들 때.
  • 외부 링크: 사용자에게 유용한 외부 웹사이트나 리소스로 연결할 때.
  • 파일 다운로드: 파일을 클릭해서 다운로드하도록 할 때.
  • 이메일 링크: mailto:를 사용하여 이메일을 보내는 링크를 만들 때.
  • 예: <a href="코딩나미@example.com">Send Email</a>

요약:

href 속성은 HTML에서 링크를 만들기 위해 사용하는 속성입니다. 초보자라도 쉽게 사용할 수 있으며, 웹페이지 간의 이동, 외부 사이트 연결, 파일 다운로드 등의 기능을 구현할 수 있습니다.

반응형