웹마스터 팁

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

이 게시물을
좋아요
목록
제목 글쓴이 날짜
css를 이용한 페이지 인식 헤이즈디자인 2014.04.23
메인 홈페이지와 서브페이지를 하나의 레이아웃으로 투씨 2014.03.24
[html 초보용] 홈페이지 무작정 따라하기!② [3] file 깻잎사랑=_=v 2003.04.14
[html 초보용] 홈페이지 무작정 따라하기!① [6] file 깻잎사랑=_=v 2003.04.14
노프레임홈페이지 디비기 4 - 쌍벽 [36] file 리디 2003.04.08
노프레임홈페이지 디비기 3 - 경로 [42] file 리디 2003.03.31
쭘's식 홈페이지 만들기 No.2 - 예제 미리보기 포함 [14] file 쭘's 2003.03.30
노프레임홈페이지 디비기 2 - 헤더와 풋터 [57] file 리디 2003.03.26
노프레임홈페이지 디비기 1 - 계층 [16] file 리디 2003.03.25
쭘's 식 쉽게 홈페이지 만들기 [15] file 쭘's 2003.03.17
[Tip]한글 97로 홈페이지 틀 짜기 [8] file Alunar 2002.09.21
노프레임 홈페이지 만들기 강좌:) [53] file Alunar@R. 2002.08.22
페이지 스크롤 - 네개의 레이어를 이용한겁니다 [4] file choice 2002.02.25
해상도에 적응하는 노프레임 홈페이지 제작에 필요한 표와 셀의 관계 [8] file Multi_Taeji 2004.10.13
허접 팁....레이어로 플래시 뺨치는 홈페이지 만들기 -추가- [17] file 남규성 2004.05.05
노프레임 홈페이지에서 상하좌우에 원하지 않는 간격이 생길때... [9] file PHASE 2003.09.08
벅스뮤직 음악을 페이지의 배경 음악으로 깔기 (수정 #1) [31] file 토끼군 2003.08.20
노프레임 홈만들기 (3) - 서브 페이지 만들고 제로보드에 적용하기 [27] file @kihwa 2003.07.26
쭘's식 홈페이지 만들기 No.5 - (미리보기 포함) [18] file 쭘's 2003.07.07
쭘's식 홈페이지 만들기 No.4 - (미리보기 포함) [26] file 쭘's 2003.06.16
태그 쓰기