Section 3-1 - 반응형 티스토리 스킨 만들기 - 파일 준비 본문

티스토리 스킨만들기/Tistory One

Section 3-1 - 반응형 티스토리 스킨 만들기 - 파일 준비

  • nOo9ya
  • 2017. 9. 1. 23:58

밥 먹고 노느라..디자인 구상을 못 했다.
그래도 진행!!

 

우선 아래와 같은 디자인의 블로그를 만들것이다.

티스토리 스킨 만들기-디자인 구상

심플하다.

 

이게 무슨 디자인이냐 그러겠지만...본인은 큰 틀만 잡고 나머지 세부 디자인은 그 때 그 때 생각해서 반영하도록 하겠다.

 

 

우선 skin.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>Section 3-1 - 반응형 티스토리 스킨 만들기 - 파일 준비</title>
 <link rel="alternate" type="application/rss+xml" title="누구야 티스토리" href="https://noo9ya.tistory.com/rss" />
 <link rel="stylesheet" href="./style.css">
 <!--[if lt IE 9]>
 <script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-1.12.4.min.js"></script>
 <![endif]-->
 <!--[if gte IE 9]><!-->
 <script src="//t1.daumcdn.net/tistory_admin/lib/jquery/jquery-3.2.1.min.js"></script>
 <!--<![endif]-->
</head>
<body id="tt-body-page">
<s_t3>
<div id="container">

 <div id="header">
  <h1>01. 블로그 제목</h1>
  <div class="menu">02. 블로그 메뉴</div>
 </div> <!-- header close -->

 <div id="content">
  <div class="searchList">11. 검색 결과 리스트</div>
  <div class="searchRplist">12. 검색 결과 댓글 리스트</div>
  <div class="locallog">13. 위치 로그</div>
  <div class="taglog">14. 태그 클라우드</div>

  <div class="guestbook">15. 방명록
   <div class="guestWrite">15-1. 방명록 글쓰기</div>
   <div class="guestList">15-2. 방명록 리스트</div>
  </div><!-- guestbook close -->

  <div class="entryNotice">16. 공지사항 글</div>

  <div class="entryProtected">17. 보호 글</div>
  
  <div class="entry">18. 글
   <div class="titleWrap">18-1. 글 제목 | 카테고리 | 작성일 | 글 관리</div>
   <div class="article">18-2. 글</div>
   <div class="tagTrail">18-3. 글 관련 태그</div>
   <div class="actionTrail">18-4. 트랙백 | 댓글</div>
   <div class="trackback">18-5. 트랙백</div>
   <div class="code_comment">18-6. 댓글
    <div class="code_commentList">18-6-1. 댓글 리스트</div>
    <div class="code_commentWrite">18-6-2. 댓글 쓰기</div>
   </div>
  </div><!-- entry close -->

  <div class="entry">19. 페이지</div>

 </div> <!-- content close -->

 <div id="sidebar">

 </div> <!-- sidebar close -->

 <div id="footer">

 </div> <!-- footer close -->

</div> <!-- container close -->
</s_t3>

<script src="./images/script.js"></script>
</body>
</html>

이렇게 작성하면

 

블로그는 이런 화면이 나온다.

01 블로그 제목, 02 블로그 메뉴 등등등 표시되는 부분을 티스토리 영역 지정 및 치환자 사용으로 해당 페이지가 나오게 해야한다.

 

style.css 파일을 작성

 

skin.html 상단에 ./style.css 파일에 우리가 사용할 기본 css 소스를 아래와 같이 넣어둔다.

@charset "UTF-8";  @font-face {     font-family: 'Noto Sans';     src: url(//t1.daumcdn.net/tistory_admin/static/font/notokr-regular.woff2) format('woff2'),     url(//t1.daumcdn.net/tistory_admin/static/font/notokr-regular.woff) format('woff');     font-style: normal;     font-weight: normal; } @font-face {     font-family: 'Noto Sans';     src: url(//t1.daumcdn.net/tistory_admin/static/font/notokr-demilight.woff2) format('woff2'),     url(//t1.daumcdn.net/tistory_admin/static/font/notokr-demilight.woff) format('woff');     font-style: normal;     font-weight: 100; } @font-face {     font-family: 'Noto Sans';     src: url(//t1.daumcdn.net/tistory_admin/static/font/notokr-bold.woff2) format('woff2'),     url(//t1.daumcdn.net/tistory_admin/static/font/notokr-bold.woff) format('woff');     font-style: normal;     font-weight: bold; }  /* reset */ body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0;padding:0;outline:none} fieldset,img{border:0 none} dl,ul,ol,menu,li {list-style:none} blockquote, q {quotes: none} blockquote:before, blockquote:after,q:before, q:after {content:'';content:none} input,select,textarea,button {vertical-align:middle} input::-ms-clear {display:none} button {border:0 none;background-color:transparent;cursor:pointer} body {background:#fff} body,th,td,input,select,textarea,button {font-size:14px;line-height:1.5;font-family:'Noto Sans', sans-serif;color:#666} /* color값은 디자인가이드에 맞게사용 */ a {color:#333;text-decoration:none} a:active, a:hover {text-decoration:underline} a:active {background-color:transparent} address,caption,cite,code,dfn,em,var {font-style:normal;font-weight:normal}  #tistorytoolbarid { display:none }

 

이러면 얼추 큰 틀은 끝났다.(자세한 설명은 해당 섹션에서 알려드리겠다)

화면에 보이는 1번부터 19번까지 html/css 작업이 끝나면 티스토리 스킨 만들기가 끝나겠다.

다음엔 1번 블로그 제목 작성하기부터 본격적으로 시작하겠다.

아니다. 화면 먼저 잡는걸로 하겠다!! ㅋㅋㅋ

다음은 디자인을 더 풍성하게 하는 fontawesome 준비를 하겠습니다.

공유하기 링크

티스토리 스킨만들기/Tistory One Related Articles

MORE

티스토리툴바