[티스토리 블로그 스킨 제작 가이드 강의 4] 상단 헤더 만들기 1

따라할 스킨 찾아보기

티스토리 사이트에서 스킨에 들어가보시면 이렇게 기본 스킨과 사람들이 만든 스킨들이 많이 있습니다.

우리는 이 중에서 기본 구조가 잘 잡혀있는 Book Club 스킨을 따라 만들어볼건데요.

오른쪽에 적용 예시 보기 버튼을 클릭하면 이렇게 실제로 스킨이 적용된 블로그를 보실 수 있습니다. 이걸 보면서 하나씩 따라만들어볼거에요.

스킨 편집 들어가기

이제 블로그 스킨 편집을 해보겠습니다. 스킨 편집 버튼을 눌러주시구요.

html 편집을 클릭합니다.

스킨 편집 전

스킨을 편집하기에 앞서 한 가지 알아둬야 할 것이 있습니다. 실제로 블로그에 들어갔을 때 HTML 코드가 어떻게 구성되어있을까요? 블로그에 들어가신 다음 개발자 도구를 한번 열어보세요.

크롬은 오른쪽 위에 점 3개의 버튼을 누르고 도구 더보기에 있는 개발자 도구를 클릭하시면 됩니다.

Elements 탭을 클릭하면 생각보다 우리가 구현했던 안녕하세요 외에도 엄청 많은 코드들이 들어간 것을 볼 수 있습니다.

이것들 덕에 치환자라던가 SEO 같은 것들이 문제없이 잘 동작하는 건데요. 굳이 아셔야할 필요는 없고 이런 식으로 HTML 코드들이 추가되어 있다는 것만 아시면 됩니다. 나중에 혹시나 보셨을 때 놀라실까봐 이렇게 보여드린겁니다.

구현해보기

이제 하나씩 구현해보겠습니다. 우선 필수로 넣어야하는 <s_t3>라는 치환자가 있는데요. 아래처럼 치환된다고 합니다.

