오른쪽 상단에 퀵링크( 홈으로 | 로그인 | 사이트맵 ) 넣는 방법 소개합니다.
HTML 구성요소를 이용하여 소스를 넣고 CSS를 이용하여 HTML 위치를 변경하는 방법입니다.
예시홈페이지 : http://lovecss.ohpy.com
1.
'홈페이지관리>디자인관리>구성요소레이아웃' 에서...
HTML구성요소 하나를 우측단에 추가합니다.
2.
'홈페이지관리>디자인관리>상세꾸미기' 에서...
추가한 HTML구성요소에 아래의 소소를 추가합니다.
<DIV class=topnavi>
<DIV class=topnavi-link>
<A href="/">홈으로</A> | <A href="/">로그인</A> | <A href="/">사이트맵</A>
</DIV>
</DIV>
※ 링크값과 글자는 원하시는 것으로 넣어주세요.
3.
'홈페이지관리>디자인관리>CSS>구성요소CSS' 에서...
추가한 HTML구성요소 CSS 란에 아래 소스를 추가합니다.
.topnavi { position: absolute; top:8px; width:200px; }
.topnavi-link { float:right; padding-right: 15px; color: #555;}
.topnavi-link a { color: #555; font-weight: bold; text-decoration:none;}
.topnavi-link a:hover { color: #f60; font-weight: bold; }
※ style에 들어간 설정값(top,width,padding 등)들은 홈페이지에 맞게 넣어주세요.
[추가팁1]
3번까지 하면 스킨에 따라 상단의 구성요소와 겹치는 현상이 발생할 수도 있습니다.
그럴 경우 타이틀 구성요소의 style 값을 변경해줍니다.
'홈페이지관리>디자인관리>CSS>구성요소CSS' 에서...
'타이틀구성요소 CSS'란에 margin 항목을 아래와 같이 변경합니다.
margin: 30px 15px 0 15px;
※ style에 들어간 margin값(margin:위 오른쪽 아래 왼쪽; 순)은 홈페이지에 맞게 넣어주세요.
[추가팁2]
예시홈페이지에서는 좌측단에 구성요소를 넣을수 있는 스킨세트이기 때문에 오른쪽 정렬의 상단퀵링크를 넣어봤습니다.
왼쪽에 상단 퀵링크를 넣고 싶다면
우측단에 해당 HTML 구성요소를 넣으시고, 아래처럼 float과 padding 값을 조절해주시면 됩니다.
.topnavi { position: absolute; top:8px; width:200px; }
.topnavi-link { float:left; padding-left: 15px; color: #555;}
.topnavi-link a { color: #555; font-weight: bold; text-decoration:none;}
.topnavi-link a:hover { color: #f60; font-weight: bold; }
※ style에 들어간 설정값(top,width,padding 등)들은 홈페이지에 맞게 넣어주세요.
[추가팁3]
마우스 클릭할때 텍스트 사방으로 점선을 없애는 방법입니다.
아래 소스를 추가하시면 링크 테두리가 없어집니다.
.topnavi-link a { selector-dummy : expression(this.hideFocus=true); /* 링크 점선 없애기 for IE */}
.topnavi-link a:focus { -moz-outline-style: none; /* 링크 점선 없애기 for FF */}
P.S.
스킨마다 CSS 값들을 다르게 넣어줘야하는 경우도 있어서 위 소스로 안될 수도 있어요.
해보시고 안되시거나 더 궁금하신 분들은 댓글 남겨주세요. 더 연구해볼께요.
