블로그.지오닷컴
웹표준 - <ul>과 <li>로 네비에이션바 만들기 본문
갑자기 웹표준이라는 게 유명해 졌습니다. 그리고 저는 웹표준을 따르며 코딩하는 방식, 즉 실제 소스가 궁금했습니다. 그런데 검색엔진이라는 놈은, 웹표준으로 검색을 하니 제가 궁금해하는 것이 아닌 것만 알려주었습니다. 그리하여 웹표준에 대한 개념은 네이년이나 다움에서 배우시고 저는 실제 소스를 보여드리겠습니다.
준비물은 html과 css에 대한 지식과 연습용 파일 2개 입니다. 하나는 index.htm 이고 다른 하나는 index.css 입니다. 이 두 파일을 가지고 컨텐츠와 디자인이 분리된 페이지를 하나 만들어보겠습니다.
index.htm - 컨텐츠 부분
index.css - 디자인 부분
위의 소스 대로 만들면 아래와 같은 꼴이 됩니다. works 메뉴 위에 마우스를 올리면 해당 메뉴의 색상이 바뀌고 그 상단에는 4px 두께의 녹색 선이 보이는 네비게이션 메뉴 입니다.
이게 기본 입니다. 웹표준은 이런 식으로 컨텐츠 부분과 디자인 부분을 분리하여, 다양한 웹브라우저(익스, 파복, 크롬은 물론 시각 장애인용까지)에서도 쉽게 컨텐츠를 확인할 수 있게 하는 코딩 방식 입니다. 물론, 검색엔진도 좋아해서 검색을 통한 방문자 수를 높이는 효과도 가져옵니다. (이건 좀 부수적인 효과지요?)
다음에는 더 재미난 강의로 달려오겠습니다. 질문을 하기 전에 검색의 생활화! :)
준비물은 html과 css에 대한 지식과 연습용 파일 2개 입니다. 하나는 index.htm 이고 다른 하나는 index.css 입니다. 이 두 파일을 가지고 컨텐츠와 디자인이 분리된 페이지를 하나 만들어보겠습니다.
index.htm - 컨텐츠 부분
<html>
<head>
<title>Creative Playground, CHuBe ('_;)///</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<link href="index.css" rel="StyleSheet" type="text/css">
</head>
<body>
<ul id="chube_top_menu">
<li><a href="#">news</a></li>
<li><a href="#">works</a></li>
<li><a href="#">info</a></li>
</ul>
</body>
</html>
<head>
<title>Creative Playground, CHuBe ('_;)///</title>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr">
<link href="index.css" rel="StyleSheet" type="text/css">
</head>
<body>
<ul id="chube_top_menu">
<li><a href="#">news</a></li>
<li><a href="#">works</a></li>
<li><a href="#">info</a></li>
</ul>
</body>
</html>
index.css - 디자인 부분
#chube_top_menu { margin:0px; padding:10px 0px 20px 10px; border-bottom:1px solid #ccc; }
#chube_top_menu li { margin:0px; padding:0px; display:inline; list-style-type:none; }
#chube_top_menu a { float:left; font:bold 9px/12px Tahoma, 돋움; margin:0px 10px 4px 10px; text-decoration:none; color:#444; }
#chube_top_menu a:hover { margin:-10px 10px 4px 10px; color:#690; padding:6px 0px 0px 0px; border-top:4px solid #690; }
#chube_top_menu li { margin:0px; padding:0px; display:inline; list-style-type:none; }
#chube_top_menu a { float:left; font:bold 9px/12px Tahoma, 돋움; margin:0px 10px 4px 10px; text-decoration:none; color:#444; }
#chube_top_menu a:hover { margin:-10px 10px 4px 10px; color:#690; padding:6px 0px 0px 0px; border-top:4px solid #690; }
위의 소스 대로 만들면 아래와 같은 꼴이 됩니다. works 메뉴 위에 마우스를 올리면 해당 메뉴의 색상이 바뀌고 그 상단에는 4px 두께의 녹색 선이 보이는 네비게이션 메뉴 입니다.
이게 기본 입니다. 웹표준은 이런 식으로 컨텐츠 부분과 디자인 부분을 분리하여, 다양한 웹브라우저(익스, 파복, 크롬은 물론 시각 장애인용까지)에서도 쉽게 컨텐츠를 확인할 수 있게 하는 코딩 방식 입니다. 물론, 검색엔진도 좋아해서 검색을 통한 방문자 수를 높이는 효과도 가져옵니다. (이건 좀 부수적인 효과지요?)
다음에는 더 재미난 강의로 달려오겠습니다. 질문을 하기 전에 검색의 생활화! :)
반응형
'노하우 > 웹서비스 개발' 카테고리의 다른 글
| XE 레이아웃 편집할 때 php 함수 바로 사용하기 (0) | 2010.11.25 |
|---|---|
| DB에서 서로 다른 테이블의 데이터를 한번에 불러오기 (0) | 2010.11.11 |
| 화면 사이즈에 따라 다른 사이트로 접속하기 (0) | 2010.11.02 |
| 가볍고 빠른 윈도우7, 글자(한글)가 깨져 보일 때 이렇게 하세요! (3) | 2009.10.28 |
| 리눅스서버 주요 명령어 및 주요 경로, vi 주요 명령어 (0) | 2009.02.13 |
'노하우/웹서비스 개발' Related Articles
more
Comments