이미지태그, 이미지 링크태그 - img src 태그로 이미지 링크걸기
| 이미지태그, 이미지 링크태그 - img src 태그로 이미지 링크걸기 |
이번시간에는 오랜만에
블로그 배우기 카테고리에 글을 작성합니다.
간단한 이미지태그에 대해서 몇 가지 알아보도록 할텐데요
img src 이미지 링크태그를 이용하여 새로운 창을 여는 방법과 이미지를 눌렀을 때
다른 창이 뜨도록 하는 이미지 링크걸기 방법을 설명해드릴게요.
링크태그를 만드는 방법과
현재창 또는 새창으로 여는 방법은 제가 작년에
자세하게 작성해놓은 글이 있으니 아래를 참고하시기 바랍니다.
앵커태그를 이용해주시면 되는데요
위에 글을 잘 읽어보셨다면 이미지로 링크를 거는 것도
어느정도 예상은 하셨을겁니다. 그럼 지금부터 이미지 링크태그 시작해봅시다.
img src 이미지 링크태그로 이미지 링크걸기
티스토리 메인창으로 이동시키는 과정을 진행해보기 위해서
티스토리 관련 이미지를 하나 준비했습니다.
위 그림은 이미지 링크걸기를 적용시키지 않은 일반 그림입니다.
그림을 눌러도 다른 페이지가 뜨지 않을거에요 ㅎㅎ
이제 이 그림을 눌렀을 때 티스토리 메인페이지가 나오도록 고쳐봅시다.
이미지태그 지정하는 법을 먼저 알아야겠죠? 아래는 이미지태그 거는 방법입니다.
물론 글쓰기 모드에서 HTML 부분에 체크 후 작성해야 합니다.
위처럼 했을 경우는 이미지를 클릭했을 때
현재 창이 링크주소의 창으로 바로 바뀌게 됩니다.
링크 걸고자 하는 주소에는 링크할 주소를 적어줍니다. 티스토리라고 가정하면
http://tistory.com 을 넣어주시면 됩니다. img src 다음에는 사진주소를 삽입합니다.
위처럼 이미지태그 소스를 지정하면
새창이 하나 더 열리면서 링크주소의 페이지가 나오게 됩니다.
중간에 target="_blank" 만 추가해주시면 됩니다.
그리고 중요한 것이 이미지 주소인데요,
자신의 컴퓨터에 있던 이미지가 웹 상에 게시가 되어야 주소를 가져오기 편리합니다.
가장 확실한 방법은 HTML/CSS 편집으로 들어가서 파일업로드를 이용하여 블로그에
이미지를 완전히 저장해놓는 방법이겠지만 매번 그렇게 하기에는 번거롭기도 하고, 업로드 용량에도
제한이 있기때문에 그닥 추천하는 방법은 아닙니다.
제가 사용했던 방법은
포스팅을 할 때 사진을 글에 업로드한 후
미리보기를 했을 때 나오는 이미지의 주소를 이용한 방법이었습니다.
이미지 링크태그를 걸기 위한 주소 가져오기를 다시 설명을 드리자면...
글을 작성하다가 이미지 하나를
올려주시고 미리보기를 누릅니다. 그러면 글 작성 도중
업로드한 이미지도 보일거에요. 그 이미지 위에 마우스를 올리고
오른쪽 버튼을 눌러서 나오는 메뉴들 중 [속성] 부분으로 들어갑니다.
여러 정보들이 있는데
그 중에서 주소(URL) 부분에 나와있는 주소 전체를
복사합니다. 그리고 아까 태그 부분에서 이미지 주소 부분에 넣어주시면 됩니다.
태그가 적용된 상태로 다시한번 정리를 하면
이렇게 작성해볼 수 있겠네요.
그럼 이 태그를 그대로 적용해서 이미지를 올려볼게요.
위 이미지는 제가 처음부분에 올렸던
이미지이지만 클릭을 했을 때 새 창으로 티스토리 메인창이
열리는 것을 확인할 수 있을겁니다.
위처럼 티스토리 메인 창이 제대로 나왔나요?
그럼 제대로 하신겁니다 ㅋ 물론 링크 주소는 여러분들이 원하는
주소로 써넣어주시면 되고 이미지주소 또한 원하는 이미지를 업로드하여
주소만 가져오면 되는 겁니다.
그럼 오늘의 이미지태그, 이미지 링크태그인 img src 태그를 이용하여
이미지 링크걸기에 대한 설명 글을 마치도록 하겠습니다. 주소와 이미지를
원하는 걸로 바꿔서 적용해보세요 ^^