하이퍼링크(<a>)
약 3분
본문 듣기
하이퍼링크(<a>)
HTML에서 하이퍼링크는 웹 페이지 간의 연결 고리 역할을 합니다. 이 연결 고리를 만들어 주는 태그가 바로 태그입니다. 따라서 태그를 통해 다른 웹 페이지로 이동하거나, 특정 콘텐츠로 점프할 수 있습니다.
코드
html
<a href="https://www.example.com">여기를 클릭하세요!</a>위의 코드에서 태그의 href 속성은 링크가 연결될 주소를 나타냅니다. 즉, 사용자가 '여기를 클릭하세요!'라는 문구를 클릭하면 https://www.example.com으로 이동하게 됩니다.
이제 예제를 만들어볼까요? VS Code를 열고 아래의 단계에 따라 해보세요!
- 새로운 HTML 파일을 생성하세요. 예를 들어 'index.html'로 이름 짓습니다.
- 아래의 기본 HTML 구조를 입력하세요.
코드
html
<!DOCTYPE html>
<html>
<head>
<title>하이퍼링크 예제</title>
</head>
<body>
<h1>나의 첫 번째 웹 페이지</h1>
</body>
</html>
코드
html
<body>
<h1>나의 첫 번째 웹 페이지</h1>
<a href="https://www.example.com">여기를 클릭하세요!</a>
</body>- 이제 파일을 저장하고 브라우저에서 열어 '여기를 클릭하세요!' 링크를 클릭해보세요. 링크가 잘 동작하는지 확인할 수 있습니다.
핵심 요약
- 태그는 하이퍼링크를 생성합니다.
- href 속성은 링크의 목적지를 지정합니다.
- 웹 페이지 사이를 쉽게 연결해줍니다.
실습 문제
- 자신이 좋아하는 웹 페이지로 연결되는 하이퍼링크를 추가해보세요. 예를 들어, 자신의 블로그나 SNS 페이지 주소를 링크할 수 있습니다.
이제 개인 프로젝트에 도전해보세요!
- 자기소개 페이지를 만들어보세요.
- 페이지에 자신에 대한 간단한 내용과 함께 다른 페이지로 연결되는 하이퍼링크를 추가하는 것을 잊지 마세요!
- 그렇게 하면 자신의 페이지에서 더 많은 정보를 제공할 수 있습니다.
하이퍼링크의 중요성을 이해하고 이를 통해 웹 페이지를 더욱 풍부하게 만드는 방법을 배우는 것은 매우 유용합니다. 이러한 기본적인 지식은 웹 개발에서 큰 도움이 될 것입니다!
댓글 0
아직 댓글이 없습니다. 첫 댓글을 남겨보세요.