Ji-seong's Tip & Tech

웹 개발자 가이드

실전 웹 표준 가이드 (2005)


본 가이드는 XHTML, CSS, DOM, ECMAScript 등 모든 웹 표준에 대한 이슈를 새롭게 정리하고, 웹 개발 프로젝트에서 표준을 준수하는 방법을 제공하는 가이드 입니다. 목 차 다운로드  PDF 파일 (223p),  PDF 파일(부록 포함, 305pp) - URL: http://www.mozilla.or.kr/docs/web-developer/web-standard-guide-2005.pdf



웹 표준 기반 홈페이지 구축 가이드 (2004)


본 가이드는 브라우저 호환성 유지 방법은 물론 XHTML/CSS 레이아웃을 통한 홈페이지 개발 방법을 소개한 가이드 입니다. 목 차 - 인쇄 버전 :  PDF 파일


Cross Browsing 가이드(2003)


본 가이드는 각 웹 브라우저의 비 표준 기능과 이를 극복할 수 있는 방법을 위주로 작성된 것입니다. 목 차 - 인쇄 버전 :  PDF 파일

뒷북인지도 몰겠지만, 버튼 만들때 보통
<input type="button" onclick="....>

머 이런식으로 하잖아요...
근데 button이란 태그도 있음을 아시는지...
위에거랑 똑같은 기능이지만, 버튼안에 <table> 같은것도 넣을수 있음이 좋음...

예제를 봅시다...
참! 종료태그 잊지 마세요...

<button onclick='void(window.alert("아하하"))' type="button">
<table border=1 width=100>
<tr><td>gjkoisdf</td></tr>
</table>
</button>

<결과>

눌러주세요

글자 위에 조그맣게 주석다는거....
밑에꺼 실행해 보면 바로 알수 있음.

안녕하세요... <ruby>제이름<rt>myname</rt></ruby>은 정지성입니다.

<결과>
안녕하세요... 제이름myname은 정지성입니다.

HTML4, CSS2가 나온 지 이미 많은 시간이 흘렀으며, XHMTL을 통해 더 다양한 확장을 꾀하고 있는 것이 지금의 흐름이다. 그럼에도 불구하고 여전히 낡고 잘못된 방법으로 코딩 하는 경우를 자주 찾아볼 수 있다.

웹 브라우저 윈도우 크기/모양과 상관없이 테이블로 꽉 차게 만들고 싶다면 다음과 같이 코딩 하는 방법을 생각하는 사람이 많이 있을 것이다.

<table width="100%" height="100%">...</table>

HTML 4.0 DTD에서는 TABLE element에서 사용할 수 있는 각종 Attribute 중 height attribute을 찾아볼 수 없다. TABLE element의 height attribute는 Netscape Extension일 뿐이기 때문이다. 다시 이야기하여 HTML 자체에서는 TABLE 세로 크기를 지정하는 방법을 전혀 다루고 있지 않다.

그렇다면 어떻게 TABLE 세로 크기를 지정할 수 있을까? 그 해답은 CSS에서 찾아볼 수 있다.
Block element의 세로 크기를 처리할 수 있도록 HEIGHT Property를 사용할 수 있다.
따라서 위의 예는 다음과 같은 식으로 바꾸어야 올바른 작성 방법이라고 할 수 있다.

<table width="100%" style="height: 100%;">...</table>

줄여서...

<p align="center">...</p> 이러한 코딩도

H1 {text-align: center;}
P.center {text-align: center;}

처럼 CSS에서 지정, 사용하여야 한답니다.

div나 span 등의 태그에 고유ID를 준 후에, 내용을 적당히 묶고 링크에서 아래와 같이 호출합니다.

"내용 1" 부분에는 어떠한 태그라도 사용가능합니다. 또한 div나 span 등으로 묶지 않고 곧바로 table이나 iframe 태그에다가 id를 넣어주셔도 됩니다. ^_^

<a style='cursor:hand' onclick="MyMenu.style.display=''">보이기 1</a>
<div id=MyMenu style='display:none'>내용 1</div>

"내용 1" 부분의 style을 보시면 display:none으로 화면에 안보이게 설정된게 보이시죠?
여기서 "보이기 1" onclick에 이 display값을 공백으로 바꾸게 했으므로 "보이기 1"을 클릭하시면 id가 MyMenu인 부분이 보이게 됩니다.
쉽죠? ^_^
위와 같은 형식이라면 숨겼다가 보여주기는 식은 죽 먹기겠죠.

--------------------------------------------------------------------

그럼 좀더 어렵게 해보죠. 이번에는 쉽게 말해 toggle입니다. 즉, 보이는 상태에서 클릭하면 안보이게 숨겨버리고, 안보이는 상태에서 클릭하면 보여주는거죠.
Javascript의 if~else 구문을 이용하시면 간단하게 구현 가능합니다.

<a style='cursor:hand' onclick="if(MyMenu2.style.display=='none'){MyMenu2.style.display=''}else{MyMenu2.style.display='none'}">보이기 2</a>
<div id=MyMenu2 style='display:none'>내용 2</div>

onclick을 부분을 보시면 if문을 사용해서 MeMenu2 부분의 display 속성값을 체크해서 none이면 공백으로 none이 아니면 다시 none으로 바꿔버리는게 보이시죠? ^_^
이제 toggle이 가능해졌습니다. (예전에 제쯔에 있던 MyMenu 부분이 저런식이었죠 아마?)

--------------------------------------------------------------------

마지막으로 onclick 부분이 너무 지저분해졌으니 이부분을 Javascript 함수로 돌려보도록 합시다.

<script>
function toggleD(obj) {
if (obj.style.display == 'none')
obj.style.display = '';
else
obj.style.display = 'none';
}
</script>

<a style='cursor:hand' onclick=toggleD(MyMenu3);>보이기 3</span>
<div id=MyMenu3 style='display:none'>내용 3</div>

두번째 방법에서의 onclick에 있던 if~else가 그대로 함수化 되었으며, 차이점이라면 obj라는 변수를 넘겨야한다는 것입니다.
따라서 onclick=toggleD(MyMenu3) 이렇게 잡아주시면 MyMenu3가 위의 함수의 obj값으로 넘어가게 되어 if~else문으로 MyMenu3의 display의 값을 체크해서 토글시키게 되는거죠.

활용범위가 매우 넓은 것이니 꼭 익혀두도록 합시; 쿨럭;

--------------------------------------------------------------------

꼬랑지 1.
id=MyMenu1 이런 id값은 해당 페이지에 반드시 한개만 존재해야합니다. 해당 id를 가진 태그가 없거나, 같은 id를 가진 태그가 여러개라면 에러가 납니다.

꼬랑지 2.
display라는 CSS Attribute를 visibility로 바꾸셔도 마찬가지로 보였다 안보였다하게 할 수 있습니다. display의 none에 대응하는 visibilty의 값은 hidden입니다. 반대는 visible이구요.
display와 visibility의 차이점이라면,
display는 none인 상태에서는 화면을 잡아먹지 않습니다. visibility는 hidden인 상태에서도 화면을 잡아먹습니다.
즉, visibility를 hidden으로 해놓더라도 화면상에는 안보이는 부분이 차지하는 공백이 그대로 나타난다는거죠 ^_^