웹마스터 팁

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

이 게시물을
좋아요
목록
제목 글쓴이 날짜
회원 순위 공동순위 표시해서 뽑기(원리만 소개) 라르게덴 2009.02.13
주민등록번호 입력 폼 추가 (1.1.5 기준) [39] 개돌 2009.02.16
TortoiseSVN에서 특정 리비전 영역만 추출하기 [1] ◀CGlink▶ 2009.02.19
IIS에서 XE 설치 시 FTP 정보 등록에서 오류 조치 [4] impre 2009.02.20
플래너 최근문서(위젯)에 카테고리색 적용, Dday 적용, 지난 일정 출력 여부 조절 [7] file 주상태 2009.02.21
20메가 업로드 용량제한에 대한 이야기 ^^ [9] 만쓰별(정만) 2009.02.22
textarea 에디터를 사용하는 리플에서 태그 막기 [2] file 老姜君 2009.02.22
확장변수전용 권한설정 게시판스킨 미권한자에게 출력 (''깜박''오류?) 보고 file 0su 2009.02.25
테스트용 아이디 탈퇴 막기 [1] SMaker 2009.02.26
lighttpd 에서 XE rewrite 기능 (.htaccess) 사용하기 [2] msl2246 2009.02.28
첨부파일의 외부 무단 링크 차단하기(XE) 게시판설정 [7] file 왕초보왕따 2009.03.02
윈도우, 리눅스, 맥서버에서 이슈트래커 동작가능하게 하기 [1] file 뽀여니 2009.03.02
2003 + RWAPM + faceOff + IE7 = rewrite mod 에러 neotec 2009.03.03
Smarty 한글 메뉴얼 공개합니다. [1] 미니미 2009.03.04
이슈 트래커 소유자 변경 시 그룹별 선택 기능 file 개돌 2009.03.05
사진이 떳다 사라지는 문제 해결법 [2] 현진 2009.03.07
게시판 가로사이즈 줄이기....[초보만 클릭] [4] 유팔복 2009.03.07
svn 업으로 xe 최신본 유지하기 [2] file e~세상쉼터 2009.03.08
Faceoff 버젼에서 확장변수 마음대로 배치하기 ^^ 파파민 2009.03.13
게시물 가운데 정렬 문제 임시해결법 한신일 2009.03.15
태그 쓰기