티스토리 블로그에 글을 작성할 때 이미지에도 링크를 걸 수가 있다. 배너같은 광고 이미지라던지 버튼같은 이미지를 삽입하고 추가 정보를 확인하려면 클릭해서 이동해달라고 요청할 때 사용한다. 이미지에 링크거는 방법은 아주 간단하니 한번만 보면 누구나 따라할 수 있다.
이미지에 링크 거는 방법
🔺 티스토리 블로그 글작성 화면에서 사진업로드를 눌러서 이미지를 올린다. 본문에 삽입된 이미지를 클릭하면 위와같이 이미지 부분이 선택되는데, 여기서 상단 메뉴바에 링크 아이콘을 클릭한다. (오른쪽에서 두 번째)
선택된 부분에 어떤 주소로 링크를 걸 것인지 url 입력하는 팝업이 뜬다. 여기에 내가 걸고싶은 링크주소를 입력한 뒤, 확인을 눌러주면 된다.
기본옵션으로 새창 뜨기가 선택되어 있다. 현재 보던 화면은 놔두고 새로운 탭을 열어서 링크 주소로 접속하게 된다. 새창으로 열기를 체크 해제하면 현재 창 상태에서 페이지가 변경된다.
방문자가 참고 페이지를 보고 다시 본문으로 돌아오길 원한다면 새 창으로 열기를 선택하고, 애드센스 전면광고를 띄우고 싶거나 해당 페이지로 전환시키는게 목적이라면 해제하면 된다.
링크걸기 HTML 개념
위 방법을 알아도 링크를 간단히 걸 수 있겠지만, 하이퍼링크의 개념을 알고 간단한 HTML 입력방법도 소개하기 위해 한가지를 더 설명한다.
일단 에디터에서 사진업로드를 눌러서 이미지를 올리는 것은 위와 같다. 이미지가 본문에 들어오면 편집창 우상단의 기본모드를 누르고 HTML 모드로 변경한다.
1 | <p style=”text-align: justify;”>이미지파일 치환자</p> | cs |
그러면 방금 올린 이미지가 위와 같은 형태로 HTML 코드가 보일 것이다. 치환자라고 쓴 부분은 실제로는 ## 어쩌고저쩌고 이런식으로 씌여있다. 그걸 건드릴건 아니니 신경쓰지 말자.
링크를 거는 HTML 명령어는 <a> 이다. 치환자 씌여진 부분의 앞뒤로 아래와 같이 입력해주면 된다.
1 | <p style=“text-align: justify;”><a href=“tali.kr” target=“_blank”>이미지파일 치환자</a></p> | cs |
모든 HTML 명령어는 <>로 시작하고 </>로 마친다. <> ~ </> 사이에 있는 부분에 이 명령을 지정하겠다는 뜻이다. <a>가 하이퍼링크를 걸어주는 명령어이고, href=”주소” 이런 형태로 입력한다. 뒤에 target=_blank 이부분은 클릭시 새창으로 띄운다는 옵션이다.
위처럼 이미지파일 앞뒤에 HTML <a> 명령어로 지정해줘도 동일하게 이미지 링크가 걸리게 된다. 일일이 HTML 상태에서 이렇게 링크를 거는 것은 불편하므로 실제로 하진 않겠지만, 혹시 작업한 글에 문제가 생겼다던지 수정이 필요할 때 알고 있으면 도움이 된다.