[블로그만들기] 특정한 사이트로 이동(하이퍼링크)

블로그 만들기 일곱번째

링크걸기

블로그의 글자나 이미지를 클릭을 하면, 특정 사이트로 이동시키기 위해 [링크]라는 것을 해줍니다. 이번 시간은 하이퍼링크(이하 링크)를 설정해보겠습니다. HTML 문법 TAG_태그을 아신다면 쉽게 하시겠지만, 아무것도 모르는 초보는 어떻게 만들 수 있나? 라는 고민이 빠져들수 있습니다. 

그러나 블로그에서는 아무 쉽게 마우스 클릭만으로 링크를 설정할 수 있습니다.

글쓰기 창(Editor)의 상담에 위치한 [URL]

 글자에 링크 걸기

링크걸기

마우스나 키보드로 원하시는 글자를 선택. 글쓰기창_Editor 상단에 [URL]를 누릅니다. 주소창에 주소를 넣어주시면 됩니다. 

 이미지, 그림에 링크 걸기

(이미지)는 이미지를 선택하시고 [URL]를 누시면 됩니다.

  Explorer, 크롬의 주소창에서 URL을 복사하여 붙여넣기를 하면 자동으로 링크가 걸립니다.

글자에 링크를 걸어보았습니다 :  링크걸기

주소를 복사하여 붙여넣기 : http://newhouse.tistory.com

그림에 링크를 걸기 : 

블로그는 기본적인 링크말고도 다양한 방법으로 링크를 걸 수 있습니다.

그런데. 다음 그림을 비교해보시면 왼쪽 이미지는 테두리가 있고 오른쪽 이미지는 테두리가 없습니다. 네이버 블로그의 경우에, 이미지에 하이퍼링크를 걸면 이미지에 테두리가 생깁니다. [HTML] TAG_태그를 이용하여 수정해보겠습니다.

글쓰기창 하단에 [HTML]를 눌러봅니다. 아마도 알 수 없는 외계어를 만나실 수 있습니다. 물론, 태그를 좀  아시는 분은 알수 있는 외계어. 그러나 그 외계어는 영어입니다.

자 그럼 외계어의 어느 부분을 수정해야 하는지 알아보겠습니다. 

외계어는 < 로 시작해서 >로 끝납니다. 이미지에 관한 부분의 시작은 < img 입니다. 위에 이미지에 관한 구간은 < img width="300" 으로 시작하여 138665725650984935"> 끝나는 부분까지 것을 알 수 있습니다. 물론, 여러분이 올려놓은 이미지에 따라 약간 다릅니다. 중요한것은 < img 로 시작해서 다음 > 이 나오는 부분을 찾으시면 됩니다. 

마지막 > 앞에 border="0" 를 넣어주시고 , 하단의 Editor를 눌러 확인해보면 이미지 테두리가 사라집니다.

네이버 HTML를 보면 아주 복잡합니다. 본래 홈페이지를 만들 때 이렇게 복잡하지는 않은데, CSS 및 각종 소스가 혼합되어 만들어져서 인지 매우 복잡하네요.

보통 이미지링크 및 이미지을 보여주는 태그는

<a href="주소"><img src="이미지경로" style="max-width:100%;" border="0"/>

이 정도면 되는데... 아무리 복잡해도 기본 구성이 같습니다.

추가로 

<img src="이미지경로" style="max-width:100%;" border="0"/>

인터넷에 이미지가 있는 위치를 [이미지경로]에 넣으면 그 이미지가 표시됩니다.

 http://www.classedu.co.kr/images3/date_9.png 의 이미지를 넣어보면 다음과 같이 표시되는 것입니다.

막 입문하시는 분들은 어려우실 수 있겠지만, 

나중에 피가 되고 살이 되니 차근차근 따라 해보시기 바랍니다.