웹마스터 팁

  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 설정에 관련된 부분은 이 곳 게시판에 잘 정리 되어 있기 때문에 관련 소스를 참조해 주세요 ^^

이 게시물을
좋아요
목록
제목 글쓴이 날짜
bgm 넣을려고 프레임 나눴을때 가로스크롤바 해결방법. [12] 또리♡485 2008.01.25
회원그룹별 제한된 서비스 구현을 위한 조건문 [5] 똑디 2008.01.25
(모든)*.파일 UTF_8 ↔ EUC-KR [4] file Capyou 2008.01.25
불펌소스 ~! [6] 해피데이1541 2008.01.28
홈페이지에 예쁜 날씨 배너를 달아보자!!!! [3] file blue7376.myid.net 2008.01.28
[수정] webzine 스타일을 이용한 링크게시판 만들기 [5] file 대암지기 2008.01.28
좌측 로그인 회원 리스트가 많아지면 스크롤 처리 [6] file 똑디 2008.01.29
날씨배너 600종류 입니다.(지역별75종X색상별8종) file 푸른커튼 2008.01.30
LI UL OL 이 페이지에서 적용이 안될경우 [1] 찐빵아저씨 2008.01.30
flash <=> xe menu 연동 [7] tsana 2008.02.03
BGM 등을 배경을 투명하게 iframe 으로 넣는 팁 [3] 푸른커튼 2008.02.05
왼쪽메뉴줄이고 오른쪽에 박스만들어 내용쉽게넣기 [15] file plruto 2008.02.07
주소끝에 /zbxe 안적어도 홈페이지에 바로 들어오게 하는법?? [10] 박태훈922 2008.02.07
아날로그 플래시 시계 10종류 (홈페이지, 블로그용) file 푸른커튼 2008.02.09
로그인후 보여줄 페이지 설정 [4] 권인해 2008.02.11
회원가입 생일 필수로 입력받고, 관리자페이지 회원목록에 회원생일 출력하기 [10] 대암지기 2008.02.11
제로보드용 플래시시계 위젯 설치방법 file 푸른커튼 2008.02.12
전에 누군가 찾았던 것인데..새로고침시 현재페이지로 [2] 강영곤 2008.02.14
인사말 랜덤추출 스크립트 [xe적용방법] [12] 라싸 2008.02.18
[전면수정]회원가입시 기본 정보공개 여부 체크하기(1) 모듈부분 [5] 대암지기 2008.02.20
태그 쓰기