티스토리 뷰

작은설탕 IT/Blog

티스토리 스킨제작기 (5) - 헤더(HEADER) 구조 구체화시키기

작은설탕-Mini 2016. 8. 3. 15:27


안녕하세요. 지난 시간에 우리는 티스토리 스킨가이드를 참고하여 기초적인 HTML 구조를 만들고, 시멘틱 태그를 적용하는 과정까지 진행했었죠? 오늘은 지난 시간에 이어, 스킨 구조를 좀더 구체화하도록 하겠습니다.

티스토리 반응형스킨 제작기 지난 이야기

티스토리 스킨제작기 (1) - 개발환경 구축하기 (웹개발도구 Brackets 이용)

티스토리 스킨제작기 (2) - 레이아웃 잡기

티스토리 스킨제작기 (3) - 레이아웃 만들기

티스토리 스킨제작기 (4) - 티스토리 스킨 레이아웃 구성하기

티스토리 스킨은 앞서도 말씀드렸듯이, skin.html 이라는 하나의 페이지에 여러 기능페이지를 모두 담아야하는 특징이 있죠. 즉, 포스팅 리스트도 skin.html에서, 위치로그도 skin.html에서, 방명록, 태그, 검색결과리스트 등도 모두 skin.html에 구현을 해야한다는 뜻입니다.

자, 그럼 지난 시간에 작성한 기초적인 HTML구조를 발전시켜볼까요?


구현되어야 할 기능들


우선, skin.html이 품어야할 기능들엔 어떤것들이 있는지부터 살펴볼까요? 아래 그림은 티스토리 스킨가이드 내용의 일부입니다.


하아~ 많지요? OTL (잠시 10초간 좌절... feat.한숨)

위의 내용들을 HTML로 구조화시키는거야 스킨가이드만 잘 따라하면 어렵진 않을것 같은데, 이 기능들 각각의 디자인(스타일)을 만들어나가는건 쫌 암담하긴 하네요. 이걸 언제 다 하죠? ^^;;

일단 HEADER영역부터 하나하나 차근차근 만들어보기로 해요.


HEADER 영역 편집


HEADER 영역엔 기본적으로 블로그 이름과 블로거 정보, 블로그 메뉴가 들어가는데요. 최근 반응형 스킨에서는 카테고리도 HEADER영역에 넣는 추세입니다. 대표적으로 티스토리 반응형스킨 #1과 #2가 있죠.

자~ 그럼 지난시간까지 만든 HTML을 다시한번 보고, HEADER부분부터 수정해볼까요?


기초적인 HTML <body>구조

<s_t3>
  <header id="header">HEADER</header> <!-- header close -->
  <section id="content">CONTENT</section> <!-- content close -->
  <aside id="sidebar">SIDEBAR</aside> <!-- sidebar close -->
  <footer id="footer">FOOTER</footer> <!-- footer close -->
</s_t3> <!-- s_t3 close -->

※ 알림 - 지난시간에 content의 HTML 태그를 <article>로 지정했었는데요. 이를 <article>이 아닌 <section>으로 수정합니다. <article>은 이후 content내부의 본문에 사용할 예정입니다.


지난시간에 여기까지 만들었었죠? 여기서 <header> 태그부터 수정해볼꺼예요. 우선 티스토리 스킨가이드에서 HEADER부분에 사용되는 치환자부터 살펴볼까요?


티스토리 스킨가이드 - 헤더영역 치환자티스토리 스킨가이드 - 헤더영역 치환자

헤더부분에 사용되는 치환자는 크게 6개정도를 소개하고 있네요.

  • https://mini-sugar.tistory.com/ 블로그 주소
  • 작은설탕의 달콤한 인생로그 '관리자 > 환경설정 > 기본설정'에서 입력된 블로그 제목
  • 메뉴편집을 사용할 수 있는 치환자
  • https://mini-sugar.tistory.com/location 위치로그로 이동할 수 있는 주소
  • https://mini-sugar.tistory.com/tag 태그로그로 이동할 수 있는 주소
  • https://mini-sugar.tistory.com/guestbook 방명록으로 이동할 수 있는 주소


백문이 불여일견이라고 했죠 ㅋ. 일단 이 치환자들을 사용해서 HEADER를 구성해 볼게요.


skin.html - <header> 영역

<header id="header" role="banner">
  HEADER
  <div class="title">
    <h1><a href="https://mini-sugar.tistory.com/">작은설탕의 달콤한 인생로그</a></h1>
  </div>
  <nav id="blogMenu" role="navigation"></nav>
</header> <!-- end header#header -->

위의 소스코드를 보시면, 저는 HEADER영역에 치환자를 3개를 썼어요. 이따가 실제 구현된 화면을 보시면 아시겠지만,

치환자가 홈, 위치로그, 태그로그, 방명록, 미디어로그 등의 메뉴를 모두 포함하기 때문입니다.

자, 이번엔 직접 티스토리 HTML/CSS 편집 메뉴로 가서 소스를 구현해보죠.


티스토리 스킨 편집하기


우선 자신의 티스토리 관리자 페이지로 가서, HTML/CSS 편집 메뉴를 클릭해주세요. 그럼 아래 그림과 같은 HTML/CSS 편집창이 나타날꺼예요.


티스토리 HTML/CSS 편집창티스토리 HTML/CSS 편집창

