[HTML # 14] 이미지에 링크 넣기

안녕하세요 모빌리티입니다.

 

저번 시간에 배웠던 이미지를

원하는 사이즈를 집어 넣고

이미지 태그에 관련된

전반 적인 내용에

다루었는데요

오늘은

 

 

이미지로

링크를 걸어서

다른 페이지로 이동

하는 법에 대해서 배워

보도록 하겠습니다. 아주

쉬우니 잘 따라와 주세요.

 

오늘의 키워드

 

"A href"

 

지난 시간에 배웠던 태그지요?

네 맞습니다.

 

기억을 하고 계셨다면 다행입니다.

 

 

오늘은

이렇게 이 링크 연결 태그를

응용하여 실습해 보도록 하겠습니다.

 

<HTML>

  <HEAD>
     <TITLE> 이미지에 링크넣기 </TITLE>
  </HEAD>

    <BODY>
       <P align="center">
       <IMG src="img01.gif">
           
    </BODY>

</HTML>

 

여기에서 이미지를 클릭해서

제 블로그로 링크를 건다고 한다면

다음과 같이 설정하면 됩니다.

 

<HTML>

  <HEAD>
     <TITLE> 이미지에 링크넣기 </TITLE>
  </HEAD>

    <BODY>
       <P align="center">

       <A href="http://automobility.tistory.com" target="_blank">
       <IMG src="img01.gif"></A>
            
    </BODY>

</HTML>

이 부분을 추가 하면

이미지를 클릭하여 제 블로그로

올수 있도록 링크를 등록하였습니다.

2017/06/06 - [컴퓨터/HTML] - [HTML] 홈페이지 구성 기본 태그 4가지

2017/06/06 - [컴퓨터/HTML] - [HTML #2] 메모장으로 작성하여 웹파일로 저장하기

2017/06/07 - [컴퓨터/HTML] - [HTML #3] 배경색 변경하기

2017/06/08 - [컴퓨터/HTML] - [HTML #4] BR, P, Center 태그란?

2017/06/10 - [컴퓨터/HTML] - [HTML #5] 글자를 꾸미는 폰트 속성 3가지 face, size, color

2017/06/11 - [컴퓨터/HTML] - [HTML #6] 글자를 움직이게 하는 태그"MARQUEE"

2017/06/12 - [컴퓨터/HTML] - [HTML #7] OL, LI 태그

2017/06/13 - [컴퓨터/HTML] - [HTML #8] UL, LI 태그

2017/06/14 - [컴퓨터/HTML] - [HTML #9] DL DT DD 태그

2017/06/15 - [컴퓨터/HTML] - [HTML #10] 홈페이지의 연결 하이퍼링크

2017/06/16 - [컴퓨터/HTML] - [HTML #11] 하이퍼링크 색지정

2017/06/17 - [컴퓨터/HTML] - [HTML #12] 웹페이지 상에서 특정 위치로 이동하기

2017/06/18 - [컴퓨터/HTML] - [HTML #13] 이미지 태그 IMG

 

정말 쉽지 않습니까?

 

수고하셨습니다.

 

 

 

 나눔은 

최고의 기쁨입니다.

이글이 도움이 되셨다면 아래

빈 하트를 채워주세요.

 

그리드형

이 글을 공유하기

댓글

Designed by JB FACTORY