[HTML] Link 태그 사용하기

목표: Link 태그 사용하기

요약

URL 하이퍼링크 걸기: href
이미지 하이퍼링크 걸기: href, img

안녕하세요 냥장판 입니다

HTML문서에는 Link 또는 Hyperlink 라는 태그가 있어요.

이 태그는 다른 html 문서나 이미지 파일 등을 연결할 때 사용합니다.

말 그대로 링크한다는 개념이에요.

위에 그림을 보면 Hello 라는 컨텐츠에

a 태그와 href 속성을 사용해서 링크를 한다는 개념입니다.

자세히 살펴보죠

1. URL 하이퍼링크 걸기: href

링크(a) 태그는 반드시 href 속성이 설정되어 있어야됩니다.

href 속성이 없다면, 다른 속성(target, download, rel, rev, hreflang, type, referrerpolicy)들도 사용할 수 없어요.

기본 Link 태그(a)에 href 속성을 사용한 구문은 아래와 같아요.

냥장판 블로그로 이동하고 싶은 거죠

▼ 코드 보기

<!DOCTYPE html>
<html>
    <head>
        <title>링크 태그 🐱‍👤</title>
        <link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script&display=swap&subset=korean" rel="stylesheet">
        <style>
            body {
                font-family: 'Nanum Brush Script', cursive;
            }
        </style>
    </head>
    <body>
        <h1>Link Tag</h1>
        <hr>
        <a href="https://miaow-miaow.tistory.com">냥장판 블로그로 이동 🐱‍👤!</a>
    </body>
</html>

     style="display:inline-block;width:740px;height:200px"
     data-ad-client="ca-pub-9512983930357661"
     data-ad-slot="5785466884">

2. 이미지 하이퍼링크 걸기: href, img

텍스트를 클릭해서 블로그에 들어가 지는 것 말고

이미지를 클릭해서 블로그로 이동하고 싶을 때는

img 태그를 추가로 사용해야 합니다.

이미지 삽입하는 기본 방법은 아래 게시글을 참고하세요

2019/11/23 - [놀고있네/HTML & CSS] - [HTML] 이미지 삽입하기

[HTML] 이미지 삽입하기

목표: 이미지를 넣어보자 요약 HTML 파일 내에 이미지 파일이 있는 경우: 이미지 이름 넣기 다른 서버에 있는 이미지를 사용하는 경우 이미지 URL을 링크하는 경우: hyperlink tag 사용 이번 게시글에서는 HTML 파..

miaow-miaow.tistory.com

중복적인 내용이지만 Link 태그 설명을 위해 한번 더 하겠습니당

사용방법은 아래와 같아요

작성하고 실행해 보죠!

아래 이미지를 클릭하면, 냥장판 페이지로 이동하게 만들었어요!

URL 클릭하면 색이 변하던데요?

어떤 단어를 검색해서 사이트를 찾았어요.

처음에는 URL 주소가 파란색이 었는데,

클릭하고 나서 보니까 보라색이 되어 있던 적 있죠?

그 이유는 link 태그의 스타일 규칙이 있기 때문입니다!

방문 전 링크는 파란색

방문 한 링크는 보라색

내가 클릭하고 있는 링크는 빨간색

신기하죠?

더 다양한 태그 사용법도 꾸준히 올릴게요

그럼 이만!

저작자표시

'🎪 놀고있네 > HTML & CSS' 카테고리의 다른 글

[HTML] Link 태그 사용하기 - 맨위로 이동 (7)	2020.01.11
[HTML] Link 태그 사용하기 - download 속성 (6)	2020.01.10
[HTML] 엔티티, Entity란? (0)	2019.12.23
[HTML] Time 태그 사용법 알아보기 (7)	2019.12.20
[HTML] FORM - 간단한 회원가입 페이지 만들기 (4)	2019.12.17

냥장판