웹마스터 팁

  2. Support
  3. 웹마스터 팁

웹문서 작성 팁!!!

2002.12.21 12:58

공돌이

1.점선 테이블 만들기 - 간단히 태그만으로

<fieldset style="line-height:15pt; padding:20; border-width:2; border-style:dotted; width:200; height:70; border-color: BE8D5E;">

<!-- 원하시는 내용을 넣어주세요 -->

</fieldset>


간단하죠?  

2라는 숫자는 점선테이블의 두께를 정합니다

boder-style:dotted 는 선의 종류를 점선으로 하라는 명령이죠

끝부분에 빨간색으로 되어있는 부분으로 테이블의 색깔을 조절할 수 있습니다



2.테이블 깔끔하게 만들기

테이블선을 가늘 게 만드는 것입니다

<table cellspacing="0" bordercolordark="white" bordercolorlight="black">

간단하죠? <table>태그 안에 저렇게 속성을 지정해 주면 됩니다

자세히 보면 테이블은 세 개의 색깔로 구성되어 있습니다

그것들 각각의 색깔을 배경색과 똑같이 지정해 줌으로써 가는 선의 모양이 나오게 되는 것입니다

흰색 배경이 아닌 다른 색깔의 페이지에 테이블을 사용하시려면 white부분을 배경색과 똑같이 바꾸어 주어야 합니다


3.주소창에 아이콘을 넣는 방법에 대해서 알아보도록 하겠습니다

Microangero 같은 아이콘 제작 프로그램을 이용하거나

포토샵, 페인트샵 같은 그래픽 프로그램을 이용해서

16x16 픽셀 크기의 아이콘을 만듭니다

>>그래픽 프로그램의 경우

저장할 때는 Save As로 가셔서 *.bmp 라는 확장자로 지정한후  *.ico 이라는 확장자로 저장합니다

>>아이콘 제작 프로그램의 경우

Microangero 같은 프로그램은 아이콘을 만들어 주는 프로그램이므로 저장할 때 ico이라는 확장자를 선택해서 저장하면 됩니다
아이콘이 다 만들어 졌다면 HTML문서에서 불러와야 합니다

<head>와 </head>부분에 넣어줍니다
<LINK REL="SHORTCUT ICON" href="ICO 파일이름">  

아이콘 파일 이름을 favicon.ico로 하면 서버의 루트에 복사만해놓아도 자동으로 인식합니다



4.테이블에 마우스오버시 효과주기

셀단위로 색바꾸기
<td onmouseover="this.style.backgroundColor='#FFBCBC'"
onmouseout="this.style.backgroundColor=''">




5 홈에 테두리 넣기...


프레임으로 나뉘어져 있어도 넣을수 있습니다...
프레임으로 나뉘어져 있다면 넣고 싶은 html문서의 소스를 넣으면 됩니다

<head></head>사이에 아래 소스를 넣으세요......
<style type="text/css">
<!--body {border-color: #F79117; border-style: solid; border-top-width: 1; border-right-width:1; border-bottom-width: 1; border-left-width:1;}-->
</style>

#F79117 : 테두리의 색상을 나타냅니다....
border-top-width:1  -->위쪽
border-right-width:1 -->오른쪽
border-bottom-width:1-->아래
border-left-width:1 -->왼쪽



6.iframe  문서 자동으로 리사이즈 하기

<script>

// 만든넘 : 행복한고니(MAIL : gonom9@empal.com, MSN : gonom9@hotmail.com)

function resizeFrame(name){
var oBody = document.body;
var oFrame = parent.document.all(name);
var min_height = 320; //iframe의 최소높이(너무 작아지는 걸 막기위함, 픽셀단위, 편집가능)
var min_width = 465; //iframe의 최소너비
var i_height = oBody.scrollHeight + (oBody.offsetHeight-oBody.clientHeight);
var i_width = oBody.scrollWidth + (oBody.offsetWidth-oBody.clientWidth);

if(i_height < min_height) i_height = min_height;
if(i_width < min_width) i_width = min_width;
oFrame.style.height = i_height;
oFrame.style.width = i_width;
}


</script>
위 함수를 삽입하고, 문서 제일 아래쪽에

<script>

var oldFn = "";
if(window.onload != null){
oldFn = new String(window.onload); //window.onload의 함수를 문자열로 받는다
oldFn = oldFn.substring(22,oldFn.length-2);
}
window.onload = new Function("resizeFrame(FRAMEID);" + oldFn); //새함수와 기존의 함수를 추가해서 onload이벤트에 할당
</script>

를 삽입해주세요. 가끔씩 body에 onLoad 이벤트를 쓰시는 분들이 있는데 그 분들을 위한 함수입니다.

사용하실땐 iframe에 id와 name 속성을 같은 이름으로 할당하셔야 합니다.

예)
<iframe id=innerFrame name=innerFrame></iframe>

<script>
...(생략)
window.onload = newFunction("resizeFrame('innerFrame');" + oldFn);
</script>

다시한번 말씀드리는데 iframe의 내용이 되는 문서에 삽입해주셔야 합니다. (IE전용)



이상 웹문서 작성시 유용한 팁을 올렸습니다..
웹상에서 필요한 팁들입니다. 제가 많이 사용하는 방법이걸랑요...
참 그리고 출처 워낙 오래 되어서 모든걸 밝히진 못하겠네요...
아시는분도 많으시겠지만 필요하신분이 있을것 같아서...^^
* DeX™님에 의해서 게시물 이동되었습니다 (2002-12-22 01:13)
이 게시물을
수정 삭제
좋아요
목록
태그 쓰기