Snippet 본문

미니다음_블랙버전

등록
신예호 (등록일 : 2013/12/04)
Type
PC
설명
서비스내에서 사용되는 블랙버전의 미니다음
미리보기
Html
<!-- minidaum  -->
<div id="wrapMinidaum">
	<div id="minidaum">
		<strong class="minidaum_logo"><a href="http://www.daum.net/?nil_profile=mini&amp;nil_src=daum" target="_top" class="img_logo">Daum</a></strong>
		<div class="minidaum_gnb">
		<div id="minidaumUser">
			<a href="http://login.daum.net/accounts/loginform.do?nil_profile=login&amp;url=http%3A%2F%2Fshopping.daum.net%2F%23!top" target="_top" id="btnMinidaumLogin">로그인</a>
		</div>
			<h2 class="screen_out">서비스 바로가기</h2>
			<div id="minidaumService">
				<ul class="minidaum_service_list">
					<li id="minidaumMail" class="minidaum_mail">
						<a href="http://mail.daum.net/?nil_profile=mini&amp;nil_src=mail" target="_top">메일</a>
					</li>
					<li id="minidaumCafe" class="minidaum_cafe">
						<a href="http://cafe.daum.net/?nil_profile=mini&amp;nil_src=cafe" target="_top">카페</a>
					</li>
					<li class="minidaum_news">
						<a href="http://media.daum.net/?nil_profile=mini&amp;nil_src=news" target="_top">뉴스</a>
					</li>
					<li class="minidaum_shopping">
						<a href="http://shopping.daum.net/main.daum?nil_profile=mini&amp;nil_src=shophow">쇼핑</a>
					</li>
				</ul>
				<a href="http://www.daum.net/doc/sitemap/" id="minidaumMore" target="_top"><span class="screen_out">전체서비스</span> 더보기</a>
			</div>
			<div id="minidaumMoreLayer" class=""><!-- minidaumMoreLayer_open추가시 레이어 열림 -->
				<strong class="minidaum_idx minidaum_idx1">ㄱ-ㄹ</strong>
				<ul class="minidaum_list_group minidaum_list_group1">
					<li>
						<a href="http://game.daum.net/?nil_profile=mini&amp;nil_src=game" target="_top">게임</a>
					</li>
					<li>
						<a href="http://gamepack.game.daum.net/?nil_profile=mini&amp;nil_src=gamepack" target="_top">게임팩</a>
					</li>
					<li>
						<a href="http://finance.daum.net/?nil_profile=mini&amp;nil_src=finance" target="_top">금융</a>
					</li>
					<li>
						<a href="http://weather.media.daum.net/?nil_profile=mini&amp;nil_src=weather" target="_top">날씨</a>
					</li>
					<li>
						<a href="http://tvnews.media.daum.net/?nil_profile=mini&amp;nil_src=news" target="_top">뉴스</a>
					</li>
					<li>
						<a href="http://media.daum.net/life?nil_profile=mini&amp;nil_src=life" target="_top">라이프</a>
					</li>
					<li>
						<a href="http://local.daum.net/map/index.jsp?cx=494917&amp;cy=1128521&amp;level=6&amp;panoid=107438&amp;pan=348.6&amp;tilt=-8.6&amp;map_type=TYPE_SKYVIEW&amp;map_hybrid=true&amp;map_attribute=ROADVIEW&amp;screenMode=normal&amp;nil_profile=mini&amp;nil_src=roadview" target="_top">로드뷰</a>
					</li>
					<li>
						<a href="http://ruliweb.daum.net/?nil_profile=mini&amp;nil_src=ruriweb" target="_top">루리웹</a>
					</li>
				</ul>
				<strong class="minidaum_idx minidaum_idx2">ㅁ-ㅂ</strong>
				<ul class="minidaum_list_group minidaum_list_group2">
					<li>
						<a href="http://mypeople.daum.net/?nil_profile=mini&amp;nil_src=mypeople" target="_top">마이피플</a>
					</li>
					<li>
						<a href="http://cartoon.media.daum.net/?nil_profile=mini&amp;nil_src=cartoon" target="_top">만화속세상</a>
					</li>
					<li>
						<a href="http://mobile.daum.net/?nil_profile=mini&amp;nil_src=mobile" target="_top">모바일</a>
					</li>
					<li>
						<a href="http://mail.daum.net/hanmail/mobile/MsgComposeExpress.daum?nil_profile=mini&amp;nil_src=sms" target="_top">문자</a>
					</li>
					<li>
						<a href="http://music.daum.net/?nil_profile=mini&amp;nil_src=music" target="_top">뮤직</a>
					</li>
					<li>
						<a href="http://miznet.daum.net/?nil_profile=mini&amp;nil_src=miznet" target="_top">미즈넷</a>
					</li>
					<li>
						<a href="http://v.daum.net/?nil_profile=mini&amp;nil_src=view" target="_top">view</a>
					</li>
					<li>
						<a href="http://blog.daum.net/?nil_profile=mini&amp;nil_src=blog" target="_top">블로그</a>
					</li>
				</ul>
				<strong class="minidaum_idx minidaum_idx3">ㅅ-ㅇ</strong>
				<ul class="minidaum_list_group minidaum_list_group3">
					<li>
						<a href="http://social.shopping.daum.net/main.daum?nil_profile=mini&amp;nil_src=socialshopping" target="_top">소셜쇼핑</a>
					</li>
					<li>
						<a href="http://sports.media.daum.net/?nil_profile=mini&amp;nil_src=sports" target="_top">스포츠</a>
					</li>
					<li>
						<a href="http://agora.media.daum.net/?nil_profile=mini&amp;nil_src=agora" target="_top">아고라</a>
					</li>
					<li>
						<a href="http://alldic.daum.net/?nil_profile=mini&amp;nil_src=dictionary" target="_top">어학사전</a>
					</li>
					<li>
						<a href="http://travel.daum.net/main.daum?nil_profile=mini&amp;nil_src=travel" target="_top">여행</a>
					</li>
					<li>
						<a href="http://media.daum.net/entertain/?nil_profile=mini&amp;nil_src=entertain" target="_top">연예</a>
					</li>
					<li>
						<a href="http://movie.daum.net/?nil_profile=mini&amp;nil_src=movie" target="_top">영화</a>
					</li>
					<li>
						<a href="http://fortune.daum.net/?nil_profile=mini&amp;nil_src=fortune" target="_top">운세</a>
					</li>
				</ul>
				<strong class="minidaum_idx minidaum_idx4">ㅈ-ㅊ</strong>
				<ul class="minidaum_list_group minidaum_list_group4">
					<li>
						<a href="http://auto.daum.net/?nil_profile=mini&amp;nil_src=auto" target="_top">자동차</a>
					</li>
					<li>
						<a href="http://stock.daum.net/?nil_profile=mini&amp;nil_src=stock" target="_top">증권</a>
					</li>
					<li>
						<a href="http://local.daum.net/map/?nil_profile=mini&amp;nil_src=map" target="_top">지도</a>
					</li>
					<li>
						<a href="http://k.daum.net/qna/index.html?nil_profile=mini&amp;nil_src=knowledge" target="_top">지식</a>
					</li>
					<li>
						<a href="http://ebs.daum.net/?nil_profile=mini&amp;nil_src=ebs" target="_top">EBS지식</a>
					</li>
					<li>
						<a href="http://book.daum.net/?nil_profile=mini&amp;nil_src=book" target="_top">책</a>
					</li>
					<li>
						<a href="http://k.daum.net/qna/item/fstudy/?nil_profile=mini&amp;nil_src=study" target="_top">체험학습</a>
					</li>
				</ul>
				<strong class="minidaum_idx minidaum_idx5">ㅋ-ㅎ</strong>
				<ul class="minidaum_list_group minidaum_list_group5">
					<li>
						<a href="http://cafe.daum.net/?nil_profile=mini&amp;nil_src=cafe" target="_top">카페</a>
					</li>
					<li>
						<a href="http://cloud.daum.net/?nil_profile=mini&amp;nil_src=cloud" target="_top">클라우드</a>
					</li>
					<li>
						<a href="http://kids.daum.net/?nil_profile=mini&amp;nil_src=kids" target="_top">키즈짱</a>
					</li>
					<li>
						<a href="http://telzone.daum.net/?nil_profile=mini&amp;nil_src=telzone" target="_top">텔존</a>
					</li>
					<li>
						<a href="http://tvpot.daum.net/Top.do?nil_profile=mini&amp;nil_src=tvpot" target="_top">tv팟</a>
					</li>
					<li>
						<a href="http://www.tistory.com/?nil_profile=mini&amp;nil_src=tistory" target="_top">티스토리</a>
					</li>
					<li>
						<a href="http://hope.daum.net/?nil_profile=mini&amp;nil_src=hope" target="_top">희망해</a>
					</li>
					<li class="last minidaum_all">
						<a href="http://www.daum.net/doc/sitemap/?nil_profile=mini&amp;nil_src=all" target="_top">전체보기</a>
					</li>
				</ul>
			</div>
		</div>
		<div id="minidaumRank" class=""><!-- minidaum_rank_open추가시 레이어 열림 --> 
			<span class="minidaum_rank_tit">실시간 이슈검색어</span>
			<ol id="minidaumRankList" class="minidaum_rank_list">
				<li><span class="screen_out">1위 </span><a href="#none" class="minidaum_word" title="신혼부부놀이">신혼부부놀이</a><span class="minidaum_status minidaum_up">상승</span><span class="minidaum_num">123</span></li>
				<li><span class="screen_out">2위 </span><a href="#none" class="minidaum_word" title="신혼부부놀이">신혼부부놀이</a><span class="minidaum_status minidaum_up">상승</span><span class="minidaum_num">11</span></li>
				<li><span class="screen_out">3위 </span><a href="#none" class="minidaum_word" title="신혼부부놀이">신혼부부놀이</a><span class="minidaum_status minidaum_up">상승</span><span class="minidaum_num">20</span></li>
				<li><span class="screen_out">4위 </span><a href="#none" class="minidaum_word" title="신혼부부놀이">신혼부부놀이</a><span class="minidaum_status minidaum_up">상승</span><span class="minidaum_num">202</span></li>
				<li><span class="screen_out">5위 </span><a href="#none" class="minidaum_word" title="신혼부부놀이">신혼부부놀이</a><span class="minidaum_status minidaum_up">상승</span><span class="minidaum_num">13</span></li>
				<li><span class="screen_out">6위 </span><a href="#none" class="minidaum_word" title="신혼부부놀이">신혼부부놀이</a><span class="minidaum_status minidaum_up">상승</span><span class="minidaum_num">84</span></li>
				<li><span class="screen_out">7위 </span><a href="#none" class="minidaum_word" title="신혼부부놀이">신혼부부놀이</a><span class="minidaum_status minidaum_up">상승</span><span class="minidaum_num">64</span></li>
				<li class="minidaum_select"><span class="screen_out">8위 </span><a href="#none" class="minidaum_word" title="신혼부부놀이">신혼부부놀이</a><span class="minidaum_status minidaum_up">상승</span><span class="minidaum_num">32</span></li>
				<li><span class="screen_out">9위 </span><a href="#none" class="minidaum_word" title="신혼부부놀이">신혼부부놀이</a><span class="minidaum_status minidaum_new">new</span><span class="minidaum_num"></span></li>
				<li><span class="screen_out">10위 </span><a href="#none" class="minidaum_word" title="신혼부부놀이">신혼부부놀이</a><span class="minidaum_status minidaum_new">new</span><span class="minidaum_num"></span></li>
				<li class="minidaum_dummy"><span class="screen_out">1위 </span><a href="#none" class="minidaum_word" title="신혼부부놀이">신혼부부놀이</a><span class="minidaum_status minidaum_up">상승</span><span class="minidaum_num">528</span></li>
			</ol>
		</div>
	</div>
