이번 포스트에서 티스토리 블로그 운영에 필요한 HTML 태그들을 모조리 정리해드리겠습니다. 티스토리 블로그는 타 블로그 서비스(ex.네이버, 다음 등)과는 달리 무한한 가능성을 숨기고 있습니다. HTML/CSS가 뭔지 하나도 모르시는 분들에게는 그냥 티스토리라는 블로그 서비스겠지만 태그를 활용할 줄 아시는 분들에게는 이보다 더 좋은 블로그 서비스는 없을 것입니다. HTML을 처음 접하시는 분들도 쉽게 이해할 수 있게 설명하겠습니다. 아래부터 소개하는 태그를 바로바로 연습해보고 싶으시다면 여기를 클릭하시면 됩니다.
1. 가장 기본적인 태그면서 가장 많이 쓰이는 태그를 첫번째로 소개하겠습니다.
<img src="이미지 URL">
HTML 소스 사용이 가능한 특정 위치에 이미지나 배너를 삽입하고 싶을 때 사용하는 태그입니다. 예를 들어 티스토리 블로그 사이드바에 본인 블로그명이 새겨진 이미지를 삽입하고 싶으시면 '관리센터 - 꾸미기 - 사이드바' 의 순서로 들어가셔서 HTML 배너출력을 드래그해 사이드바 블록에 끼워넣으시고 <img src="이미지 주소"> 태그를 그대로 쓰시면 됩니다. 이미지 URL 은 어떻게 복사할까요? 아예 게시글 하나를 '비공개' 로 작성하시고 거기에 블로그에 쓰일 여러 이미지들을 모두 업로드하세요. 글 작성완료하시고 업로드 된 이미지에 커서를 두고 오른쪽 마우스 클릭하시면 주소 복사하실 수 있습니다.
2. 두번째는 '하이퍼링크 태그' 입니다.
<a href="연결할 URL">사용자 지정 텍스트</a>
사용방법은 간단합니다. <a href= 입력하시고 "-" 사이에 하이퍼링크 걸 URL 을 입력하신 후 끝에 </a> 만 붙여주시면됩니다. 예를 들겠습니다. "여기를 클릭하시면 륜의 블로그로 이동합니다. " 를 HTML 소스로 작성하려면 어떻게 하면 될까요? <a href="http://ryun1004.tistory.com">여기</a>를 클릭하시면 륜의 블로그로 이동합니다. 와 같이 작성하시면 됩니다. 간단하죠?
하이퍼링크 태그를 활용해 단순 텍스트가 아닌 이미지에도 링크를 거실 수 있습니다. 눈치 채셨나요?
이미지에 하이퍼링크를 걸고 싶으시다면 아래와 같이 작성하시면 됩니다.
<a href="연결할 URL"><img src="이미지 URL"></a>
3. 세번째로 폰트에 여러 특징을 줄 때 사용하는 태그입니다.
<b>사용자 지정 텍스트</b> ←폰트 굵게
<font face="궁서, 돋움 등">사용자 지정 텍스트</font>
<font color="영문 색상명(ex.red, blue 등)">사용자 지정 텍스트</font>
<font size="크기 포인트 숫자(ex.10, 12, 15, 18 등)">사용자 지정 텍스트</font>
특별한 설명이 필요없는 간단한 태그입니다.
4. HTML 환경에선 엔터키로 백날 엔터쳐봐야 엔터 절대 안됩니다. <br>이 HTML 에서 엔터의 기능입니다. 태그연습장에서 직접 연습해보시면 바로 이해하실 겁니다.
5. 다음 태그는 필수 태그는 아니지만 <marquee> 라는 태그입니다. 제 블로그 사이드바 검색창 위에 텍스트가 흘러가는게 보이시나요? 저 효과를 <marquee> 태그 하나로 주실 수 있습니다.
<marquee>사용자 지정 텍스트</marquee>
marquee 태그의 경우 흘러가는 속도, 방향, 깜빡임 등을 지정할 수 있는 태그도 있으나 너무 복잡해지기 때문에 간단하게 베이직 태그만 설명했습니다. 자세한 내용은 여기를 클릭하세요.
5가지 정도 설명을 드렸습니다. 다른건 몰라도 1번과 2번 태그는 확실하게 익히시면 티스토리 블로그 스킨 수정이나 첫화면(테터데스크, 티에디션) 수정 시 정말 유용하게 쓰이니 꼭 기억하시기 바랍니다. 제 블로그 첫화면에도 1번과 2번 태그가 엄청나게 많이 사용됐으니 말입니다. 멋진 티스토리 블로그 만드셨으면 좋겠습니다. 이상입니다.
Comments