안녕하세요! 저번 포스팅에서는 텍스트 포매팅 요소들에 대해 알아보았는데요.
이번에는 웹사이트에서 많이 볼 수 있는 링크에 대해 포스트 해보려고 합니다.
다음 이미지는 네이버 웹페이지의 일부인데요.
마우스를 움직여 뉴스 제목이나 신문사 로고를 클릭하면 다른 페이지로 이동하는 것은 다들 알고 계실텐데요.
이러한 기능은 <a> 요소인 앵커 요소를 사용해서 구현할 수 있습니다.
우선 <a> 요소의 사용법을 알아보면 다음과 같습니다.
<a href = "url" target = "_self" > 디스플레이에 보여질 글자 </a>
<a> 요소에서 가장 중요한 href 속성은 Hypertext REFerence의 약자인데요. 클릭하면 해당 속성의 값인 "url"로 이동하는 것을 알려줍니다. 다음으로 중요한 속성는 target 속성으로 어느 창에서 해당 페이지를 보여줄지 결정하며 아래와 같은 값을 가질 수 있습니다.
href attribute - link's destination
target attribute - browsing context
- _self : 기본값으로 현재 브라우저에서 표시합니다.
- _blank : URL을 새 탭이나 새 윈도우에 표시합니다.
다만 href의 값으로 꼭 URL일 필요는 없으며 글이 엄청나게 긴 페이지에서 특정 문단으로 이동할때 ID 값을 지정하여 이동할 수 있으며 그밖에도 메일(mailto:), 전화번호(tel:)로 이동할 수도 있습니다.
자세한 내용은 https://developer.mozilla.org/ko/docs/Web/HTML/Element/a 를 참조하세요
<h1>, <p>, <a> 요소를 이용한 간단한 코드를 살펴보겠습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>무기의 스탯에 오신걸 환영합니다!</h1>
<p>이번 포스팅은 앵커 요소에 대해 관한 내용입니다.</p>
<p>해더 태그나 문단 태그가 기억나지 않는다면 <a href="https://moogie.tistory.com/15">여기서 공부하세요!</a></p>
</body>
</html>해당 코드를 저장하고 열어주면 다음과 같은 페이지가 나옵니다!
이때 "여기서 공부하세요!"라는 부분에 밑줄이 보이시나요?
클릭하면 href의 값인 "https://moogie.tistory.com/15"로 이동하게 됩니다!
'Web Programming' 카테고리의 다른 글
| [HTML] Tables (0) | 2023.02.14 |
|---|---|
| [HTML] Images and Favicon (0) | 2023.02.12 |
| [HTML] Text Formatting (0) | 2023.02.11 |
| [HTML] HTML Heading & Paragraph (0) | 2023.02.10 |
| [HTML] HTML Attributes (0) | 2023.02.09 |