</div>
CSS
/* minidaum common */
#wrapMinidaum {z-index:999999;height:34px;font-size:12px;line-height:1.5;color:#333;text-align:left}
#minidaum ol, #minidaum ul, #minidaum li {list-style:none}
#minidaum img, #minidaum fieldset {border:0;padding:0}
#minidaum img {vertical-align:top}
#minidaum p {margin:0;padding:0}
#minidaum a {font-family:"돋움",dotum,sans-serif;text-decoration:none}
#minidaum a:active, #minidaum a:hover {text-decoration:underline}
#wrapMinidaum .screen_out {display:block;overflow:hidden;position:absolute;left:-9999px;width:1px;height:1px;font-size:0;line-height:0;text-indent:-9999px}
#minidaum {position:absolute;top:0;left:0;width:100%;height:34px;letter-spacing:-1px}
#minidaum #minidaumStart {float:left;line-height:17px;margin:7px 17px 0 0;color:#818388}
#minidaum #minidaumStart.show {display:block}
.minidaum_gnb {float:right;margin-top:6px;line-height:15px}
*:first-child+html .minidaum_gnb {line-height:14px}
#minidaumUser {position:relative;float:left;margin-right:11px}
#minidaum .minidaum_login #btnMinidaumLogin {display:none}
#minidaumUserLayer {display:none;position:absolute;top:18px;right:9px;width:80px;font-size:12px;background:#fff none;border:1px solid #444}
#minidaumUserLayer.minidaumUserLayer_open {display:block;overflow:hidden;z-index:999999}
#minidaumUserLayer a {font-size:12px;color:#333}
#minidaumUserLayer .minidaum_logout {height:19px;padding-top:5px;padding-left:10px;background:#f4f5f7 none}
#minidaumUserLayer .minidaum_logout a {font-weight:bold}
#minidaumUserLayer .minidaum_mylayer {padding:7px 0 7px 10px;border-top:1px solid #f1f2f4;letter-spacing:0}
#minidaumUserLayer .minidaum_mylayer li {height:19px;line-height:19px}
#minidaumUserLayer .minidaum_myinfo li {height:18px;line-height:18px}
#minidaumUserLayer .minidaum_myinfo a {color:#777}
#minidaumService {float:left;padding-top:4px}
#minidaumService .minidaum_top_link {padding-right:1px;color:#52555e;font-size:12px;font-family:tahoma;letter-spacing:0}
.minidaum_service_list {float:left}
.minidaum_service_list .minidaum_mail {padding-left:0}
.minidaum_service_list .minidaum_news {padding-right:9px}
.minidaum_service_list .minidaum_shopping {padding-right:8px}
.minidaum_service_list .minidaum_new{display:inline-block;overflow:hidden;width:11px;height:12px;margin-left:3px;background:url(http://i1.daumcdn.net/icon/minidaum/common/minidaum_v16.png) no-repeat -160px -270px;text-indent:-3000px;vertical-align:bottom}
.minidaum_service_list .minidaum_count * {margin-top:0}
#minidaumMoreLayer {display:none;position:absolute;top:27px;right:0;overflow:hidden;width:449px;height:223px;font-size:12px;background:#fff none;border:1px solid #444;letter-spacing:0}
#minidaumMoreLayer.minidaumMoreLayer_open {display:block;z-index:999999}
#minidaumMoreLayer .minidaum_idx {overflow:hidden;position:absolute;top:16px;width:36px;height:13px;text-indent:-9999px}
#minidaumMoreLayer .minidaum_idx1 {left:22px;background:url(http://i1.daumcdn.net/icon/minidaum/common/minidaum_v16.png) no-repeat 0 -40px}
#minidaumMoreLayer .minidaum_idx2 {left:104px;background:url(http://i1.daumcdn.net/icon/minidaum/common/minidaum_v16.png) no-repeat -40px -40px}
#minidaumMoreLayer .minidaum_idx3 {left:194px;background:url(http://i1.daumcdn.net/icon/minidaum/common/minidaum_v16.png) no-repeat -80px -40px}
#minidaumMoreLayer .minidaum_idx4 {left:284px;background:url(http://i1.daumcdn.net/icon/minidaum/common/minidaum_v16.png) no-repeat -120px -40px}
#minidaumMoreLayer .minidaum_idx5 {left:374px;background:url(http://i1.daumcdn.net/icon/minidaum/common/minidaum_v16.png) no-repeat -160px -40px}
#minidaumMoreLayer .minidaum_list_group {float:left;width:89px;height:176px;margin-top:16px;padding-top:20px;border-left:1px solid #ebeef2}
#minidaumMoreLayer .minidaum_list_group li {float:left;overflow:hidden;width:100%;height:22px;line-height:23px;text-indent:13px}
#minidaumMoreLayer .minidaum_list_group1 li {float:left;overflow:hidden;width:100%;height:22px;line-height:23px;text-indent:21px}
#minidaumMoreLayer .minidaum_list_group li a {font-size:12px;color:#333;white-space:nowrap}
#minidaumMoreLayer .minidaum_list_group .last {height:18px}
#minidaumMoreLayer .minidaum_list_group1 {width:89px;border:none}
#minidaumMoreLayer .minidaum_list_group5 {width:86px}
#minidaumMoreLayer .minidaum_list_group .minidaum_all a {padding-right:7px;color:#5279b4;background:url(http://i1.daumcdn.net/icon/minidaum/common/minidaum_v16.png) no-repeat 100% -147px;text-decoration:underline;letter-spacing:-1px}
#minidaumMoreLayer.minidaum_custom .minidaum_idx {top:49px}
#minidaum .minidaum_custom {height:258px}
#minidaum .minidaum_custom .minidaum_list_group {margin-top:49px}
#minidaumMoreLayer .minidaum_more_custom {position:absolute;top:0;left:0;overflow:hidden;width:427px;height:33px;padding-left:22px;color:#000;background:#f5f6f8 none;border-bottom:1px solid #f0f1f3}
#minidaumMoreLayer .minidaum_more_custom a {color:#000;font-size:12px}
#minidaumMoreLayer .minidaum_more_custom li {float:left;line-height:33px;margin-right:21px}
#minidaumRank {float:left;position:relative;overflow:hidden;width:191px;height:19px;margin-top:9px;font-size:12px;letter-spacing:0}
#minidaumRank .minidaum_rank_tit {display:none;height:0;line-height:0}
#minidaumRank .minidaum_status {float:left;width:7px;height:12px;margin-right:2px;text-indent:-3000px}
#minidaumRank .minidaum_up {background:url(http://i1.daumcdn.net/icon/minidaum/common/minidaum_v16.png) no-repeat 0 -21px}
#minidaumRank .minidaum_down {background:url(http://i1.daumcdn.net/icon/minidaum/common/minidaum_v16.png) no-repeat -20px -21px}
#minidaumRank .minidaum_keep {background:url(http://i1.daumcdn.net/icon/minidaum/common/minidaum_v16.png) no-repeat -40px -19px}
#minidaumRank .minidaum_new {width:22px;background:url(http://i1.daumcdn.net/icon/minidaum/common/minidaum_v16.png) no-repeat -60px -20px}
#minidaumRank .minidaum_rank_list li {float:left;width:100%;padding-left:16px;height:23px;line-height:14px}
#minidaum .minidaum_rank_open {z-index:999999;width:190px;height:276px;margin-top:6px;font-family:'굴림',gulim,sans-serif;border:1px solid #444;background:#fff none}
#minidaum .minidaum_rank_open a {font-family:'굴림',gulim,sans-serif}
#minidaum .minidaum_rank_open li {position:relative}
#minidaum .minidaum_rank_open .num_issue {display:block;overflow:hidden;position:absolute;left:-9999px;width:1px;height:1px;font-size:0;line-height:0;text-indent:-9999px}
#minidaum .minidaum_rank_open .minidaum_rank_list {padding:11px 0 0 0;background-position:14px -158px}
#minidaum .minidaum_rank_open .minidaum_rank_list li {padding:0 0 0 14px}
#minidaum .minidaum_rank_open .minidaum_rank_tit {display:block;height:29px;line-height:31px;color:#565656;font-weight:bold;background:#f4f5f7;border-bottom:1px solid #dbdbdb;text-align:center;letter-spacing:-1px}
#minidaum .minidaum_rank_open .minidaum_word {overflow:hidden;width:115px;_width:137px;margin-right:1px;padding:0 0 0 22px;font-size:12px;color:#000;letter-spacing:0}
#minidaum .minidaum_rank_open .minidaum_dummy {display:none}
#minidaum .minidaum_rank_open .minidaum_num {font-size:10px;color:#4c4c4c}
#minidaum .minidaum_rank_open .minidaum_select .minidaum_word {font-weight:bold;letter-spacing:-1px}
#minidaum .minidaum_shield {position:absolute;top:0;left:0;z-index:-1}
#minidaum .minidaumMoreLayer_open .minidaum_shield,
#minidaum .minidaumUserLayer_open .minidaum_shield,
#minidaum .minidaum_rank_open .minidaum_shield {border:1px solid #fff}

/* black 버전 */
body {background:#fff url(http://i1.daumcdn.net/icon/minidaum/common/minibar_b_v03.gif) repeat-x}
#btnMinidaumLogin {float:left;overflow:hidden;width:46px;height:21px;background:url(http://i1.daumcdn.net/icon/minidaum/common/minidaum_v16.png) no-repeat -150px 0;text-indent:-9999px;vertical-align:bottom}
#minidaum .minidaum_logo {display:inline;float:left;margin:7px 14px 0 3px}
#minidaum .minidaum_logo .img_logo {display:block;overflow:hidden;width:41px;height:19px;background:url(http://i1.daumcdn.net/icon/minidaum/common/minidaum_v16.png) no-repeat -50px 0;text-indent:-9999px}
.minidaum_service_list li {float:left;padding:0 8px 0 7px;background:url(http://i1.daumcdn.net/icon/minidaum/common/minidaum_v16.png) no-repeat 100% -109px}
#minidaumRank .minidaum_word {float:left;margin-top:1px;padding-right:6px;line-height:15px;color:#a9a9a9;white-space:nowrap;letter-spacing:-1px}
*:first-child+html #minidaumRank .minidaum_word {line-height:14px}
#minidaumRank .minidaum_rank_list {float:left;width:190px;background:url(http://i1.daumcdn.net/icon/minidaum/common/minidaum_v16.png) no-repeat 1px -672px}
#minidaumRank .minidaum_num {float:left;line-height:15px;color:#a9a9a9;font-size:11px;font-family:tahoma}
#minidaumRank .minidaum_dummy {background:url(http://i1.daumcdn.net/icon/minidaum/common/minidaum_v16.png) no-repeat 1px -672px}
#minidaumService li a {color:#a9a9a9}
#minidaumService #minidaumMore {display:inline;float:left;padding:0 9px 0 7px;font-weight:bold;color:#a9a9a9;background:url(http://i1.daumcdn.net/icon/minidaum/common/minidaum_v16.png) no-repeat 100% -90px}
#minidaumService .minidaum_service_list .minidaum_count {padding:0 2px 0 1px;font-weight:bold;color:#669aff}
#minidaumNick {padding-right:9px;line-height:17px;color:#a9a9a9;background:url(http://i1.daumcdn.net/icon/minidaum/common/minidaum_v16.png) no-repeat 100% -91px}
*:first-child+html #minidaumNick {line-height:16px}
#minidaumUser.minidaum_login {padding-right:9px;margin:3px 7px 0 0;line-height:16px;background:url(http://i1.daumcdn.net/icon/minidaum/common/minidaum_v16.png) no-repeat 100% -108px}

안내 : 해당 Snippet을 사용하기 위해서는 Daum에서 사용하는 reset.css(global classname포함)를 사용 하셔야 합니다.
※ [ CSS Convention ] 바로가기