일자 : 24-2 14주차 2차시
[1] 링크 (Link)
- 기본적으로 모든 브라우저에서 링크는 다음과 같이 표시된다:
- 방문하지 않은 링크는 밑줄이 그어진 파란색
- 방문한 링크는 밑줄이 그어진 보라색
- 활성화된 링크는 밑줄이 그어진 빨간색
1) 예시
<!DOCTYPE html> <!-- HTML 문서의 타입을 선언 -->
<html> <!-- HTML 문서의 루트 요소 -->
<body> <!-- 문서의 본문 내용을 포함하는 요소 -->
<h1>HTML Links</h1> <!-- 제목을 나타내는 요소, 레벨 1 -->
<p>
<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>
<!-- 'Visit W3Schools.com!' 텍스트를 클릭하면 https://www.w3schools.com/로 이동하는 링크 -->
</p>
</body>
</html>[2] 절대 URL과 상대 URL (Absolute URLs vs Relative URLs)
- 위의 예제들은 모두 ref 속성에서 절대 URL(전체 웹 주소)을 사용하고 있다.
- 로컬 링크(같은 웹사이트 내의 페이지에 대한 링크)는 상대 URL("https://www" 부분이 없는 URL)로 지정된다.
1) 예시
<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>
<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>[3] 이미지를 링크로 사용하기 (Use an Image as a Link)
- 이미지를 링크로 사용하려면
<a>태그 안에<img>태그를 넣으면 된다.
1) 예시
<h2>Image as a Link</h2>
<p>아래 이미지는 링크입니다. 클릭해 보세요.</p>
<a href="default.asp"><img src="image.jpg" alt="Example Image"></a>[4] 이메일 주소로 링크 만들기 (Link to an Email Address)
href속성에mailto:를 사용하여 사용자의 이메일 프로그램을 열어 새 이메일을 보낼 수 있는 링크를 생성한다.
1) 예시
<h2>Link to an Email Address</h2>
<p>사용자의 이메일 프로그램을 열어 새 이메일을 보내기 위한 링크를 만들려면 href 속성에 mailto:를 사용합니다:</p>
<p><a href="mailto:someone@example.com">Send email</a></p>[5] 버튼을 링크로 사용하기 (Button as a Link)
- HTML 버튼을 링크로 사용하려면 JavaScript 코드를 추가해야 한다.
<h2>Button as a Links</h2>
<p>버튼을 클릭하면 HTML 튜토리얼로 이동합니다.</p>
<button onclick="document.location='default.asp'">HTML Tutorial</button>
안녕하세요, 사용자들의 문제 해결을 중심으로 하는 프론트엔드 개발자입니다. 티스토리로 전환했어요 : https://pangil-log.tistory.com