티스토리 스킨에 검색창을 원하는곳에 다는 방법

demun
티스토리스킨수정/검색
2012. 5. 21. 10:14

검색창을 다는 방법은 이전에 적은것이 있습니다. 아는것을 쉽게 풀어쓴다는것이 정말 힘듭니다.
그와 관련해서 더욱 보강하는 글이 되겠습니다.
이전에는 사이드바에 검색창을 다는 방법이였지만 이글은 사이드바가 아닌곳 특히 상단 제목 있는 부분에 다는 방법입니다.
이는 다른곳에도 적용이 가능합니다.
검색창 사이드바에 다는 방법 => http://demun.tistory.com/1992

주로 스타일을 입히는 방법은 제각각 이므로 좀 제외하고 위치를 잡는 방법을 알아보겠습니다.
일단 목표는 상단의 제목부분을 두개로 나누어서 하나는 기존의 제목을 사용하고 다른 한 공간에 검색창을 다는것입니다.

원하는 사이트이 디자인을 한번 볼까요?

보시다시피 제목 하나만 존재합니다.
그러다보니 두개로 나누어서 우측에 빈공간에 검색창을 달려 합니다.
두개로 나눈경우는 어떤 경우인가요. 현재 제 블로그가 그렇게 되어 있습니다. 한번 볼까요

이렇게 두군데로 나뉘어져 있습니다.
이는 상단에만 그런것이 아니라 본문, 하단.....어느곳에서든지 모두 가능합니다.
또 두개의 공간으로 나누는것만 가능한것이 아니라 3개, 4개 ...더 많이 나눌수 있습니다.

일단 공간을 나눌려면 float 라는 속성을 사용합니다.
이 속성을 사용하면 반드시 해제를 시켜줘야 합니다.

float 속성[정렬] IE 해결법 => http://demun.tistory.com/1889

float 를 해결하는 방법 => http://demun.tistory.com/1932

float를 해제하는 방법은 위 링크를 참고하시기 바랍니다.
아래 그림을 보면 headerTop 이라는 div 가 잇고 너비를 960px 로 설정이 된것을 볼수가 있습니다.

두개로 나누는 방법은 여기서는 두가지를 생각할수 있습니다.
headerTop 을 너비를 줄이는 방법하나, headerTop 에 두개의 div 를 만들어 각각 절반식 너비를 사용하는 방법입니다.
여기서는 headerTop 과 headerMid 둘로 나뉘어져 headerMid 는 메인메뉴가 들어있는 형국입니다.

이럴때는 headerTop 안에 두개의 div 를 만들어서 각각 너비를 지정해주는것이 좋습니다.
즉 아래처럼 코드가 생성이 되는것이죠.
변경전과 후의 코드를 비교해보세요.


<!-- 변경전 -->
<div id="headerTop">
	<h1>
		<a href="[#\#_blog_link_##]">
			<span>
				<img alt="좋은 친구들 프렌즈" src="이미지주소" />
			</span>
		</a>
	</h1>
</div>

<!-- 변경후 -->
<div id="headerTop" class="clearfix">
	<div class="header-left"><!-- 새로생긴 div -->
	<h1>
		<a href="[#\#_blog_link_##]">
			<span>
				<img alt="좋은 친구들 프렌즈" src="이미지주소" />
			</span>
		</a>
	</h1>
	</div>
	<div class="header-right"><!-- 새로생긴 div -->
		검색창이 들어가는 부분
	</div>
</div>

코드를 보시면 아시겠지만 header-left 와 header-right 라는 클래스를 새로 생성했습니다.
또 한가지 headerTop 부분에 clearfix 라는 클래스를 부여했습니다.
그것은 header-left 와 header-right 을 각각 float:left 와 float:right 로 자리를 잡기위함입니다.
css 코드를 한번 볼까요.


.header-left {
	float:left;
	width:50%; 
}
.header-right {
	float:right;
	width:50%;
}

여기서 너비를 지정하는 width:50%는 이런식으로 지정해도 되지만 px 로 지정해도 됩니다.
물론 최대너비가 headerTop 에서 960px를 지정했기 때문에 그 안에서 너비를 지정하면 됩니다.
너비를 지정했으니 이제 남은 검색창에 해당하는 html 코드를 넣으면 됩니다.
아래처럼 되겠죠.


<div id="headerTop" class="clearfix">
	<div class="header-left"><!-- 새로생긴 div -->
	<h1>
		<a href="[#\#_blog_link_##]">
			<span>
				<img alt="좋은 친구들 프렌즈" src="이미지주소" />
			</span>
		</a>
	</h1>
	</div>
	<div class="header-right"><!-- 새로생긴 div -->
		<s_sidebar_element>
			<!-- 검색 --> 
			<div class="search"> 
				<s_search>
					<input type="text" name="[#\#_search_name_##]" value="[#\#_search_text_##]" onkeypress="if (event.keyCode == 13) { [#\#_search_onclick_submit_##] }"/>
					<input value="검색" type="button" onclick="[#\#_search_onclick_submit_##]" class="submit"/>
				</s_search>
			</div>
		</s_sidebar_element>
	</div>
</div>

이정도 하면 모든것은 끝이 났습니다. 이제 .search 부분에 대한 스타일만 설정을 해주면 됩니다.
여기서 중요한것은 어느 자리를 둘로 나누어서 하나는 왼쪽으로 , 또하나는 오른쪽으로 사용한다는 점입니다.
그럴때 버그를 잡는 float 해제하는 방법을 사용해서 하는것을 읽지 말구요...

개 개

demun(대문블로그)

티스토리 스킨에 검색창을 원하는곳에 다는 방법

티스토리툴바