웹마스터 팁

메뉴에서 페이지 인식 하는 방법은 몇가지가 있지만 이번 소개하는 페이지는 css를 사용해서 페이지를 인식하는 방법입니다.


메뉴의 수에 따라 페이지 수도 늘어 나지만 이번 예제에서는 3개의 페이지를 만들어 사용해 보겠습니다.


sample1.html, sample2.html, sample3.html 이렇게 총 3개의 페이지를 만듭니다.



공통 css에 들어갈 부분입니다.(style.css 로 파일명을 지정 하겠습니다.)


>> 페이지 인식을 위한 부분 - 메뉴별로 페이지 인식을 가능하게 하는 css 소스입니다.


#sample1 #menu_example a.menu1, #sample2 #menu_example a.menu2, #sample3 #menu_example a.menu3{

padding-bottom:10px; /* 여백은 레이아웃에 따라 적절하게 설정해 주세요 */

border-bottom:5px solid #ff3300;/* 레이아웃에 따라 적절하게 설정해 주세요 */

color:#FFF; 

}



>> 메뉴 스타일은 자신의 디자인에 맞게 설정해 주시면 됩니다.


#menu_example{

padding:20px;

}

#menu_example a{

display:block; /* a태그의 display속성을 block으로 설정 */

padding:10px 10px 15px 10px; 

margin-right:1px; 

background-color:#292929;

color:#BBB; 

font:12px Verdana; 

       float:left;

}

#menu_example a:hover{

padding-bottom:10px;

border-bottom:5px solid #ff9900;

color:#FFF; 

}

------- 여기까지가 style.css 파일에 들어갈 부분입니다.-------------



다음으로 각 sample 페이지에 입력해야할 소스입니다.

예로 sample1.html 페이지를 들어보겠습니다.


<html>

<head>

<link rel="stylesheet" media="screen" href="style.css" type="text/css" />

</head>

<body id="sample1"> <!-- sample2.html 파일일 경우 id="sample2"   와 같이 각각의 페이지에 body id를 맞게 지정해 줍니다.-->


<div id="menu_example">

  <a href="sample1.html" title="메뉴1로 이동" class="menu1">menu 1</a>

  <a href="sample2.html" title="메뉴2로 이동" class="menu2">menu 2</a>

  <a href="sample3.html" title="메뉴3로 이동" class="menu3">menu 3</a>

</div><!--//menu-->


</body>

</html>


이외의 css 설정에 관련된 부분은 이 곳 게시판에 잘 정리 되어 있기 때문에 관련 소스를 참조해 주세요 ^^

제목 글쓴이 날짜
XE 알림센터&새글알림애드온 위치 조정하는 법 [2] XE힘들당휴 2014.05.04
[140404] ISPconfig 호스팅 관리 패널 Luatic™ 2012.06.24
게시판 글쓰기 폼은 없이 확장변수만 표시할 수 있는 게시판 만들기 (for sketchbook5 최신버전 기준) [2] 큰성565 2014.05.02
사용 언어별로 다른 내용 출력하기 [5] elancer 2014.05.01
에디터로 글 작성시 폰트 크기가 12px로 변경되는 현상 해결방법 [7] file jambox 2013.12.31
갑자기 사이트 세팅을하던도중 DB line 674 에러 대처법 xe공부중44 2014.05.01
*LI-NA님의 큰 선물* SKETCHBOOK5 (최신버전)에서 특정 확장변수를 추천하는 사람에게만 공개하도록 하는 방법 [4] file 큰성565 2014.04.30
폰갭 제작시 자바스크립트로 get 변수 전달 받기 웹빌드 2014.04.30
[주옥시리즈]닉네임/이메일 변경 금지 팁 [10] socialskyo 2013.08.10
CentOS 6.5 rrdtool 사용하는 Collectd 설치 lililiillililiil 2014.04.29
CentOS 6.5 MRTG 설치 lililiillililiil 2014.04.29
PHP 5.4 대응 코딩(1) - stdClass YJSoft 2014.04.29
카메론님의 슬라이더 시리즈와 웹콘님의 최근게시물 시리즈가 라이브러리 충돌하는경우 [1] XE힘들당휴 2014.04.29
포인트복권 팝업창 말고 현재창에서 바로 사용하기! [1] 바가G 2014.04.28
우분투 12.04 LTS Nginx 최신버전 설치하기 [1] file 도라미 2014.02.17
도움안될 것 같은 람보의 주옥같은 팁1 (스케치북 스킨에서 ctrl+enter키로 댓글작성 완료하기) [5] BJ람보 2014.04.26
데이터 이전 후 list_order 조정 [1] wooildang 2013.04.07
회원가입폼 비밀번호 찾기 질문/답변 삭제및 필수항목 선택 (송동우님 팁) [8] 때린데 또때려 2012.04.09
css를 이용한 페이지 인식 헤이즈디자인 2014.04.23
Windows Server 에서 세션 최적화 StyleRoot 2014.04.20