JQuery 다음 검색창 UI 구현

1 개요

jQuery 다음 검색창 구현

• Daum 검색창은 전체가 이미지로 구성되어 있음

아래 소스코드에는 각각 base64형식으로 되어 있으나, 실제 사이트는 스프라이트 방식

• 순수 CSS만으로는 구현 불가

input text에 포커스가 갈 때 부모의 테두리선 색상을 바꿔야 하기 때문

CSS는 역방향접근(여기서는 부모 속성 접근)이 불가능함

2 소스 코드

<style>
body { background: white; }
.box_search {
	margin: 0; padding: 0;
	width: 444px;
	overflow: hidden;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXoAAAAnCAYAAAABx4MNAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAADYSURBVHja7NQ7CsJAAEXRN0Fi/GCtuP/VpLOzGLCzC2i6aeI6HM5Zwi1u+Xy/W329U5+PANCfMs/zdr3dczpOagB0aNday+VyzrTfZxgGRQB6G32SHKYppRQ1ADo0JDF5gN5HD4DRA2D0ABg9AEYPgNEDYPQAGD2A0QNg9AAYPQBGD4DRA2D0ABg9gNEDYPQAGD0ARg+A0QNg9AAYPYDRSwBg9AAYPQBGD4DRA2D0ABg9AEYPYPQAGD0A/zH6cRyzrqsSAJ0qy7Jstda01tQA6NAPAAD//wMARAsco4Q7s7oAAAAASUVORK5CYII=');
}
.box_search_on {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXoAAAAnCAYAAAABx4MNAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAADrSURBVHja7NSxDQFhGIDh7z+n4EJnAYUVJBJLGMFGChtYwQA67XWiukqjkYtISOQ3hz/PM8JbvKntPvlwesbllgKA8qTt/pE3y2Gs5m81AApU3/sc68U3xqNJ1HWtCEBpo4+IaMZNDAaVGgAFqiLC5AFKHz0ARg+A0QNg9AAYPQBGD4DRA2D0AEYPgNEDYPQAGD0ARg+A0QNg9ABGD4DRA2D0ABg9AEYPgNEDYPQARi8BgNEDYPQAGD0ARg+A0QNg9AAYPYDRA2D0APzH6GfTFOfrWwmAQqW2++Td8RX3PqsBUKAfAAAA//8DABkaHPQpAjoqAAAAAElFTkSuQmCC');
}
.tf_keyword {
	float: left;
	margin: 10px 10px 0;
	padding: 0; border: 0;
	width: 358px; height: 20px;
	color: #333;
	font-weight: bold;
	font-size: 16px;
	line-height: 18px;
	background-color: transparent;
	outline: none;
}
.btn_search {
	float: left;
	overflow: hidden;
	margin: 0; padding: 0; border: 0;
	width: 66px; height: 39px;
	cursor: pointer;
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAAAnCAIAAAA0DwlWAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAOLSURBVHja7FhNaFxVFP7u39z37sxkOozSWlJoSm2oIlSIP7E6UEQpiBFaslAMBUEX3VgEd1ll6c5NoQsR7EoQwUCJCqZgFYskKKkoNjSmUm3aSQsz7//vXhdPqwF3c1M7Moe7eH+8+75zznfO9w6ZmluH3IGBtftqePMFxQG0mo3BhRGn+bvnAg7AmMFFgYrgnduG4n9hQxj3knEAeqDJAWgz5MYQhmUzWnMAWtt/dRAFcZrpIgdAGZe8olxJKdtGilsHQHX88mF1aKz24C4B4Nqt/JvL6fxS14+cWlUNAAzPDyb2FW+92FIVcufiaItPT/KpCfe9L/zPLwX1WtV2pdI2ueEH4aN789njjTsYVjey1Y2sPJaCnDxaf/4R4wfhvRsNrQuG6O2XWuXpueXw/fNhmDMAnOiZtjs9qQC8/lx1ec3zM10R1DIMK+0vjJJXDqsyDouXojOLhSubTUUA5Lk5+1UIhNOTSjB67AlxZjHk3GZqWXNJkqeHxgSAJDOnPwucisP5n6nFOXGlOvtl1As1gGcOOmka2+SGtscNXeR772cAfv49D3MmxJbayjnR4D9eywCMKFrh1G6Vt5mgWUEGvotTxn+7nQMY38050XlutsYdMMlDowJAL9Rprqk9B5oyqbS2sCpMfP9LVhbWmbYbx2GWFeWtLCuCKDjWdkcUBXDhp1gKx8qm5bIZDSndD78Ow9QAmJ5UbzzL4rjX9btdvxvHvZmn2WtP1csnr3YKQ6C1tb8DYwyZmltXzT22ZMjj+/Ts8b8HFKsbWZTg4CgTbIu/Tn/qLazAlQ5jFlRW5+Z1Nn7kFJMjxqD/JbhY7+RrG/HEfikYAdCqsZ07GKMEQFbotZt5q8YAPLZfClosXUkooYTQPveNQp+NHznFnRFb8RVcXN3M57/1CEFDkZIMN7rFwnfxO594H12Mdjfp2E4B4OE9YlfDnP/BE1zQ/vgeBh6Zmlt3GqOWtZoukiz5Z48TwnEq0hgTp/GJtiiFCYCLl5O5j8O66suPm53rfFuqOGWuVK78F03uSveDC0mn6508Wgfw5AHZqvqRNoz01XNKTXUXGxVhUroLKxHgvdquLl1JOj1dr5E+v4HjrhsBcaRaWAnnl29RxpVT61sHFRzAfzLekVLJv7Ku/w8Y+BnucMAzhLGNAx4z4OQodDFMqiEMi5amQbPKOIDNG78OLgxX0NmZB/4YAEA5JT5MGj3kAAAAAElFTkSuQmCC');
}
.btn_search:hover {
	background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAAAnCAYAAAC7bZ4BAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAOtSURBVHja7JlNbFVFFMd/M3M/3rv2g/BCIFATG6ykuukCxWKMYiRxVVZV4gYX6oKVG9ZVdm7cmMBGE5dGN2IsVhvZYCwhLZqYoBZswFAD1Yf4Xt9993PGxW1f+miNX7m3au9JZjN3kjnzn//5zznnirGT18wvrZStajv6FRPP70aMnbxmKv0DWxaIIFiG8A4WgDF6ywLhuh43b9eRlAZQArFqK6FhSkaUXCiBKEOjZMQfMULrYvOIKApIdIJJs32Fkkhl4VoOQhR/N0nQzIAoLIuLAzwr5diTHiODPQztsgG4UU+YmY/4cLZNvSWp2JXNYURRIBzYKzhxpIbniK5vAzWL8VGLsf1V3v5smY++CgoHo5AUO0wiDuwVTIxv65q/cjMG6DDDtQXHn+kFmkzO+Thu5f/DCGMMnpVy4kitMzc553N6epkkzZihkLzwVJXxUQ+Alw7fw8yViEZbI2UxmiFXnc1rxFHIc495nXA493WbN6daSOlScapUnCrKtnjnXJv3Z3wAbCU5erBKGAe5+rY6CgEiRTMymFE/jA1vTDZxlI1AdtYIZAeMhp+F6ePDFUyqiwUi19BINfftUAB892NCkgqEVOvWCSQpmss3Mt3o8ySWsorWiHzFMk4FdtfZ/9x+QqW5+9b9auh8U+zF2wlDu2z27bawlCFNNVKIDdc+OJCFUcPXxJFBOqY4sczThJKcXwg6z+OxJ3pIdIJeU99oYwijkGcPVejzMpfOfxMglCw2NHSORZclLc5+EXJ0fw+eIxgf9fAcOD29TBitCJWUvHi4t/N8Alz/KcWkGi3zZ0Qc+lnzNrX68t0ojjg47G6YULVDGB5Q2Bvc/qmpJmcu+ljKQuSYT9z64VvUvkOvvKqxwZjchpSS60sxC0sJjwy52CrTh1qPYuc2hZJiRVQ1C0sJtZ5MWR++36XiSGavBhhhEIZc/Gs16itACCd/MVoB4+ylACGg3xMdPbj1a8rHXwa89l6DDy747NmuGNyZieZD99rs2a74/HIAAsTviOw/sVajnoVGJLxCCxytNeau0l9I2UmntdbrNOPCfMjEu3dySbl/Xry6OY0ZKSXKsrrG2gNKKXlrusmpqWZn7tEHXHo99d8vw/8OWGcu+viR5uWne5n9PqTpp7kVYZvSofor9ukln0/mWgghEFLm5uu/lhFrtUMUwcCybdtVa+gtD0TJCCAO2+UPnruatyUQZWiUjCgZsa5F4PXVMkbUF+e3LBC2W+X14yP8NgB+dtwcbAv6ZAAAAABJRU5ErkJggg==');
}
</style>

<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(function() {
	$('.tf_keyword')
		.focus(function() {
			$('.box_search').addClass('box_search_on');
		})
		.blur(function() {
			$('.box_search').removeClass('box_search_on');
		});
});
</script>

<form>
	<div class="box_search">
		<input type="text" class="tf_keyword" title="검색어 입력" />
		<button type="submit" class="btn_search"></button>
	</div>
</form>

3 같이 보기

• CSS 네이버 검색창 구현
• CSS 위키백과 검색창 구현
• 스프라이트
• 다음