[링크배너만들기]링크를 활용하여 여기저기 이동하기

블로그 사용이나 홈페이지 운영중

간단한 링크를 통해 활용도를 높인다면,

알아둘 가치가 있다고 생각합니다.

많은 사람들이 알고 있고, 손쉬운 방법을 안내드리겠습니다.

첫번째, 텍스트를 활용한 링크방법 입니다.

포토샵을 이용한 이미지를 통해 링크를 건다면 

좀더 깔끔하고 전달력이 좋지만, 본의 아니게 이미지 사용이 불가할시

텍스트로 사용할수도 있습니다.

클릭!!

*위 클릭을 누를시 일상의 남김 티스토리 메인화면으로 이동되게 됩니다.

방법은 간단합니다.

1) 우측상단 HTML 체크박스를 클릭합니다.

2) 아래와 같이 화면이 나옵니다.

*HTML에디터에 대한 간략한 설명입니다.

간단하게 설명을 드리자면

티스토리도 그렇고 보통 블로그의 경우

게시글작성이 이지윅에디터같은 프로그램이 장착되어있습니다.

 HTML언어가 적용되어 간단한 코드입력이 가능합니다.

P 라는 언어도 보이고 span이라는것도 보이는데

민트색영역을 기준으로 설명을 드리자면,

<p style="text-align: center;"> <span style="font-size:18px;"><a href="htp://ricelife.tistory.com">클릭!!</a></span></p>

빨간색 영역으로 된 P의 경우 문단을 나타나는 태그입니다.

그리고 노란색 영역으로 된 span 태그의 경우 영역을 구분짓는 역할입니다.

그리고 style을 각 해당영역의 명령어 값을 넣는 태그입니다.

글작성시 저는 클릭이라는 글씨의 정렬을 '가운데정렬'로 하였고,

폰트크기는 18pt로 하였습니다.

P태그와 spna태그의 스타일값에 에디터에서 작성한 값이 html언어로 나타난것입니다.

3) 링크의 가장중요한 부분 a태그 입니다.

위의 보라색영역인 

a 태그 부분입니다.

a. 클릭!! 이라는 글씨를  <a> </a>로 감쌉니다.

b. 그러면 이런형태로 되는데 뭔가 다릅니다.<a> 클릭!!</a>

c. 중간에 href 라는 값이 있는데 , 이태그는 주소를 나타내어 클릭시 입력해놓은 주소로 이동되게 됩니다.

d. 주소를 href="http://ricelife.tistory.com" 으로 설정

(여려분은 각자의 주소로 테스트해주시면 됩니다.)

e. 그러면 <a href="htp://ricelife.tistory.com">클릭!!</a> 이 틀이 완성됩니다.

이상입니다.

다음번에는 새창으로 이동되는 법을 안내해놓겠습니다.

2016/09/05 - [일상의 정보/일상의 HTML] - Tstory에 유튜브영상 불러오기

2016/09/06 - [일상의 정보/일상의 HTML] - Tstory에 유튜브영상 불러오기2 feat.자동재생편

2017/03/28 - [일상의 정보/일상의 정보] - 블로거라면 시작해볼만한 부업 "텐핑(10PING)"