이 치환자를 넣고 그 안에 [##_title_##]이라는 값 치환자를 넣어볼게요 이 치환자는 블로그 제목으로 바뀝니다.

html

      <!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <s_t3>
      [##_title_##]
    </s_t3>
  </body>
</html>

네 그러면 이렇게 제목이 나오는데요.

사실 <s_t3> 그룹치환자가 없어도 title 치환자는 잘 동작합니다.

html

      <!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    [##_title_##]
  </body>
</html>

실제로 문서처럼 치환되지도 않아요. 그래서 아마 중간에 업데이트가 되어서 바뀐게 아닐까 조심스레 추측해봅니다.

그래도 혹시 모르니 s_t3는 꼭 넣어주세요.

상단 헤더

이제 다시 스킨 코드를 넣어볼건데, 일단 상단 헤더를 넣을거니까 <header> 태그를 추가하겠습니다.

html

      <!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <s_t3>
      <header>

      </header>
    </s_t3>
  </body>
</html>

그리고 스킨 가이드를 보시면 이렇게 블로그 정보나 URL이 들어간 치환자들이 있습니다.

Book Club 스킨에서는 왼쪽 상단에 제목이 있고 이걸 클릭하면 블로그 홈으로 이동해요.

이렇게 만드려면 a태그로 [##_blog_link_##]와 [##_title_##]을 넣어주면 되겠죠?

html

      <!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <s_t3>
      <header>
        <a href="[##_blog_link_##]">[##_title_##]</a>
      </header>
    </s_t3>
  </body>
</html>

실제로 어떻게 동작하는지에 대한 테스트는 스킨편집에서 하지 마시구, 블로그에 들어가서 해보시길 바랍니다. 클릭이 안되거든요..

클릭해보면 블로그 홈으로 이동하는걸 잠시 볼 수 있어요. 지금 위치가 홈이니까 그냥 새로고침하는 것처럼 보일겁니다.

이제 오른쪽에 검색과 프로필이 들어가야하는데 우선 검색 기능부터 만들어보겠습니다. input 태그를 추가할게요.

      이제 코드를 보기 편하게 하기 위해 <s_t3> 안의 내용만 코드로 보여드릴게요.

html

      <header>
  <a href="[##_blog_link_##]">[##_title_##]</a>
  <input />
</header>

가이드에서 검색은 <s_search>라는 그룹치환자를 사용해야한다고 나와있어요.

input 태그에 적용해보겠습니다.

html

      <header>
  <a href="[##_blog_link_##]">[##_title_##]</a>
  <s_search>
    <input />
  </s_search>
</header>

그리고 input의 name은 [##_search_name_##] 이라는 치환자를 사용하면 되고, value 값에는 [##_search_text_##] 를 넣으면 되는거 같네요.

html

      <header>
  <a href="[##_blog_link_##]">[##_title_##]</a>
  <s_search>
    <input name="[##_search_name_##]" value="[##_search_text_##]" />
  </s_search>
</header>

블로그에서 개발자도구로 보시면 이런 식으로 값이 들어갑니다. search_text는 아직 검색 결과로 이동하기 전이라 아무것도 나타나지 않습니다. 검색 결과로 이동하면 해당 검색어가 value가 나타날거에요.

이제 검색 버튼을 만들어서 클릭하면 검색이 되도록 해보겠습니다. 검색이라는 글자가 나오는 버튼을 추가하고 onclick일 때 [##_search_onclick_submit_##] 치환자를 넣어주시면 됩니다.

html

      <header>
  <a href="[##_blog_link_##]">[##_title_##]</a>
  <s_search>
    <input name="[##_search_name_##]" value="[##_search_text_##]" />
    <button onclick="[##_search_onclick_submit_##]">검색</button>
  </s_search>
</header>

이 치환자가 알아서 처리해주기 때문에 디테일한 부분은 신경쓰지 않으셔도 됩니다. 안녕하세요라고 적고 검색을 클릭하면, 이렇게 주소가 /search/안녕하세요 로 이동하게 됩니다.

검색창에서 엔터를 눌렀을 때에도 검색이 되게 하고 싶다면 가이드에 있는 내용에서 onkeypress 부분을 복사해오시면 됩니다.

html

      <header>
  <a href="[##_blog_link_##]">[##_title_##]</a>
  <s_search>
    <input
      name="[##_search_name_##]"
      value="[##_search_text_##]"
      onkeypress="if (event.keyCode == 13) { [##_search_onclick_submit_##] }"
    />
    <button onclick="[##_search_onclick_submit_##]">검색</button>
  </s_search>
</header>

이제 검색어를 입력하고 엔터를 치면, 이렇게 바로 검색 결과로 이동하게 됩니다.

이런식으로 필요한 기능에 맞춰 치환자를 찾아 구현하시면 되는건데요. 계속 만들어보면서 어떻게 치환자들이 구성되어있는지 알면 나중에 금방 찾으실 수 있을겁니다.

프로필은 다음 시간에 만들어보기로 하고, 스타일을 약간 적용해보겠습니다. 우선 상단의 이곳을 div 태그로 감싸고 top이라는 class를 추가할게요.

그리고 a 태그에는 title이라는 class를 추가하고, <header> 바깥쪽에 container라는 클래스를 가진 div 태그를 추가해주세요.

html

      <div class="container">
	<header>
	  <div class="top">
	    <a href="[##_blog_link_##]">[##_title_##]</a>
	    <s_search>
	      <input
	        name="[##_search_name_##]"
	        value="[##_search_text_##]"
	        onkeypress="if (event.keyCode == 13) { [##_search_onclick_submit_##] }"
	      />
	      <button onclick="[##_search_onclick_submit_##]">검색</button>
	    </s_search>
	  </div>
	</header>
</div>

그리고 CSS 탭에 있는 스타일을 적용하려면 style.css 파일을 불러와야합니다. head에 link 태그로 불러오겠습니다.

html

      <head>
	...

  <link rel="stylesheet" href="./style.css"/>
</head>

style은 이정도만 넣겠습니다. 티스토리 블로그 스킨 제작에 대해서 배우는 것이기 때문에 스타일링은 간단하게만 넣어줄게요.

css

      a {
  color: inherit;
  text-decoration: none;
}

.top {
  display:flex;
  justify-content: flex-end;
}

.title {
  font-size: 30px;
  margin-right:auto;
}

네 그러면 이렇게 왼쪽에는 제목 오른쪽에는 검색이 나타납니다.

프로필까지 넣으면 시간이 길어지기 때문에 다음 시간에 자세히 다뤄보도록 하겠습니다.

감사합니다.