웹표준으로 대략 만들어 봤습니다.^^ > 자유게시판

자유게시판

웹표준으로 대략 만들어 봤습니다.^^ 정보

웹표준으로 대략 만들어 봤습니다.^^

본문

http://reny.realmind.net/bbs/bbs1/

웹표준이 아닌곳좀 찝어 주세요^^
위 홈페이지는 한국어 사이트로 만들거구요
http://reny.realmind.net/bbs/bbs2/
여기는 데이터 연동해서 영어 사이트로 ^^
추천
0
  • 복사

댓글 16개

terrorboys님, ul과 li 를 쓰면 상단 메뉴 소스를 아주 간편하게 바꿀 수 있거든요
실례되겠지만, 제가 한번 바꿔봐서 올려봣습니다 ^^;
한번 제 소스를 보고 공부해보세요
(참고로 제 홈페이지 상단 메뉴소스와 비슷비슷합니다 ^^;)


<style type="text/css">
* { padding:0; margin:0; }
img { border:0; }
ul { list-style:none}

#HTML_HEAD { width:980px; }
#top_menu li {
float:left;
text-align:left;
}
#top_menu a {
font:12px gulim #fff bold;
}
.search {
border: rgb(204,204,204) 1px solid;
background: url(http://dmbuser.com/search/images/sc_bg.gif);
WIDTH: 190px;
HEIGHT: 19px;
margin-right:4px;
}
#submenu li {
text-align:left;
padding-left:255px;
font:11px #000 gulim;
}
</style>


<div id="top_menu">
 <ul style="background: url(./img/bar1.gif) repeat-x; width:980px; height:35px;">
<li>
<a href="./" onmouseover="submenu_viewer('null', 'hide');">메인</a>&nbsp;|&nbsp;
<a href="#" onmouseover="submenu_viewer('submenu_1', 'view');">소개</a>&nbsp;|&nbsp;
<a href="#" onmouseover="submenu_viewer('submenu_2', 'view');">홈페이지</a>&nbsp;|&nbsp;
<a href="#" onmouseover="submenu_viewer('submenu_3', 'view');">HTML</a>&nbsp;|&nbsp;
<a href="#" onmouseover="submenu_viewer('submenu_4', 'view');">포트폴리오</a>&nbsp;|&nbsp;
<a href="#" onmouseover="submenu_viewer('submenu_5', 'view');">無</a>
</li>
<li style="float:right;text-align:right;">
<form name="fsearchbox" method="get" action="javascript:fsearchbox_submit(document.fsearchbox);">
<input type="hidden" name="sfl" value="wr_subject">
<input type="hidden" name="sop" value="and">
<input name="stx" class="search" onblur="this.style.background='#ffffff'" onfocus="this.style.background='#ffffff'" size="20" maxlength="20">
<input type="image" src="./img/scin.gif" width="47" height="21" border="0">
</li>
</ul>
</div>

<div id="submenu">
<ul style="background: url(./img/bar2.gif) repeat-x; width:980px; height:38px;">
<li id="submenu_1">
<a href=#>wegnosis란?</a> |
<a href=#>운영자 소개</a>
</li>
<li id="submenu_2">
홈페이지를 만드는법이 상세 기록되어있다.
</li>
<li id="submenu_3">
기초 html이 있다.
</li>
<li id="submenu_4">
운영자가 끄적거린 작품이 들어 있다.
</li>
<li id="submenu_5">
그냥있다.
</li>
</ul>
</div>
http://www.mozilla.or.kr/ko/docs/web-developer/standard/

여기 가셔서 PDF 파일로 다운받으셔서 참고해보세요
실전 웹표준가이드인데, 제가 처음 웹2.0 레이아웃 공부중일 때 효과적으로 배운 책입니다 ^^
이것만 잘 보시면 어떻게 하는지 짐작 가실거에요 ㅎ
토탈나라닷컴님 말씀처럼... 웹표준이라고 하기엔...;;

간단하게 메인메뉴 부분만 살펴봐도... 테이블로 작성되어 있네요
플래시로 구현하시는 것이 아니라면
리스트(ul, ol, li)를 사용하시는게 맞지 싶은데요~^^

파폭에서 스타일 모두 없앤 화면을 한번 확인해보시길~~;;

------------------------------------------------------------->
헉~;; 글 적는 중에 위에 벌써 수정한 소스를 적어주셨네요~
저의 서브메뉴 그 자바스크립트 이용하셔서 쉽게 수정할 수 있었지요 .. ^^;
솔직히 말하자면 방식이 비슷비슷한...;
아 지금 보니까 IE6과 파이어폭스에서 보는게 다르군요...

먼저 파이어폭스에서는 문제없이 표현됩니다만..
IE6에선 메인메뉴 글씨들이 엄청 커졌군요..;;

그래도 ul, li 를 사용하시고, min-width, min-height는 아직 쓰시는걸 비추드립니다
(여전히 저와같은 IE6 유저들도 남아서요.. IE6에선 min이 안먹히더라구요;)
© SIRSOFT
현재 페이지 제일 처음으로