웹표준으로 대략 만들어 봤습니다.^^ 정보
웹표준으로 대략 만들어 봤습니다.^^본문
http://reny.realmind.net/bbs/bbs1/
웹표준이 아닌곳좀 찝어 주세요^^
위 홈페이지는 한국어 사이트로 만들거구요
http://reny.realmind.net/bbs/bbs2/
여기는 데이터 연동해서 영어 사이트로 ^^
웹표준이 아닌곳좀 찝어 주세요^^
위 홈페이지는 한국어 사이트로 만들거구요
http://reny.realmind.net/bbs/bbs2/
여기는 데이터 연동해서 영어 사이트로 ^^
댓글 전체
먼저 말씀드리자면... 메인메뉴가 깨지는군요...;
IE6, 1024 해상도에서 봣습니다
IE6, 1024 해상도에서 봣습니다
감사합니다.^^
잠시 수정하다가 깨졌습니다. ㅎ.ㅎ;;
잠시 수정하다가 깨졌습니다. ㅎ.ㅎ;;
웹표준이라고 하기엔....
웹표준으로 기제된 소스를 넘어가지 않게 최대한 써봤습니다.^^
컼 표준화 검사 했더니...
120 Errors, 5 warning(s)
후덜덜...
120 Errors, 5 warning(s)
후덜덜...
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> |
<a href="#" onmouseover="submenu_viewer('submenu_1', 'view');">소개</a> |
<a href="#" onmouseover="submenu_viewer('submenu_2', 'view');">홈페이지</a> |
<a href="#" onmouseover="submenu_viewer('submenu_3', 'view');">HTML</a> |
<a href="#" onmouseover="submenu_viewer('submenu_4', 'view');">포트폴리오</a> |
<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>
실례되겠지만, 제가 한번 바꿔봐서 올려봣습니다 ^^;
한번 제 소스를 보고 공부해보세요
(참고로 제 홈페이지 상단 메뉴소스와 비슷비슷합니다 ^^;)
<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> |
<a href="#" onmouseover="submenu_viewer('submenu_1', 'view');">소개</a> |
<a href="#" onmouseover="submenu_viewer('submenu_2', 'view');">홈페이지</a> |
<a href="#" onmouseover="submenu_viewer('submenu_3', 'view');">HTML</a> |
<a href="#" onmouseover="submenu_viewer('submenu_4', 'view');">포트폴리오</a> |
<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 레이아웃 공부중일 때 효과적으로 배운 책입니다 ^^
이것만 잘 보시면 어떻게 하는지 짐작 가실거에요 ㅎ
여기 가셔서 PDF 파일로 다운받으셔서 참고해보세요
실전 웹표준가이드인데, 제가 처음 웹2.0 레이아웃 공부중일 때 효과적으로 배운 책입니다 ^^
이것만 잘 보시면 어떻게 하는지 짐작 가실거에요 ㅎ
토탈나라닷컴님 말씀처럼... 웹표준이라고 하기엔...;;
간단하게 메인메뉴 부분만 살펴봐도... 테이블로 작성되어 있네요
플래시로 구현하시는 것이 아니라면
리스트(ul, ol, li)를 사용하시는게 맞지 싶은데요~^^
파폭에서 스타일 모두 없앤 화면을 한번 확인해보시길~~;;
------------------------------------------------------------->
헉~;; 글 적는 중에 위에 벌써 수정한 소스를 적어주셨네요~
간단하게 메인메뉴 부분만 살펴봐도... 테이블로 작성되어 있네요
플래시로 구현하시는 것이 아니라면
리스트(ul, ol, li)를 사용하시는게 맞지 싶은데요~^^
파폭에서 스타일 모두 없앤 화면을 한번 확인해보시길~~;;
------------------------------------------------------------->
헉~;; 글 적는 중에 위에 벌써 수정한 소스를 적어주셨네요~
저의 서브메뉴 그 자바스크립트 이용하셔서 쉽게 수정할 수 있었지요 .. ^^;
솔직히 말하자면 방식이 비슷비슷한...;
솔직히 말하자면 방식이 비슷비슷한...;
ㅎ.ㅎ; 바꿔 보겠습니다.^^
아 지금 보니까 IE6과 파이어폭스에서 보는게 다르군요...
먼저 파이어폭스에서는 문제없이 표현됩니다만..
IE6에선 메인메뉴 글씨들이 엄청 커졌군요..;;
그래도 ul, li 를 사용하시고, min-width, min-height는 아직 쓰시는걸 비추드립니다
(여전히 저와같은 IE6 유저들도 남아서요.. IE6에선 min이 안먹히더라구요;)
먼저 파이어폭스에서는 문제없이 표현됩니다만..
IE6에선 메인메뉴 글씨들이 엄청 커졌군요..;;
그래도 ul, li 를 사용하시고, min-width, min-height는 아직 쓰시는걸 비추드립니다
(여전히 저와같은 IE6 유저들도 남아서요.. IE6에선 min이 안먹히더라구요;)
메이저급 검색엔진 스타일시트 끄고 한번 봐보세요~~
ㅎㅎ웹표준... -> http://www.hazynights.com
우선 dtd설정부터;