Section 5 - 반응형 티스토리 스킨 만들기 - header 본문
Section 5 - 반응형 티스토리 스킨 만들기 - header
- 2017. 9. 5. 16:06
이번에는 블로그의 상단 부분을 만듭니다.
치환자 확인은 블로그에서 직접확인 해야합니다.
그러므로 이전에 작업 해둔 스킨을 등록하셔야합니다.
스킨 등록은 "블로그 관리 -> 꾸미기 -> 스킨 변경 화면"에서 "스킨 등록"버튼을 눌러서 파일을 올리시면 됩니다.
스킨 등록하는 자세한 방법은 차지하고 스킨 만들기로 넘어갑니다.
Check .
본격적으로 시작하기 전에 몇 가지 체크해보자.
1.
현재 head 영역에 title에 Section 5 - 반응형 티스토리 스킨 만들기 - header만 입력되어 있다. 그러면 블로그 포스트 제목만 계속 나오기 누구 블로그인지 인지하기가 힘들다.
그래서 검색엔진에 내 블로그 제목이 이쁘게 잘 보이려면 <title>누구야 티스토리</title> 부분을 <title>Section 5 - 반응형 티스토리 스킨 만들기 - header : 누구야 티스토리</title>로 변경한다.
2.
<body>다음에 <s_t3>태그를 넣고 html문서 하단부 <script>앞에 </s_t3> 를 꼭 넣어야한다.
안그러면 치환자가 인식을 못한다.
Section 3-3 에 있는 준비파일에는 들어가 있으니 다운로드 받으신 분들은 Pass!!
Description .
작업 할 header 부분은 아래와 같습니다.
무조건 이렇게 딱 정해서 작업을 진행하지 않습니다..참고만 해두시라고...ㅎㅎ
STEP 1. skin.html 파일 수정
# skin.html before
01. 블로그 제목
<div id="header">
<div class="global-wrap">
<h1 class="blog-title">
<a href="https://tistory.noo9ya.com/" class="blog-logo">
<span class="title">블로그제목</span>
<img src="https://tistory1.daumcdn.net/tistory/1976019/attach/9d929ff985204507ac252516435c0650" width="175" height="56" class="img-profile" alt="누구야 티스토리">
</a>
</h1>
<div class="header-nav">
<ul>
<li class="search">
<s_search>
<div class="area_search">
<form action="#" method="get" class="frm_search" onsubmit="">
<fieldset>
<legend class="sr-only">검색하기 폼</legend>
<input type="text" name="" value="" class="search-input" title="검색하기" placeholder="Search">
<button type="submit" class="btn-search"><i class="fa fa-search fa-lg" id="btnSearch"></i></button>
</fieldset>
</form>
</div>
</s_search>
</li>
<li class="taglog" ><a href="https://noo9ya.tistory.com/tag" title="태그">태그</a></li>
<li class="guestbook" ><a href="https://noo9ya.tistory.com/guestbook" title="방명록">방명록</a></li>
<li class="rss"><a href="https://noo9ya.tistory.com/rss" onclick="window.open(this.href); return false" title="rss">RSS</a></li>
</ul>
</div>
</div>
</div> <!-- header close --># skin.html after
<div id="header">
<div class="global-wrap">
<h1 class="blog-title">
<a href="https://tistory.noo9ya.com/" class="blog-logo">
<span class="title">누구야 티스토리</span>
<img src="https://tistory1.daumcdn.net/tistory/1976019/attach/9d929ff985204507ac252516435c0650" width="175" height="56" class="img-profile" alt="누구야 티스토리">
</a>
</h1>
<div class="header-nav">
<ul>
<li class="search">
<s_search>
<div class="area_search">
<form action="#" method="get" class="frm_search" onsubmit="">
<fieldset>
<legend class="sr-only">검색하기 폼</legend>
<input type="text" name="" value="" class="search-input" title="검색하기" placeholder="Search">
<button type="submit" class="btn-search"><i class="fa fa-search fa-lg" id="btnSearch"></i></button>
</fieldset>
</form>
</div>
</s_search>
</li>
<li class="taglog" ><a href="https://noo9ya.tistory.com/tag" title="태그"><i class="fa fa-tags fa-lg"></i></a></li>
<li class="guestbook" ><a href="https://noo9ya.tistory.com/guestbook" title="방명록"><i class="fa fa-book fa-lg"></i></a></li>
<li class="rss"><a href="https://noo9ya.tistory.com/rss" onclick="window.open(this.href); return false" title="rss"><i class="fa fa-rss fa-lg"></i></a></li>
</ul>
</div>
</div>
</div> <!-- header close -->결과를 살펴보면 아래와 같다.
여기서 blog_menu는 "블로그 관리->꾸미기->메뉴"에서 설정한 메뉴들이 자동적으로 나오는 것이다.
그럼 대충 감은 다들 잡았으리라 믿어 의심치 않다 ㅡ/.,ㅡ;;
이제는 계획대로 작업을 상단에 "블로그 제목" / "검색", "태그", "방명록", "RSS" 로 구성 된 header를 작성합니다.
STEP 2. skin.html - header 수정
content와 헤더의 요소들의 너비를 맞추기 위하여 header 아래에 <div class="header-wrap"> 추가
search 는 3가지의 치환자가 필요합니다.
1. form 을 전송 할 치환자 : onsubmit="" // 입력 한 검색어를 블로그주소/search 주소로 전송
2. 검색 입력 input value 치환자 : value="" // 검색 키워드 값 (value="검색 키워드")
3. 검색 입력 input name 치환자 : name="" // input name 값 치환 (name="search")
위의 3가지만 넣으시고 나머지 태그 및 디자인은 마음대로 하셔도 무방합니다.
나머지 태그, 방명록, rss는 link만 걸어주기 때문에 <a href="치환자"> 이렇게만 넣어주면 끝납니다.
1. 태그 링크 : https://noo9ya.tistory.com/tag
2. 위치 로그 :
3. 방명록 : https://noo9ya.tistory.com/guestbook
4. RSS : https://noo9ya.tistory.com/rss - 여기서 rss피드 화면으로 바로 이동하면 블로그로 돌아오기 힘들기 때문에 새창을 띄우는 스크립트를 넣었습니다.
onclick="window.open(this.href); return false;" <- a href의 값으로 팝업을 띄우고 a가 동작하지 않게 return은 false를 날려주는 소스입니다.
※ 아이콘은 section 3 파일준비에서 - fontawesome.min.css 를 이용하여 html 태그에서 바로 사용합니다. ex) <i class="fa fa-search"></i>
STEP 3. style.css 수정
.sr-only {position: absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;}
/* layout */
#container {background:#f3f5f7; min-width:1200px}
#header {padding:10px; border-bottom:1px solid #ddd; background:#fff;}
#contentWrap {width:1200px; margin:0 auto;}
#contentWrap:after {display:block; clear:both; content:'';}
#content {width:900px; float:left;}
#sidebar {width:280px; float:right; background:#fff;}
#footer {padding:20px; border-top:1px solid #ddd; background:#fff;}
/* header */
.global-wrap {width:1200px; margin:0 auto;}
.global-wrap:after {display:block; clear:both; content:'';}
.blog-title {float:left;}
.header-nav {float:right; margin-top:10px}
.header-nav li {display:inline-block; margin-left:15px;}
.header-nav li button {vertical-align:top}
.header-nav li div {position:relative}
.header-nav li input.search-input {position:absolute; right:30px; top:-4px; width:105px; padding:4px; border:1px solid #ddd; border-radius:5px;}
1. 기존 #tistorytoolbarid { display:none } 삭제하고 .sr-only {} 를 추가
2. /* header */ css추가 - 로고는 좌측에, 블로그 메뉴들은 우측으로 정렬
위 소스처럼 수정 및 추가를 하였다면 내 블로그에서 확인해봅시다.
위와 비슷하게 나왔다면 header 작업 끝!
티스토리 스킨만들기/Tistory One Related Articles
-
Section 7 - 티스토리 반응형 스킨 만들기 - sidebar element 넌 또 뭐야?
-
Section 6 - 티스토리 반응형 스킨 만들기 - sidebar 넌 누구냐?
-
Section 4 - 반응형 티스토리 스킨 만들기 - 레이아웃
-
Section 3-3 - 반응형 티스토리 스킨 만들기 - index.xml 작성
RECENT COMMENT