[HTML] Link 태그 사용하기

안녕하세요 냥장판 입니다

지난 게시글에서는 Link 태그 기본사용법에 대해서 살펴봤어요

2020/01/09 - [놀고있네/HTML & CSS] - [HTML] Link 태그 사용하기 - 기본편

[HTML] Link 태그 사용하기 - 기본편

목표: Link 태그 사용하기 요약 URL 하이퍼링크 걸기: href 이미지 하이퍼링크 걸기: href, img 안녕하세요 냥장판 입니다 HTML문서에는 Link 또는 Hyperlink 라는 태그가 있어요. 이 태그는 다른 html 문서나 이..

miaow-miaow.tistory.com

이번 시간에는 Link 태그로 이미지를 올려놓고,

이 이미지를 다운받을 때 사용하는 속성에 대해 알려드릴게요

1. download 속성

download 속성 사용방법은 아래와 같아요.

이미지 주소를 복사해서 넣고요

이렇게 뜹니다

파일을 저장해보면

원본 이미지 파일 이름 그대로 저장이 되는 것을 확인할 수 있어요.

2. 다운로드하는 파일명을 바꾸고 싶어요!

저장하는 파일명을 내 마음대로 설정하고 싶을 때!

기본 틀은 아래와 같아요.

경우에 따라 적절하게 사용하면 됩니다.

2.1 서버에 파일이 있는 경우

저는 earth-day.png 라는 파일을 서버에 뒀어요.

원하는 파일명을 download 속성 뒤에 지정해봅니다.

클릭해보면요

2.2 URL 로 파일을 링크한 경우

똑같아 보이지만 뭔가 다르죠?

결과는 아래와 같아요

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <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>
        <P><a href="https://miaow-miaow.tistory.com">냥장판 블로그로 이동 🐱‍👤!</a></P>
        <hr>
        <h3>그냥 다운로드 하기</h3> 
        <p>
            <a href="https://image.flaticon.com/icons/png/512/1598/1598401.png" download="ppl.png">
                <img src="https://image.flaticon.com/icons/png/512/1598/1598401.png" alt="save the earth" width="128px" height="128px">
            </a>
        </p>
        <h3>파일 이름 바꿔서 다운로드 하기 - 서버에 있는 경우</h3>
        <p>
            <a href="earth-day.png" download="지구를 사랑합시다.png">
                <img src="earth-day.png"" alt="save the earth" width="128px" height="128px" download="abc.png">
            </a>
        </p> 
        <h3>파일 이름 바꿔서 다운로드 하기 - URL을 사용하는 경우</h3>
        <p>
            <a href="#" download="지구를 보호합시다.png">
                <img src="https://image.flaticon.com/icons/png/512/1598/1598432.png" alt="save the earth" width="128px" height="128px" download="abc.png">
            </a>
        </p>
    </body>
</html>

브라우저 바꿔가면서 테스트해보세용

사실 위에 a href="#" 를 권고하지 않아요.

왜냐면

저는 HTML 문서만 작업중이라, 즉각적인 반응을 보기 위해서 사용한 것이죠.

CSS나 Javascript 등은 완전 배제되어 있기 때문이죠

중요한 건!

알아두면 뭐든 득이 되니까요 호홍

이미지 주소 어디서 복사해요?

우선 마음에 드는 이미지를 찾습니다.

전 Flaticon을 자주 애용합니다.

마우스 오버 후 마우스 우클릭을 하세요

그럼 https://image.flaticon.com/icons/png/512/1598/1598431.png

이렇게 생긴 주소가 복사될거에요

끝 - 쉽죠?

그럼 이만!

저작자표시

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

[HTML, Chrome] 크롬에서 HTML 작업하기 - 개발자도구 (6)	2020.01.14
[HTML] Link 태그 사용하기 - 맨위로 이동 (7)	2020.01.11
[HTML] Link 태그 사용하기 - 기본편 (4)	2020.01.09
[HTML] 엔티티, Entity란? (0)	2019.12.23
[HTML] Time 태그 사용법 알아보기 (7)	2019.12.20

냥장판