본문 바로가기
카테고리 없음

티스토리 블로그 이미지, 글에 링크 연결하기, 하이퍼링크 사용방법

by 사자와 같이 2023. 12. 29.
반응형

티스토리 블로그를 통해 검색을 하다보면 이미지나 글을 클릭하면 다른 페이지로 넘어가는 것을 보게됩니다. 지금 보고있는 블로그의 추가적인 내용이나 다른 정보들을 볼 수있도록 연결해놓은 것입니다. 이것을 하이퍼링크 라고 하는데요. 처음에는 이런건 어려운거 아닌가 라는 생각이 들지만 막상 사용해보면 너무나도 간단하게 할 수 있습니다. 무엇이든 해보지 않으면 오히려 어렵게 느껴지니까요. 이미지와 글에 링크를 연결하는 하이퍼링크에 대해서 알아보겠습니다 .

 

목차 

1. 블로그 이미지에 하이퍼링크 연결하기

2. 글에 하이퍼링크 연결하기

 

 

 

 

1. 블로그 이미지에 하이퍼링크 연결하기

우선 내가 원하는 이미지를 블로그에 불러옵니다. 불러오는 방법을 알려드릴께요. 티스토리 상단 바의 모습입니다. 

여기서 제일 좌측에 보이는 이미지 불러오기 아이콘을 눌러주세요. 그러면 아래와 같이 사진, 파일, 동영상, 슬라이드쇼중 하나를 선택하라고 나옵니다. 여기서 사진을 선택해주세요. 

그러면 파일탐색기가 열립니다. 여기서 내가 원하는 이미지를 클릭해서 화면에 불러오면 됩니다. 

 

저는 여기서 oranges라고 시작하는 파일을 열어보겠습니다. 그러면 오른쪽 사진처럼 화면에 이미지가 나타날겁니다. 

이제 불러온 이미지를 한번 클릭해주세요. 그러면 이미지 상단에 메뉴바가 생길겁니다. 

이 메뉴바에서 오른쪽 끝에서 두번째에 위치한 고리모양을 클릭해주세요. 

그러면 보시는 것처럼 URL이라는 것과 대체텍스트, 새창으로 열기가 보입니다. 여기에 이미지를 클릭했을 때 이동하려는 URL을 복사해서 URL칸에 붙여넣기를 한 후 확인 버튼을 눌러주시면 됩니다. 저는 www.daum.net라고  고 입력해보겠습니다. 이렇게 입력하고 확인을 눌러주세요. 

 

확인을 누르게 되면 이미지는 아무 변화가 생기지 않습니다. 내가 제대로 입력했는지, 링크설정이 되었는지 확인하려면 이미지를 한번 클릭해주세요. 그러면 아까 입력을 위해 눌렀던 고리모양이 검정색으로 변해있을 거에요.

이렇게 아이콘이 검정색으로 되었다면 링크는 입력이 된 것입니다. 

 

이렇게 되었다고 글을 쓰는 화면에서 아무리 이미지를 눌러도 이동하지는 않습니다. 포스팅을 발행한 후에 이미지를 클릭해야지만 적용했던 URL로 이동하게 됩니다. 아래이미지를 클릭해보시면 다음사이트로 이동하는 것을 확인하실 수 있을겁니다 .

 

2. 글에 하이퍼링크 연결하기

글은 이미지 보다 더 간단합니다. 제가 지금 글을 쓰면서 링크를 글로 써보겠습니다. www.daum.net   라고 작성을 하면 바로 글자색이 파란색으로 변경됩니다. 링크를 글로 쓰면 바로 하이퍼링크가 적용되기 때문입니다. 하지만 링크가 길거나 직접적으로 링크를 쓰는 것은 글을 보기 불편하게 만들 수 있기 때문에 글자를 쓰고 하이퍼링크로 연결을 한다면 보기가 좀더 쉬워질 것입니다. 

 

카카오지도라고 쓰고 이 글자를 하이퍼링크로 연결해보겠습니다. 

우선 카카오지도라는 글자를 마우스의 왼쪽 버튼을 누른뒤 긁어주세요(드래그해주세요)

 

 그러면 보시는 것처럼 글자가 파란색이 됩니다. 이상태에서 티스토리 상단 메뉴에서 오른쪽을 보면 이미지에 하이퍼링크를 연결할 떄와 같은 고리모양의 아이콘을 찾을 수 있습니다. 

이미지에 링크를 연결할 때와 마찬가지로 URL 이라고 표시된 부분에 원하는 링크를 넣어주세요. 저는 카카오맴의 URL을 넣어주겠습니다. 

 

이렇게 입력하고 확인을 눌러주면 아래보시는 것과 같이 카카오지도라는 글자가 파란색에 밑줄이 생긴 것을 보실 수 있을겁니다. 

 

카카오지도

 

위에 카카오지도라는 글자를 눌러보시면 해당하는 링크로 이동하는 것을 확인하실 수 있습니다. 

 

추가로 말씀드리면 이미지와 글 모두 하이퍼링크를 적용할 때 "새창으로 열기"라는 체크박스를 보실 수 있습니다. 이것에 체크가 되어있다면 내가 보고있는 화면은 그대로 두고 다른 창을 열어 링크로 연결한다는 의미입니다. 

체크박스를 해제하면 지금 보고 있는 화면은 사라지고 해당하는 링크로 전환이 된다는 의미입니다 .

 

간단하게 하이퍼링크를 사용하는 방법을 알아보았습니다.

천천히 따라하시면 어렵지 않게 사용방법을 배울 수 있을 것입니다. 

반응형