웹표준으로 대략 만들어 봤습니다.^^ > 십년전오늘

십년전오늘

10년전 추억의 책장을 넘기며

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

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

본문

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

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

댓글 전체

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이 안먹히더라구요;)
전체 130,530
십년전오늘 내용 검색

회원로그인

진행중 포인트경매

  1. 참여1 회 시작24.04.25 20:23 종료24.05.02 20:23
  2. 참여80 회 시작24.04.19 15:40 종료24.04.26 15:40
(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT