HTML 이미지 넣고 링크 걸기
[HTML 쉽게 따라하기] 이미지 넣고 링크 거는 방법
블로그를 꾸미거나 홈페이지를 꾸밀때 이미지를 넣는 일은 당연히 들어간다. 글로만 들어간다면 너무나 밋밋하지 않겠는가?
오늘은 이미지를 넣는 태그와 넣은 이미지에 링크를 거는 방법을 알아 보겠다.
이미지를 넣는 기본 소스는 아래와 같다.
-----<예시1>------------------------------------------------------------------------------------
<html>
<head>
<title> 이미지 넣기 </title>
</head>
<body>
<center>
이미지를 넣었어요!!! <br>
<img scr="이미지 경로.jpg">
</center>
</body>
</html>
--------------------------------------------------------------------------------------------------
전체 소스에서 빨간색 부분이 이미지를 삽입하는 태그이다.
이미지 경로란 이미지가 저장되어 있는 곳을 의미한다. PC로 따지면 저장된 폴더 경로에 해당된다.
예를들면 jpg 확장자를 가진 pig라는 이미지가 D드라이브에 document 라는 폴더에 이미지가 저장되어 있다면 이미지 경로는 "D:/document/pig.jpg" 가 된다.
PC상에서 작업을 하여 PC에서만 본다면 이미지는 PC에 저장되어 있으면 되지만 웹상에서 보여지려면 이미지도 웹상에 저장되어 있어야 한다. 웹상에서의 저장공간은 개인적으로 구매를 하거나 무료로 주는 곳에 가입하거나 혹은 티스토리 같은 블로그를 한다면 블로그를 사용할 수도 있다.
티스토리를 사용하고 있다면 티스토리에 이미지를 업로드해서 생성되는 주소를 사용하면 된다. 방법을 잘 모르겠다면 아래 링크되어 있는 포스팅을 참고하기 바란다.
[IT & WEB/HTML 쉽게 따라하기] - 티스토리를 활용하여 웹 저장 공간을 만들어 보자
이미지의 크기를 지정해 줄 수도 있다.
넓이(widht) 와 높이(height) 에 픽셀값이나 퍼센트(%)값을 적용할 수 있다.
위 예시에 퍼센트 값을 적용하여 줄여 보겠다.
-----<예시2>------------------------------------------------------------------------------------
<html>
<head>
<title> 이미지 넣기 </title>
</head>
<body>
<center>
이미지를 넣었어요!!! <br>
<img scr="이미지 경로.jpg" width="50%" height="50%"/>
</center>
</body>
</html>
--------------------------------------------------------------------------------------------------
링크를 걸기 위해서 img 태그에 a 링크를 걸면 된다.
a 링크 태그는 <a href="링크될 주소"> html 태그 또는 텍스트 </a> 이다.
이미지에 링크를 걸기 위해서는 img 태그를 <a> <a>사이에 넣으면 된다.
-----<예시3>-----------------------------------------------------------------------------------
<html>
<head>
<title> 이미지 넣기 </title>
</head>
<body>
<center>
이미지를 넣었어요!!! <br>
<a href="링크 주소"> <img scr="이미지 경로.jpg" width="50%" height="50%"/></a>
</center>
</body>
</html>
--------------------------------------------------------------------------------------------------
이대로 적용을 하면 이미지가 보이고 이미지를 클릭할 때 링크된 주소로 이동을 하게 된다.
그런데 만일 위대로 적용을 하면 스타일에 따라 이미지 테두리에 사각형이 생결 수 있다.
그것이 보기 싫다면 border 처리를 해줘야 하는데, 이미지 태그에 border="0" 을 삽입해주면 된다.
-----<예시4>-----------------------------------------------------------------------------------
<html>
<head>
<title> 이미지 넣기 </title>
</head>
<body>
<center>
이미지를 넣었어요!!! <br>
<a href="링크 주소"> <img scr="이미지 경로.jpg" border="0" width="50%" height="50%"/></a>
</center>
</body>
</html>
--------------------------------------------------------------------------------------------------
이미지를 넣는 방법과 이미지에 링크를 거는 html 태그 소스를 알아 보았다.
좀 더 예쁜 홈페이지를 꾸밀 수 있게 되었기를 바란다.
이 글을 공유합시다
