웹마스터 팁
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
| 제목 | 글쓴이 | 날짜 |
|---|---|---|
방문자수 (카운터) 마음대로 조작하기
[37]
 | Br_7941 | 2008.08.23 |
| [게시판] 이미존재하는 모듈이름 입니다. 오류. [2] | 나이스가이212 | 2008.08.21 |
|
로그인 문제 및 첨부파일 안올라가는 문제 해결책(세션 문제일 경우..)
[6]
| 이홍석295 | 2008.08.20 |
| 한글로 된 이미지 문제 [17] | Defy | 2008.08.19 |
| [초보팁] 우리말 수정하기(예제: 가입창 이름란 삭제) [3] | 블루파티 | 2008.08.19 |
|
인용구 접기기능 링크이름 Underline 없애기
[4]
| 똑디 | 2008.08.19 |
|
zbxe에 bgm을 설치하자
[11]
| 우리아기 | 2008.08.16 |
|
이미지 좌측 정렬시 내용이 적으면 아래부분 올라오는 문제 해결법
[2]
| 대류 | 2008.08.16 |
| 미국 yahoo zbxe 설치 및 mysql 연결 [4] | mr007 | 2008.08.15 |
| zbxe에서 piclens 사용하기 [2] | 우정진 | 2008.08.15 |
| 권한 문제 때문에 생길 수 있는 문제 해결 방안 | 꽃들 | 2008.08.14 |
| rewrite mod 사용 않될 경우 해결 방법 1가지 | 블루스카이77 | 2008.08.13 |
|
렙업시 소속그룹 없어지는 문제! 얍실하게 해결.. 쿨럭.
[2]
| 이슈카ㆀ | 2008.08.12 |
|
댓글 첨부파일부분 닫기/열기 추가
[1]
| Gnee | 2008.08.09 |
| 오픈 아이디(OpenID)로만 로그인 허용하기 [7] | withover.com | 2008.08.07 |
| 설치시 초기화면으로 돌아가는 현상 해결 [1] | spk | 2008.08.07 |
| 닉네임, 이름 정보변경 못하게 하기. [6] | 부엉이 | 2008.08.06 |
| 첨부화일 등록시 사라지는 현상 [2] | 0라이트0 | 2008.08.05 |
| TRAC과 SVN을 참조하여 1.0.5의 애드온 설정 버그 해결하기 | Adios | 2008.08.04 |
| 제로보드 문자열 정교하게 자르기 [11] | 젝망치 | 2008.08.03 |