답변 3개
top:50의 의미는 브라우저 최상단에서부터 거리입니다 (경우에 따라서 div를 감싸고 있는 다른 엘리먼트의 최상단 으로부터의 거리를 의미하기도 하지만 아마도 여기서는 브라우저 최상단일거예요)
답변에 대한 댓글 3개
댓글을 작성하려면 로그인이 필요합니다.
기본적인 문서의 흐름을 깨고 원하는 위치로 이동시키려면 position 을 이용해서 이동시키시면 됩니다.
이런코딩보단 default.css의 #tnb {} 스타일에 입력하는게 추천되는 방식이겠죠.
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
css 소스입니다!
/* 초기화 */ html {overflow-y:scroll} body {margin:0;padding:0;font-size:0.75em;font-family:dotum} html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0} h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:dotum} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
#hd ul, nav ul, #ft ul {margin:0;padding:0;list-style:none} legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden} label, input, button, select, img {vertical-align:middle} input, button {margin:0;padding:0;font-family:dotum;font-size:1em} button {cursor:pointer}
textarea, select {font-family:dotum;font-size:1em} select {margin:0} p {margin:0;padding:0;word-break:break-all} hr {display:none} pre {overflow-x:scroll;font-size:1.1em} a:link, a:visited {color:#000;text-decoration:none} a:hover, a:focus, a:active {color:#000;text-decoration:none}
/* 팝업레이어 */ #hd_pop {z-index:1000;position:relative;margin:0 auto;width:970px;height:0} #hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden} .hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff} .hd_pops_con {} .hd_pops_footer {padding:10px 0;background:#000;color:#fff;text-align:right} .hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#393939;color:#fff}
/* 상단 레이아웃 */ #hd {z-index:4;position:relative;min-width:1000px;background:#fff} .hd_zindex {z-index:10 !important} #hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden} #hd_wrapper {position:relative;margin:0 auto;padding:0px 0;width:1000px;zoom:1} #hd_wrapper:after {display:block;visibility:hidden;clear:both;content:""}
#logo {float:left;padding:0px 0 0}
/* 전체 검색 */ #hd_sch {float:left;margin:0 0 0 840px;padding:0;border:1px solid #c3c6ca} #hd_sch legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden} #hd_sch #sch_stx {padding-left:5px;width:110px;height:24px;border:0;background:#fff;line-height:1.9em !important;line-height:1.6em} #hd_sch #sch_submit {padding:0 5px;height:26px;border:0;background:#e2e6eb;color:#333;cursor:pointer}
/* 텍스트 크기 조절 */ #text_size {float:left;margin:0 0 0 10px;letter-spacing:-3px} #text_size button {margin:0;padding:1px 2px;border:1px solid #c3c6ca;background:transparent;vertical-align:middle;cursor:pointer} .ts_up {font-size:1.167em !important} .ts_up2 {font-size:1.3em !important}
/* 상단 회원가입 등 링크 */ #tnb {float:right;margin:0;padding:0;list-style:none;zoom:1} #tnb:after {display:block;visibility:hidden;clear:both;content:""} #tnb li {float:left;margin:0 0 0 10px} #tnb a {display:inline-block;padding:0 10px;height:28px;color:#333;letter-spacing:-0.1em;line-height:2.4em} #tnb a:focus, #tnb a:hover, #tnb a:active {text-decoration:none} #tnb img {margin-right:0px}
/* 메인메뉴 */ #gnb {position:relative;margin:0px 0 0;border-top:0px dotted #dde4e9;border-bottom:0px solid #dde4e9;background:#1F50B5} #gnb h2 {position:absolute;font-size:0;;font-color:#ffffff;line-height:0;overflow:hidden} #gnb_1dul {margin:0 auto !important;padding:0;width:1000px;zoom:1} #gnb_1dul:after {display:block;visibility:hidden;clear:both;content:""} .gnb_1dli {z-index:10;position:relative;float:left} .gnb_1da {display:inline-block;padding:0 40px 0 10px;height:35px;background:url('../img/gnb_bg00.gif') center right no-repeat;font-weight:bold;line-height:2.95em;text-decoration:none; color:#FFF !important; } .gnb_1da:focus, .gnb_1da:hover {background:url('../img/gnb_bg00.gif') #333 center right no-repeat;text-decoration:none} .gnb_1dli_air .gnb_1da {background-color:#333;color:#fff} .gnb_1dli_on .gnb_1da {background-color:#333;color:#fff} .gnb_2dul {display:none;position:absolute;top:35px;width:180px} .gnb_2da {display:block;padding:13px 10px;text-align:left;text-decoration:none} .gnb_1dli_air .gnb_2da {background-color:#333;color:#fff} .gnb_1dli_on .gnb_2da {background-color:#333;color:#fff} .gnb_2da:focus, .gnb_2da:hover {background:#666;text-decoration:none} .gnb_1dli_over .gnb_2dul {display:block;left:0;background:#fff} .gnb_1dli_over2 .gnb_2dul {display:block;right:0;background:#fff}
#gnb_empty {padding:10px 0;width:100%;text-align:center;line-height:2em} #gnb_empty a {text-decoration:underline}
답변에 대한 댓글 5개
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인