🍋 a태그
문서에서 다른 문서, 다른 파일, 다른 위치로 링크를 만드는 태그
a태그의 기본 형태는 다음과 같다.
<a href="연결링크">링크를 연결할 문자 또는 이미지</a>
이와 같이 a태그는 글자(및 그림)에 링크를 부여하는데 a태그의 대상은 (href의 연결링크) html문서 혹은 주소, 파일이 될 수 있다. 또는 현재 문서 내부의 다른 요소가 될 수도 있다.
정말 여러가지로 유용한 태그다!
a태그는 줄변경을 발생시키지 않으므로 유의하여 코드를 작성한다.
(줄바꿈시 br태그나 a태그 자체를 p태그로 묶어 단락을 나누어준다)
- href : Http Reference, 링크 참조 대상
- target : 링크가 열릴 창을 설정하는 옵션으로 현재 창에서 열기 혹은 새 탭으로 열기 등으로 지정이 가능하다.
- a태그의 대상이 브라우저가 처리 가능한 파일이면 바로 열린다
- a태그의 대상이 브라우저가 처리 불가능한 파일이면 다운로드된다.
💡 따로 사용해보면 좋은 옵션
<button>버튼위에 적힐 문자</button>
버튼이 생긴다. a태그와 함께 사용시 버튼을 누르면 연결된 링크로 접속한다.
🍋 a태그 사용해보기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>test1</title>
</head>
<body>
<h1>a태그 사용하기</h1>
<p><a target="_blank" href="https://www.naver.com">네이버</a></p>
<p><a target="_blank" href="https://www.google.com">구글</a></p>
<p><a target="_blank" href="https://www.daum.net">다음</a></p>
<p>
<a href="https://www.naver.com">
<img src="클로이.PNG" width="200">
<!-- 이미지를 이용하여 링크연결 -->
</a>
</p>
<p><a target="_blank" href="https://www.youtube.com"><button>유튜브버튼</button></a></p>
</body>
</html><결과>
하나씩 설명하자면 a태그에 target="_black" 옵션은 새탭에서 열기다!
따라서 네이버, 구글, 다음 글자를 클릭하면 새탭으로 해당 홈페이지로 연결된다.
아래 이미지에는 네이버 링크를 참조하도록 하였는데
이미지의 크기가 너무 커서 width를 200으로 맞춰주었고 클릭시 바로 네이버 홈페이지가 열린다(새탭으로 가기 옵션을 넣지 않았기 때문에 현재위치에서 열리게 된다)
마지막으로는 버튼을 사용해보았는데 버튼을 누르면 유튜브창이 새탭으로 열린다.
또한 각각의 a태그는 줄변경이 안되므로 p태그로 하나씩 묶어주었다.
기초부터 시작하는 감쟈 ※ 소개글 확인해주세요!! ※