티스토리를 관리하다 보면 글자체 변경, 여백조정와 같은 스킨편집 작업이나 수익원 창출을 위한 애드센스 광고게재 등을 위하여 html을 수정하는 일이 생기곤 합니다. html 이란 Hypertext Markup Language의 약자로 웹문서를 만들기 위하여 사용하는 가장 기본적이며 단순한 웹 언어입니다.
티스토리 편집기를 이용한 글쓰기도 html으로 구성된 페이지에 불과합니다 이렇게 말이죠.
위의 이미지는 티스토리 글쓰기 편집창의 html 편집기 상의 html입니다. 다행히도 현재는 글쓰기를 할 때 html로만 코딩작업을 하지는 않지만, 필요할 때 html을 편집해야 하는 일이 생기기도 합니다. 그렇기 때문에 최소한의 html 편집방법 및 html의 기본구조에 대한 이해가 필요한 것입니다.
이번 시간에 html에 대한 강의를 하려는 건 아닙니다. 그저 티스토리에서 html을 편집하는 가장 기본적인 사용법 정도에 대한 내용이니 html을 공부하시고자 하시는 분은 이 포스트에서 나가셔도 됩니다. 그럼 티스토리 html 편집을 어떻게 하는지 저와 함께 해보시죠. 출발!
HTML의 기본적인 구성
▼ 티스토리 블로그 뿐만 아니라 html을 사용하는 웹사이트는 기본적으로 아래와 같은 구조로 되어 있습니다.
◆ <> 및 </>을 태그라고 하며 태그는 보통 시작태그인 <> 와 종료태그인 </>으로 구성됩니다. <html>태그로 시작한 HTML 문서는 </html>태그로 마무리가 되는 것이죠. 그럼 하나씩 살펴볼까요?
◆ <!doctype html>는 이 문서가 HTML문서임을 선언하는 것입니다.
◆ 문서는 <html>로 시작해서 </html>로 끝나며, 그 사이에 <head></head> 와 <body></body>가 있습니다. <head></head>가 끝난 후에 <body></body>가 있는 구조이죠. 편의상 <head></head>을 'head 영역', <body></body>을 'body 영역'이라 부르겠습니다.
◆ head 영역에는 타이틀, 스타일시트, 작성자나 검색키워드, 메타테그 등이 위치하며, 실제로 홈페이지에는 내용이 보이지 않습니다.
◆ body 영역에는 본문과 자바스크립트가 위치하고, 페이지에 접속했을 때 실제로 보이는 부분입니다. 홈페이지나 블로그에서 보이는 텍스트와 이미지는 모두 이 body 영역에 있는 것이죠.
티스토리에서 HTML을 편집하는 두 가지 방법
◆ 티스토리에서 HTML을 변경하는 방법은 두 가지가 있습니다. 첫 번째는 스킨편집기에 있는 HTML편집기 이구요, 두 번째는 글쓰기 편집창에 있는 HTML 편집기입니다. 스킨편집기에 있는 HTML편집기는 스킨 전체에 적용되는 사항이기 때문에 해당 편집기에서 내용을 추가하거나 변경하면 블로그 전체에 반영이 됩니다. 애드센스 광고를 여기서 적용하면 블로그 전체에 반영이 되는 것이죠. 반면, 글쓰기 편집창에 있는 HTML편집기는 해당 포스트에만 적용이 됩니다. 포스트마다 애드센스 광고의 위치를 별도 지정하려면 여기에 광고코드를 입력해야 합니다.
1. 스킨편집기에서 HTML 편집하는 방법
▼ 관리자페이지의 '꾸미기' 하단의 '스킨편집' 탭을 클릭합니다.
▼ 우측상단의 'html 편집' 버튼을 눌러주세요.
▼ 상단의 초기값으로 설정된 'HTML' 탭을 선택합니다.
▼ 위에서 설명드린대로 <!doctype html>으로 선언한 후에 <html>태그로 시작하고, 이어서 <head>태그로 시작하는 head 영역에 이 html 문서의 정보가 담겨져 있습니다. 아래로 쭉 내리면 </head> 태그와 <body></body>태그, </html>태그가 각각 있겠죠?
▲ <!-- 내용 --> 이렇게 표시된 태그는 주석을 의미합니다. <!-- 와 --> 사이에 있는 내용은 실제로 html에 반영이 안되며 해당 태그가 무엇인지를 알려주는 역할을 합니다. 여기에는 인피드광고 스크립트에 대한 내용과 네이버검색로봇 검색기능에 대한 테그가 달려있군요. 해당 태그가 무엇인지 기억하기 위해 제가 달아둔 주석입니다.
◆ 티스토리 스킨의 html 문서는 코딩이 꽤 길기 때문에 특정 단어를 찾으려면 검색을 해야합니다. 특정 단어를 찾기 위해서는,
1. 편집기 위에 마우스 커서를 위치시킨 후, 2. Ctrl+F 키를 눌러 검색창을 불러옵니다. 3. 해당 검색창에 검색어를 입력한 후에 엔터키를 누르면 됩니다.
▼ 검색어 </head>로 해서 검색해보겠습니다.
▼ 검색결과 텍스트가 노랑색 바탕으로 표시되는데, 검색갯수와 현재 스크롤 위치가 우측 스크롤부분에서 확인이 가능합니다. 검색결과는 노란색 띠로 표시가 되고, 현재 스크롤 위치는 회색 띠로 표시됩니다. </head> 태그는 하나 밖에 존재하지 않는군요.
▼ 이번에는 </s_index_article_rep>으로 검색해보겠습니다.
▼ 노란색 띠가 4개 있기 때문에 검색결과가 4개인 것을 알 수 있습니다. 현재 스크롤 위치는 첫 번째 노란색 띠 위에 위치하고 있죠.
◆ 다음 검색결과를 순차적으로 확인하려면
1. 마우스 커서를 편집기 위에 위치시킨 후 2. Ctrl + G 키를 눌러주면 됩니다.
▼ Ctrl + G 키를 한 번 누른 결과 다음 검색결과로 위치가 이동되었습니다. (현재 스크롤 위치가 두 번째 노란색 띠 위로 변경이 되었죠?) 다음 결과를 확인하고 싶다면 Ctrl + G 키를 한 번 더 누르면 되겠죠?
▼ <head>와 </head> 사이에 각종 메타태그 및 추적코드를 넣으라고 하는 경우가 있습니다. 저는 <head>태그 바로 아래에 태그와 코드들을 모아두었습니다.
▼ 마찬가지로 <body>와 </body> 사이에 각종 스크립트를 삽입해야 하는 경우도 있습니다. 여기서도 저는 <body> 태그 바로 아래에 모든 스크립트를 모아뒀습니다.
2. 글쓰기 편집창에서 HTML을 편집하는 방법
▼ 글쓰기 편집창의 우측 상단에 있는 'HTML' 체크박스에 클릭해주세요.
▼ 그럼 기존 글쓰기가 html 편집화면으로 변경이 됩니다. 여기서 해당 포스트의 html 코딩 작업이 가능합니다.
▼ 저는 애드센스 디스플레이 광고를 각 포스트 필요한 곳에 게재하고 있습니다. 아래는 애드센스 디스플레이 광고를 반영한 html 입니다. (애드센스 광고 설정하는 방법에 대해서는 조만간 포스팅하도록 하겠습니다.)
마치며...
HTML을 익혀두면 사실 티스토리 블로그를 더 폼나게 바꿀 수 있습니다. 광고코드 삽입을 하더라도 크기와 위치를 적당한 곳으로 선정할 수도 있고, 주어진 틀인 스킨을 내 마음대로 변형해서 사용할 수도 있거든요. 그래서 지금은 오래 전에 익혔던 HTML을 다시 기억 속에서 꺼내볼까 고민 중에 있습니다. 할까말까... 배부른 고민인가요? 일단 다른 포스팅을 하면서 생각해보겠습니다. 오늘은 여기까지.
