티스토리 스킨 만들기 #7 헤더 만들기 (1)

헤더 만들기

 오늘은 헤더부분을 만들어 보려고한다. 보통 웹페이지에서 헤더부분은 웹의 타이틀, 네비게이션 등을 포함하고 있다. 나는 블로그 타이틀과 검색기능, 그리고 태그모음, 방명록 바로가기를 넣을 예정이다.

 

치환자

우선 치환자 부터 알아보자.

 

지난 기본파일 만들기

2020/02/20 - [티스토리 관리/티스토리 스킨 만들기] - 티스토리 스킨 만들기 #5 기본 파일 작성 (2)

티스토리 스킨 만들기 #5 기본 파일 작성 (2)

에서 마지막 부분에 설명해 놓은 공통치환자 부분에서 필요한 치환자가 있다.

 

https://shalchoong.tistory.com/m/, 여긔의 IT Story, ,

• 홈
• 태그
• 방명록

이 네가지가 필요하다. 블로그를 대표하는 이미지와 타이틀, 이것을 씌워줄 블로그메인 링크주소, 또 태그모음과 방명록 네이게이션을 제공해주는 치환자들이다.

 

또 필요한 치환자는 검색기능을 만들기 위한 치환자들인데 

검색어 입력 박스

검색어

검색 온클릭 이벤트

가 필요하다.

 

html작성

<header>
	<div id='header'>
		<a href='https://shalchoong.tistory.com/m/'>
			<div class='blog-title'>
				<h1>여긔의 IT Story</h1>
			</div>
        	</a>            
		<div class='header-nav'>
			<ul>
				<li class="search">
					<s_search>
						<form onsubmit="" autocomplete="off">
							<legend class="sr-only">검색 폼</legend>
							<input type="text" name="" title='검색하기' value="" placeholder='Search' />
							<button type='submit'>
								<i class="icon-search"></i>
							</button>
						</form>
					</s_search>
				</li>
				<li class="menu">

  
홈
  
태그
  
방명록
</li>
			</ul>
       	 	</div>            
	</div>
</header>

블로그 타이틀은 좌측으로 나머지 네비게이션부분은 우측으로 정렬하기위해 나누어 놓았다. 

 

html 설명

설명은 개인적으로 생각했을때 "이게 왜?" 라고 생각되는 부분만 하려고한다.

<div class='header-nav'>
	<ul>
		<li class="search">
			<s_search>
				<form onsubmit="" autocomplete="off">
					<legend class="sr-only">검색 폼</legend>
					<input type="text" name="" title='검색하기' value="" placeholder='Search' />
					<button type='submit'>
						<i class="icon-search"></i>
					</button>
				</form>
			</s_search>
		</li>
		<li class="menu">

  
홈
  
태그
  
방명록
</li>
	</ul>
</div>

우측으로 정렬할 네비게이션 부분이다. 전체적인 틀을 리스트형식으로 만들어주고 검색버튼을 요소1, 메뉴치환자를 요소2 로 두었다. 메뉴치환자의 경우 치환후에 모습이

<ul>
	<li class='t_menu_tag first'>
		<a href='/tag'>태그</a>
	</li>
	<li class='t_menu_guestbook last'>
		<a href='/guestbook'>방명록</a>
	</li>
</ul>

위와 같다. css사용시 li를 이용하여 정렬을 편하게 하기위해 치환후의 모습을 이용 전체 틀을 리스트형식으로 만들었다.

 

css는 헤더만들기 2부에서 계속