검색창을 다는 방법은 이전에 적은것이 있습니다. 아는것을 쉽게 풀어쓴다는것이 정말 힘듭니다.
그와 관련해서 더욱 보강하는 글이 되겠습니다.
이전에는 사이드바에 검색창을 다는 방법이였지만 이글은 사이드바가 아닌곳 특히 상단 제목 있는 부분에 다는 방법입니다.
이는 다른곳에도 적용이 가능합니다.
검색창 사이드바에 다는 방법 =>  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 해제하는 방법을 사용해서 하는것을 읽지 말구요...

댓글

  1. 2012.05.21 11:08 신고 BlogIcon 한솔골프  댓글주소  수정/삭제  댓글쓰기

    역시 생각보다 어려운거 같습니다...잘 안되는 부분이 있으면 다시 질문을 드려야 할꺼 같습니다..

  2. 2012.05.21 11:43 신고 BlogIcon 한솔골프  댓글주소  수정/삭제  댓글쓰기

    대문님 적용을 해봤는데요...지금은 타이틀 이미지와 메뉴가 붙여진 상태로 나오는데 적용을 하면 그 사이에 공간이 생깁니다...ㅠㅠ

    • BlogIcon 대문 demun 2012.05.21 17:59 신고  댓글주소  수정/삭제

      공간이 왜 생길까요???
      ㅎㅎㅎㅎ
      일단 적용한 다음 headerTop 부분에 height:100px 로 고정이 되어 있습니다. 이 부분을 줄여보세요...
      또는 search 에 대한 스타일이 현재 지정이 되어 있습니다.(예전꺼요...)

      정확하게 볼려면 html 파일과 css 파일을 텍스트로 메모장에 넣어서 본인의 블로그에 비공개포스트에 업로드한다음 그 주소를 저한테 비빌글로 알려주세요.
      저만 다운로드하게요...

      제가 다른블로그에 적용해보고 알려드릴게요

  3. 2012.05.22 10:32  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

  4. 2012.05.22 11:18  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다

    • BlogIcon 대문 demun 2012.05.22 16:31 신고  댓글주소  수정/삭제

      menu 에 background-color:#111 은 background-image 가 지원하지 않는 브라우져을 대비해서 지정한것입니다.
      메뉴바의 색을 변경하려면 background-image에 색상을 변경하면 됩니다.

  5. 2012.05.24 09:28 신고 BlogIcon 한솔골프  댓글주소  수정/삭제  댓글쓰기

    대문님 죄송하지만 한가지 질문이 더 있습니다..
    대문님이 주신 소스 적용을 해보니 잘 되었습니다.
    이제 블로그에 맞는 검색창 이미지를 만들려고 하는데..만든 이미지를 어디에 어떻게 적용을 해야 하는 건가요?

  6. 2012.05.25 17:50  댓글주소  수정/삭제  댓글쓰기

    비밀댓글입니다