Chapter 1-2. 티스토리 치환자 <HTML / CSS 2-1편>
Chapter 1. 티스토리 블로그 꾸미기 <HTML / CSS 2편 - 치환자>
1편을 쓰다보니 그대로 쓰다보면 아무래도 티스토리와 동떨어진 세계를 그릴 것 같아 다시금 작성 포인트를 전환해야 겠다는 느낌을 많이 받았습니다. 해서 w3school보다는 티스토리 가이드를 기준으로 작성해야 티스토리 블로그 사용자에게 많은 도움이 되리라 생각되어 다시금 전환합니다. < 참고 사이트 (티스토리 가이드) >
이렇게 전환하게 된 계기는 많은 티스토리 사용자들이 기존의 스킨 또는 배포용 스킨을 가지고 활용하고 계시며 필요할 때 수정할 정도의 실력이면 되지 않나? 하는 의문에서 시작하였고 사실 많은 분들이 수정법을 찾지 굳이 시간을 많이 들여가면서 스킨을 제작하려고 시도하지는 않으시기 때문이지요.
그리고 1편이 도움이 안되는 것은 아니니 모르는 부분은 참고적으로 보시면 될 것 같습니다. 그럼 1편은 대대적으로 정리하여 기본 태그 용어를 정리하는 쪽으로 방향을 잡도록 하겠습니다.
자 이제 시작하기에 앞서 위 링크 사이트를 가시면 티스토리 사용자들을 위해 티스토리에서 준비한 치환자 가이드로 연결이 될 겁니다.
치환자란 ##_blog_menu_## 이와 같이 복잡하게 설정할 수도 있는 블로그 메뉴를 굳이 html 코딩을 통하지 않고 간편하게 사용할 수 있도록 티스토리에서 단축키를 제공했다고 이해하시는게 편하실 겁니다. 이 치환자를 알고 있다면 복잡한 코딩을 통하지 않고 단순한 태그 설정만으로 블로그 제작이 가능합니다. 그럼 다시금 시작해 보겠습니다.
|
2. HTML 티스토리 치환자 |
앞으로의 모든 포스팅은 제 블로그에 적용될까 저어되어 모든 괄호 <>, []표시는 사용하지 않도록 하겠습니다. 그리고 모든 html 코딩부분은 블로그에 영향이 없도록 캡쳐화면을 활용하겠습니다.
시작하기 전에
<블로그에 영향이 가지 않도록 캡쳐화면을 활용하였습니다.>
위를 보시면 title 설정법이 나와 있습니다. 여기서 ##_title_##이란 아래의 블로그 이름을 뜻합니다. 그리고 ##_page_title_##이란 현재 익스플로어상에 현재 포스팅을 보고 있는 해당 포스팅 페이지의 제목을 입력합니다.
즉, ##_title## :: ##_page_title##의 출력 결과는 어떻게 될까요? 블로그 이름이 [쥬마의 홈페이지]라고 가정하고 현재 보시고 있는 페이지 이름을 [[블로그 노하우] HTML 강의]라고 가정했을 때 출력 결과는 다음과 같습니다.
익스플로어상 작업표시줄에 쥬마의 홈페이지 :: [블로그 노하우] HTML 강의 라고 출력되는 것이지요.
많은 티스토리 마케터는 검색엔진의 봇이 현 페이지의 작업표시줄의 앞부분을 먼저 긁어간다고 하여 ##_page_title_## :: ##_title_## 로 많은 변경을 하고 계신데요. 큰 효과가 있는지는 모르겠으나 요새 블로그의 주제가 다양화되다보니 제목만으로는 모든 포스팅을 카바하기 힘들기에 그리 설정하고 계신듯 보입니다.
두번째 RSS는 이후 고급때 설명하도록 하겠습니다.
B. header 영역
㉠ 1-1 블로그 제목
위의 1-1 블로그 제목부터 살펴보도록 하겠습니다. 아래를 살펴보시면 ##_blog_link_##에 ##_title_##을 연계하여 a라는 링크 태그로 묶었고 h1이라는 제목 태그로 묶었습니다. a와 h1~n태그는 1편에서 언급한 것을 활용하여 이해하도록 하시구요. 아래 코드의 명령은 이렇습니다.
블로그 제목 사용예시 :
[title을 누르면 blog_link를 타고 가시오.] 라고 명령한 구문입니다. a태그는 href라는 명령어로 링크를 걸 수 있는 특징을 지닌 태그 입니다. 즉 위의 설명은 다음과 같습니다. [a태그로 링크를 걸것이고 / href 어디로? ##_blog_link_##로 / 무엇을 누르면? ##_title_##을 누르면.] 이라는 설명이 됩니다. h1태그는 1편에서도 언급하였지만 제목태그로써 제목으로써의 역할을 할 수 있는 강조를 넣어줍니다.
㉡ 1-2 블로그 메뉴
위의 1-2 블로그 메뉴는 총 4가지의 치환자를 다루고 있네요. ##_blog_menu_## / ##_localog_link_## / ##_taglog_link_## / ##_guestbook_link_## 이렇게 4가지 입니다. 그럼 하나하나 살펴보도록 하겠습니다.
블로그 메뉴를 설정하기 위해선 위와 같이 div라는 구분 태그를 이용하여 blogMenu라는 class를 부여하고 ##_blog_menu_##를 줌으로써 블로그 메뉴의 사용을 선언합니다. div 태그는 수정된 1편에 설명을 부여토록 하겠습니다만 간단히 설명하면 앞서 말한바와 같이 구분 태그 입니다. 중요한 특징은 div로 묶지 않으면 div 안의 내용에 일일이 CSS style을 적용해야 하는 정도일까요?
간단히 설명하자면 ##_blog_menu_##에 CSS로 특성을 부여하고자 "blogMenu"라는 이름을 부여한 것이지요. CSS는 추후 CSS편에 설명토록 하고 우선 해당 구문은 blogmenu를 사용하고자하는 프로그램 선언문이라고만 이해하시면 될 것 같습니다.
그 밑으로 또다시 blogMenu라는 구분태그로 묶고서 목록 태그인 ul태그를 이용하였고 li 태그로 이름을 명명하였습니다. 위는 매우 복잡하기에 쉽게 아래 코드를 참조하시면 될 것 같습니다.
<네이버 오픈캐스트 작성 방법>
위처럼 ul태그를 사용할 경우 하나하나에 li태그를 이용하여 정렬해 줍니다. li태그는 list라고 이해하시면 좋겠네요. 그럼 해당 출력물에 CSS를 가미하여 위의 오픈캐스트 최종물이 탄생하게 되는 것이지요. 우선 여기까지 이해가 되셨으면 합니다.
<1-2 블로그 메뉴 코딩>
위의 내용을 살펴보면 [네이버 오픈캐스트] 작성방법처럼 ul태그와 li태그가 사용되었는데 몇가지 더 추가적인 코딩 기술이 들어가 있습니다. 그것은 바로 li태그에 class를 부여하여 이름을 명명 (이름을 부여한 이유는 이후 개별적인 CSS작업을 용이하게 하기 위함입니다.) 하였고 a태그를 활용해 href링크를 걸어주었습니다.
즉, 위의 코딩을 뜯어보면 [위치로그 목록의 class 이름은 "Tab_localog"이며 이 "위치로그"를 클릭했을 시 ##_localog_link_## 위치로 이동하시오.] 라는 구문이 됩니다. 여러분의 블로그 메뉴를 보시면 수정을 안한 기초 블로그일 경우 홈 / 위치로그 / 태그 / 방명록 이라는 기초메뉴가 형성되어 있는데 이를 변경하고자 하신다면 해당 ##_localog_link_## 부분을 사이트 주소로 변경하고 "위치로그"의 이름을 해당 사이트 이름으로 변경하게 된다면 이는 블로그 메뉴의 수정이 가능하게 됩니다.
< 과제 1>
자신의 블로그 메뉴를 작성해 보고 수정해 보세요. 그리고 그 결과물을 공유해 보세요. 만약 메뉴가 틀어졌다면 해당 코드를 공유하여 무엇이 문제인지 토론해 봅시다.
'블로그 > 블로그 노하우' 카테고리의 다른 글
| 내 블로그 순위는 몇등일까요? - 블로그 차트 (0) | 2016.11.02 |
|---|---|
| 티스토리 치환자 모음링크 및 구현방법 (0) | 2016.11.02 |
| Chapter 1-1. 티스토리 시작하기 <HTML / CSS 1편> (1) | 2015.02.20 |
| 티스토리 블로거가 가장 궁금해 하는 점 (0) | 2015.02.20 |
| 티스토리 블로그에 네이버 이웃 커넥트 추가하기 (0) | 2015.02.15 |