Section 3-1 - 반응형 티스토리 스킨 만들기 - 파일 준비 본문
Section 3-1 - 반응형 티스토리 스킨 만들기 - 파일 준비
- 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 소스를 아래와 같이 넣어둔다.
1 | <code>@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 } </code> |
이러면 얼추 큰 틀은 끝났다.(자세한 설명은 해당 섹션에서 알려드리겠다)
화면에 보이는 1번부터 19번까지 html/css 작업이 끝나면 티스토리 스킨 만들기가 끝나겠다.
다음엔 1번 블로그 제목 작성하기부터 본격적으로 시작하겠다.
아니다. 화면 먼저 잡는걸로 하겠다!! ㅋㅋㅋ
다음은 디자인을 더 풍성하게 하는 fontawesome 준비를 하겠습니다.
RECENT COMMENT