티스토리는 네이버, 다음 등의 타 블로그 서비스와는 달리 사이트의 HTML과 CSS 스타일 시트를 직접 수정해 블로거 입맛대로 사이트를 커스터마이징할 수 있습니다. 하지만 별다른 지식없이 무모하게 건드렸다간 사이트가 깨지는 불상사를 초래하기 때문에 반드시 공부가 필요한 부분입니다.
1. 기본중의 기본, 가장 많이 사용하는 이미지 태그
1 | <img src="이미지주소"> |
이 태그는 무조건 그냥 알고있으면 정말 편한 태그입니다. 블로그 내의 어디가 됐든 원하는 자리에 저 태그 하나만 쓰면 바로 이미지가 출력되니깐요. 사용 예를 간단하게 들어드리면 출력하고 싶은 이미지의 주소가 A라 가정하면 원하는 위치에 그냥 <img src="A"> 라고 입력만 하면 바로 그 자리에 이미지가 출력됩니다! 간단하죠?
2. 하이퍼링크 걸어주는 태그
1 | <a href="연결할 주소">사용자 지정 텍스트</a> | cs |
에디터에는 텍스트에 하이퍼링크를 걸어주는 도구가 있지만 HTML 환경에선 그런 도구가 있을리 없죠. 직접 코드로 링크를 걸어줘야하는데 그 때 쓰는 태그가 바로 a href 태그입니다. 사용법은 간단합니다. HTML 환경에서 'Naver' 란 텍스트를 클릭하면 네이버 홈페이지로 이동하게 하고 싶다면 아래와 같이 작성하시면 됩니다.
1 | <a href="https://www.naver.com">Naver</a> | cs |
3. 1번과 2번 태그를 활용하면?
1 | <a href="연결할 주소"><img src="이미지주소"></a> | cs |
그렇습니다. 이미지에 하이퍼링크를 걸 수 있습니다. 배너 출력 시 가장 많이 사용하는 태그입니다. 긴 설명 생략하고 사진 한 장으로 보여드리겠습니다. 제 블로그 배너를 출력 후 클릭 시 제 사이트로 이동시켜주는 HTML 태그는 다음과 같습니다.
1 | <a href="http://ryun1004.tistory.com"><img src="https://tistory3.daumcdn.net/tistory/517400/skin/images/title.PNG"></a> | cs |
위와 같이 태그 작성 시 출력 결과물은 아래와 같습니다. 클릭하시면 메인화면으로 이동하게 됩니다.
여기까지는 사실 3년전 [2015/10/12 - [블로그/└ 티스토리] - 티스토리 블로거라면 꼭 알아두어야 할 HTML 태그들]에서 한번 소개를 해드린 바 있습니다. 정말 기본중에 기본이라고 할 수 있죠. 지금부턴 포스트 제목에 걸맞게 좀 더 '심화편' 으로 넘어가보도록 하겠습니다.
심화1. 이미지와 이미지 사이에 빈공간을 주고 싶을땐?
1 | | cs |
너무 간단해서 놀라셨나요? 이미지 태그 사이에 띄어쓰기를 해도 HTML 상에선 전혀 변화가 없습니다. 빈공간을 만들어주는 태그를 이미지 태그 사이에 직접 작성하셔야 합니다. 아래와 같이 말이죠.
1 | <img src="공간 왼쪽의 이미지 주소"> <img src="공간 오른쪽의 이미지 주소"> | cs |
공간을 더 많이 주고싶다면? 태그를 더 많이 작성하면 됩니다. 이렇게요!
1 | <img src="공간 왼쪽의 이미지 주소"> <img src="공간 오른쪽의 이미지 주소"> | cs |
심화2. 스타일 작성하기
텍스트 작성할 때마다 거기에 줘야 할 스타일을 하나하나 HTML 태그로 다 작성하기는 너무 귀찮죠? 스타일 값을 미리주고 나중엔 괄호로 태그만 주는겁니다. 말로하면 어려우니 코딩을 보여드리죠.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <head> <style> h1{ font-family : HY헤드라인 ; font-size : 30px ; color : red ; font-style: italic ; font-weight: bold; text-align : center ; text-decoration: underline ; } </style> </head> <body> <h1>륜의 블로그</h1> </body> | cs |
보시는 바와 같이 <style> 태그를 사용하여 <head> 섹션 안에 폰트 스타일을 주고 <body> 섹션에서 해당 스타일이 필요한 텍스트에 <h1> </h1> 스타일 태그만 붙여도 효과가 바로 들어갑니다. 결과는 아래와 같습니다.
륜의 블로그
이걸 그냥 폰트 스타일 HTML 태그로 작성했다면?
1 | <font family="HY헤드라인"; size="30px"; color="red";><center><b><u><i>륜의 블로그</b></u></i></center></font> | cs |
효과가 필요한 곳마다 저렇게 번거롭게 작성을 했어야했겠죠? 근데 h1 값이든 div 로든 무슨 값으로든 스타일을 넣어놓기만 하면 어디서든 간단하게 <></> 하나로 스타일을 줄 수가 있습니다. 별로 필요 없어 보이지만 분명 필요한 순간이 찾아옵니다.
심화3. 태그로 배너를 만들 수 있다?
포토샵같은 프로그램 없이 HTML 태그만으로 배너도 만들 수 있습니다. 심화2번 과정과 비슷합니다. 아래와 같이 스타일을 먼저 작성한 후 <body> 섹션에서 원하는 곳에 <div id="box"></div> 형태로 작성하시면 됩니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <head> <style> #box{ width: 300px ; height: 100px ; background-color: lightblue; font-size: 23px; color: white; font-weight: bold; text-align: center; line-height: 50px; } </style> </head> <body> <div id="box">Hi This is RyuN<br>Welcome!</div> </body> | cs |
결과는 아래와 같습니다.
Welcome!
마치면서...
여기까지 HTML 태그 심화편을 모두 마치겠습니다. 티스토리 블로그 운영에 필수까지는 아니지만 알아두면 정말 도움이 많이 되는 태그들입니다. 저 태그를 내가 직접 사용해서가 아니라 여러분들이 사이트 커스텀 시 HTML 편집창 내에서 위치를 찾는데도 많은 도움이 됩니다. 알고 보는 것과 모르고 보는 것에는 분명히 차이가 있습니다. 후에 좀 더 도움되는 태그들을 알게되면 포스팅하겠습니다.
Comments