웹마스터 팁

  2. Support
  3. 웹마스터 팁

css를 이용한 페이지 인식

2014.04.23 14:58

헤이즈디자인

메뉴에서 페이지 인식 하는 방법은 몇가지가 있지만 이번 소개하는 페이지는 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 설정에 관련된 부분은 이 곳 게시판에 잘 정리 되어 있기 때문에 관련 소스를 참조해 주세요 ^^

이 게시물을
좋아요
목록
제목 글쓴이 날짜
홈페이지에 국경일이면 태극기 다는법이에요~ ^^ [11] [1] file jaehee_91 2008.03.01
양력/음력DB 홈페이지에 사용하기 [2] 감뿌리 2008.03.29
플래시로 페이지에 랜덤 이미지 돌리기 [3] ☜ TeRy ☞ 2008.04.04
외부페이지에서 매개변수 사용하기 [2] JnCsoft 2008.04.07
404 에러 페이지를 만들어 보자 [2] hangoon 2008.04.11
각 페이지에 쓸 수 있는 변수명들 찾기 [6] lainfox 2008.04.29
홈페이지에 이미지블릿 대신 특수문자로 표현해 보기 file 팔공산 2008.04.29
rewrite mod 사용시 404 페이지 에러 해결 방법 이종준 2008.05.09
홈페이지에 닉네임 대신 실명으로 뜨게 만들기 [5] file findwind 2008.05.19
외부페이지 접근을 제로보드XE를 통해서만 접근을 허용 하고 싶다면 [9] 임기택924 2008.06.03
1.0.3버전 외부 페이지 쿼리 스트링 붙일때 주의 하세요. 그라미 2008.06.03
페이지 숫자에 네이버처럼 사각테두리 씌우기 [8] file 탑심 2008.06.15
페이지 작성이나 수정후 적용이 안돼서 고생하는 많은 분들을 위하여 [1] cyric 2008.06.17
아이프레임속 링크를 기존페이지에서 이동하기 [1] file 정다운804 2008.06.19
[팁]페이지별 댓글 출력 초간단 팁.. [4] 키티나 2008.07.04
한 페이지(화면)에 두개(2개)의 모듈(게시판 등)을 넣는 법 [6] 황건순 2008.08.25
밑에 페이지 네비게이션 수정 (다음10개, 이전10개등으로) [6] file Clanss 2008.08.29
각 리스트형 위젯에 페이지 기능을 달자. [10] 라르게덴 2008.09.02
[우클릭 및 드레그 방지법] 및 [방지된 홈페이지 해재법] >0< [7] 이홍석295 2008.09.03
동일서버내 페이지에서 로그인정보 활용하기... [4] 수로 2008.09.06
태그 쓰기