웹마스터 팁
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>
댓글 0
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
| 페이지 자동 이동 방법 3가지!!! [10] | zero | 2000.03.06 |
| 웹페이지에 마우스 따라다니는 예쁜 시계를 넣자 [5] | gosoo99 | 2008.04.08 |
| 자신의 홈페이지에 (검색,사전,로또,주식) 통합버전을 넣어보자. [3] | Rising.kr | 2008.01.21 |
| 비밀번호 입력해야 해당 페이지 보이기 [3] | 이명우 | 2007.02.28 |
| [동영상강좌] 홈페이지에 BGM을 달아보자 [5] | 서기 | 2007.01.10 |
| 홈페이지의 필수!! 뮤직 플레이어!! [3] | 김민환 | 2006.10.14 |
| 내 홈페이지에 유명사이트 검색엔진을 달자...(네이버,다음,야후 등등) [3] | 트래비스 | 2006.05.10 |
| 홈페이지 하단 링크주소 없에는 소스 [6] | 인테리어뱅크 | 2006.04.10 |
| 홈페이지 하단 링크주소 없에는 소스 2 [4] | 인터니즈 | 2006.04.27 |
| 페이지를 풀창으로 띄우는 방법 [1] | 인테리어뱅크 | 2006.04.11 |
| 홈페이지 TOP 버튼 만들어 보기 [7] | 인테리어뱅크 | 2006.04.10 |
| 새창으로 페이지열기에 대한... [2] | 나만의길 | 2006.01.04 |
| 홈페이지 만드실때 방문자의 해상도가 걱정 되신다면 [5] | 한용 | 2005.11.11 |
| 타켓으로 페이지 이동하는 스크립트 [2] | 로크 | 2005.04.16 |
| 홈페이지index경로 이외의 하위 경로 차단 하는 방법 [펌] [10] | 프란시스 | 2005.02.05 |
| 간단하면서도 강력한 웹페이지에 암호걸기 [5] | 대류 | 2005.02.03 |
| 페이지 경로 히스토리 표시하기 [0003] | EDENe | 2005.01.19 |
| 홈페이지 TOP 버튼 만들기 + 응용 [0001] [2] | EDENe | 2005.01.15 |
| 홈페이지 탑 TOP 버튼 만들어보기 [9] | 편입성공기 | 2004.12.06 |
| 홈페이지를 풀스크린으로 띄우자 - 올플래시로 보이는군요. [21] | Multi_Taeji | 2004.12.10 |