저는 HTML편집을 이미 해본 상태라서, 왼쪽에 미리보기 창에 스킨이 이상하게 보입니다. 아무런 CSS 스타일을 입히지 않은 상태인거죠. 오른쪽 창을 보시면 상단에 HTML, CSS, 파일업로드 로 구성된 메뉴를 보실 수 있습니다. 각각 HTML과 CSS를 편집하는 메뉴이고, 파일업로드는 말 그대로 파일을 업로드 하는 메뉴예요. 우리는 지금 단계에서는 HTML만 수정할 예정이기 때문에 우선 HTML 메뉴로 놔두면 됩니다.

자~ 이제 본격적으로 HTML을 편집해 보겠습니다.

  1. 우선 오른쪽 HTML코드가 보이시는 창을 한번 클릭한 후, Ctrl + A를 눌러서 모든 코드를 선택한 후, Delete키 혹은 Backspace키를 눌러서 모든 HTML코드를 지워주세요.
  2. 마찬가지로 CSS 편집창으로 가서 모든 CSS코드를 지워주세요.
  3. 오른쪽 상단에 저장 버튼을 눌러주세요.
  4. 다시 HTML 편집창으로 돌아와서 아래의 코드를 입력해주세요.


HTML 코드

<!doctype html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width">
    <title>티스토리 스킨제작기 (5) - 헤더(HEADER) 구조 구체화시키기</title>
    <link rel="alternate" type="application/rss+xml" title="작은설탕의 달콤한 인생로그" href="https://mini-sugar.tistory.com/rss" />
    <link rel="stylesheet" href="./style.css">
    <!--[if lt IE 9]>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<![endif]-->
    <!--[if gte IE 9]><!-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <!--<![endif]-->
</head>

<body id="tt-body-page">
    <s_t3>
        <header id="header" role="banner">
            <p>HEADER</p>
            <div class="title">
                <h1><a href="https://mini-sugar.tistory.com/">작은설탕의 달콤한 인생로그</a></h1>
            </div>
            <nav id="blogMenu" role="navigation"></nav>
        </header> <!-- end header#header -->
        <hr>

        <section id="content" role="main">
            <p>CONTENT</p>
        </section> <!-- end section#content -->
        <hr>

        <aside id="sidebar" role="complementary">
            <p>SIDEBAR</p>
        </aside> <!-- end aside#sidebar -->
        <hr>

        <footer id="footer" role="contentinfo">
            <p>FOOTER</p>
        </footer> <!-- end footer#footer -->
    </s_t3>
</body>

</html>

코드를 수정했으니, 다시 저장 버튼을 눌러야겠죠?

<head>부분은 추후에 설명드리기로 하구요, <body>태그에 부여된 id속성도 다음에 content영역 수정할때 설명드릴게요. 우선 header 영역에 대해서 설명드리자면...

  • 블로그 이름 작은설탕의 달콤한 인생로그 치환자는 블로그 제목(이름) 이라고 설명 드렸는데요. 블로그 이름을 클릭하면, 블로그의 메인화면으로 이동되도록 링크를 걸어주었구요. 이때 메인페이지 URL은 https://mini-sugar.tistory.com/ 치환자를 사용하였습니다.
  • 블로그 메뉴 블로그 메뉴는 네비게이션 메뉴와 같은 기능이므로, <div> 태그 대신 <nav>라는 시멘틱 태그를 사용해주었구요. 치환자를 사용하면, 홈, 방명록, 위치로그, 미디어로그, 태그로그 등의 메뉴를 일일이 만들어주지 않아도 됩니다.
  • HEADER, CONTENT, SIDEBAR, FOOTER 각 영역엔 <p>태그로 해당영역을 알아볼 수 있게 표시를 해주었구요 (라벨 같은 개념). 각 영역은 <hr>태그 (수평선)를 이용해서 구역을 분리해 주었어요.

그럼 위의 코드가 어떻게 적용되었는지 블로그에 접속해 볼까요?


헤더영역 수정헤더영역 수정

매~~~~~~~우 단순하죠? ㅋㅋ 아무런 스타일이 적용되지 않아서 그렇습니다. 일단 스타일은 제쳐두고, HEADER부분을 보시면, 블로그 이름과 메뉴들이 삽입되었죠?

오늘은 여기까지~ ^^


Epilogue


앞서 말씀드렸듯이, 반응형 스킨에서는 HEADER영역에 카테고리 메뉴를 넣기도 해요. 반응형스킨에서는 사이드바를 없앤 디자인을 선호하기도 해서 카테고리를 헤더영역으로 넘긴 것이죠. 아시다시피, 저도 지금 여러분께 강의를 할 수준이 아니라, 저 스스로도 공부해나가면서 알게된 것들을 소개하는 정도의 수준이라서, 고급 기능들은 차차 능력을 키운 후에 알려드릴게요. ^^

자~ 오늘은 헤더영역을 구성해보았습니다. 다음 시간엔 스킨의 중추역할을 하는 CONTENT 영역을 구성하는 과정을 알아보도록 해요.

오늘도 긴 글 읽으시느라 수고하셨습니다. ^^


저작자표시 비영리 변경금지

'작은설탕 IT > Blog' 카테고리의 다른 글

[티스토리 반응형스킨 #1] 티스토리 댓글과 라이브리 댓글을 Tab 방식으로 구현하기  (39) 2016.08.17
티스토리에 소셜댓글서비스-라이브리 설치하기 (티스토리 플러그인 이용)  (7) 2016.08.12
티스토리 스킨제작기 (4) - 티스토리 스킨 레이아웃 구성하기  (12) 2016.08.02
티스토리 스킨제작기 (3) - 레이아웃 만들기  (1) 2016.07.28
티스토리 스킨제작기 (2) - 레이아웃 잡기  (1) 2016.07.27
친구와 함께보기

트위터

페이스북

구글+

카스

네이버

밴드

카카오톡

라인
공유하기 링크