이 링크 태그 없으면
웹사이트 절반은 기능을 잃습니다.
진짜예요. 😮
안녕하세요!
초보자를 위한 감성 HTML 수업에 오신 걸
진심으로 환영합니다 ☕
우리는 오늘,
웹페이지의 '길'을 만들어주는
아주 특별한 태그 하나를 만나게 될 거예요.
어디론가 연결되고 싶었던 HTML의 마음을
들어줄 수 있는 태그랍니다. 💌
그럼, 오늘의 태그로 함께 떠나볼까요?
오늘의 주제는 바로 <a> 태그입니다.
하이퍼링크의 모든 것 ✨
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>a 태그 기본 사용 예제</title>
</head>
<body>
<p>아래 텍스트를 클릭해 보세요.</p>
<a href="https://www.naver.com">네이버로 이동</a>
</body>
</html>
위 코드는 HTML에서 가장 기본적인 링크 구조를 보여줍니다. <a>는 Anchor, 즉 ‘닻’을 의미하는 태그인데요,
이 태그 덕분에 한 페이지에서 다른 페이지로
혹은 같은 페이지의 특정 지점으로 이동할 수 있어요.
중요한 속성은 바로 href입니다.
‘Hypertext REFerence’의 약자로,
우리가 링크를 통해 연결하고자 하는 주소(URL)를 담아주는 역할을 해요.
위 예제에서는 “네이버로 이동”이라는 문장이
실제로 클릭할 수 있는 링크가 되고,
클릭 시 네이버 사이트로 이동하게 되죠.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>a 태그 응용 예제</title>
<style>
a {
color: #89b4f8;
font-weight: bold;
text-decoration: none;
}
a:hover {
color: #f2a2a2;
text-decoration: underline;
}
</style>
</head>
<body>
<h2>📎 즐겨찾기 링크 모음</h2>
<ul>
<li><a href="https://www.google.com" target="_blank">구글 검색</a></li>
<li><a href="https://www.youtube.com" target="_blank">유튜브 보기</a></li>
<li><a href="https://www.github.com" target="_blank">깃허브 탐색</a></li>
</ul>
</body>
</html>
이번에는 CSS와 함께 스타일을 더한 링크 예제예요. a 태그의 기본 색상은 브라우저가 정해주지만,
우리는 스타일을 통해 색상을 조절할 수 있어요.
기본 링크는 스카이블루,
마우스를 올렸을 땐 인디핑크로 변하고 밑줄이 생기죠.
또 target="_blank" 속성 덕분에
링크가 새로운 탭에서 열리기 때문에
사용자는 원래 페이지를 잃지 않고 다른 사이트도 동시에 열 수 있어요.
사용자 친화적인 링크, 어렵지 않죠? 😊
💡 보너스 팁!
같은 페이지 내에서 위치 이동도 가능해요!
예를 들어, 글의 맨 위에 <a href="#contact">문의하기로 이동</a>라고 쓰고,
아래쪽에 <div id="contact">를 만들어 놓으면,
클릭 시 자동으로 그 지점으로 스크롤이 이동하게 됩니다.
긴 글이나 목차에 딱이죠!
HTML 태그 하나를 배운다는 건,
웹을 구성하는 언어를 한 단어씩 익혀나가는 일이에요.
오늘의 <a> 태그,
당신의 웹 페이지를 더 넓은 세상과 연결해줄 수 있을 거예요. 🌍
다음에 새로운 태그와 함께
감성적인 코드 여행 떠나요 🌿
👉 더 많은 HTML 팁은 제 블로그에서 확인해보세요 https://jjaeho.tistory.com
배웠다 말았다 다시 시작했다😎
흥미로운 나만의 홈페이지를 만들기 위한 공간입니다. #Pixel #Art #HTML #CSS #JAVASCRIPT
jjaeho.tistory.com
'HTML,CSS,JavaScript > HTML,CSS,JAVASCRIPT' 카테고리의 다른 글
| [HTML] div태그 기본인건 알지?? (1) | 2025.04.03 |
|---|---|
| [HTML] li 지금까지 제대로 썼어?? (1) | 2025.04.03 |
| [HTML] Box 박스 모델 활용 CSS (0) | 2022.11.03 |
| [HTML] input 활용하기 (0) | 2022.11.02 |
| [HTML] 주석 활용하기 (0) | 2022.11.01 |
