웹마스터 팁
나만의 미니홈 만들기 ㅡ 메모장 디자인 (html 소스)
2005.05.12 19:18
오늘은 메인에 들어갈 메모장의 디자인을 해 보겠습니다
게시판은 그런대로 만드신 분이라면 메모장은 아주 쉽게 만들수 있을것입니다
메모장과 게시판의 차이는 글쓰기란과 함께 목록이 보여진다는 점입니다
물론 방명록도 같은 원리이구요
게시판은 목록에 제목이 들어가지만 메모장과 방명록은 제목 대신 그 글의 본문을 뽑아온다는 점만
다릅니다
구성은 비외원일 경우 글을 쓸때 아이디와 비번을 물을수 있도록 아이디와 비번 쓰는 란이 있어야 하며
글을 쓸수 있는 란이 있어야겠죠
그 밑으로는 게시판 마냥 while문으로 돌려서 해당 게시판의 주인의 글만 뽑아오면 됩니다
저번에도 쓴듯 한데 게시판을 만드시면서 디자인 상 유의할 점은 게시판의 넓이를 되도록이면
%로 지정해서 해주는게 제일 좋습니다
게시판의 넓이가 고정되어 있으면 자체만으로 쓸때는 괜챦지만 아이프레임으로 들어갈 경우
해당 프레임의 넓이보다 커지면 당연히 스크롤이 생겨서 조금은 보기 않좋습니다 그걸 미연에
방지하기 위해서는 나모 같은 편집기에서 작업하신 후 제일 바깥 테이블의 넓이를 100%로
맞춰 주시는게 좋습니다 나모에서 표를 짜다 보면 100%로 지정을 해 놓아도 편집에서 조금만 표를 건드려도
숫자로 바뀌거든요
아래의 표는 메모장의 간단한 모양새입니다
나모 같은 편집기에서 <!-- 비 회원일 때: 시작--> 에서부터
<!-- 비 회원일 때: 끝--> 부분까지 지웠다 넣다 해보세요
금방 이해하실 겁니다 회원으로 들어오면 굳이 비번이나 아이디를 물을 필요가 없으니
회원일 경우 비번과 아이디를 적는 부분을 보여줄 필요가 없습니다
그럴때는 회원값과 맞춰서 안보여주는 if문을 써주면 되겠죠
마찬가지로 아래에 있는
<!-- while 문으로 들어온 데이터를 돌림-->
<!-- while 문으로 들어온 데이터를 돌림-->
사이의 소스들을 복사해서 그 밑에 붙여 넣기를 해보세요
보시면 아시겠지만 보기 좋게 아래로 칸이 메겨집니다
즉 글이 있는 만큼 while문을 돌려서 페이징시 원하는 갯수만큼 뿌려주는거죠
이하 html 소스입니다
소스 시작
-----------------------------------------------------------------------------------------
<html>
<head>
<title>제목없음</title>
<meta name="generator" content="Namo WebEditor v4.0">
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" leftmargin="0"
marginwidth="0" topmargin="0" marginheight="0">
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td height="1" bgcolor="silver">
</td>
</tr>
<!-- 비 회원일 때: 시작-->
<tr>
<td height="39" bgcolor="#F2F2F2">
<table border="0"align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="180" height="42" style="text-indent:20px;">
<font class=td>비밀번호:</font> <INPUT class=input type=password maxLength=20
size=8 value="" name=password>
</td>
<td width="180" height="42" style="text-indent:20px;"><font class=td>이름:
</font><INPUT
class=input maxLength=5 size=10 name=memo_name>
</td>
</tr>
</table>
</td>
</tr>
<!-- 비 회원일 때: 끝-->
<tr>
<td height="47" bgcolor="#F2F2F2">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="100%" style='word-break:break-all;'>
<input class=input type=text name=memo value="" style="width:100%">
</td>
<td width="43" style="padding-top:1px;">
<table align="center" border="1" cellspacing="0" width="59" bordercolordark="white"
bordercolorlight="black" cellpadding="0">
<tr>
<td width="55" height="11" bgcolor="#F8F8FF">
<input type=submit check_submit() style="border:solid 0;font-
size:9pt;color:black;background-color:#F8F8FF;height:15px;width:50;cursor:pointer;" value='글쓰기'
onclick="this.form.action='write_ok.php'" accesskey="s" style="height:11;" >
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1" bgcolor="silver">
</td>
</tr>
<tr>
<td height="25" valign="top">
</td>
</tr>
<tr>
<td height="75" valign="top">
<table border="0" cellpadding="0" cellspacing="0"width="100%">
<tr>
<td height="1" colspan="3" bgcolor="silver">
</td>
</tr>
<!-- while 문으로 들어온 데이터를 돌림-->
<tr>
<td width="125" height="25" style="text-indent:20px;word-break:break-all;">
<p> 이름</p>
</td>
<td height="25" style=" padding-left:15px;word-break:break-all;">
<p> 내용</p>
</td>
<td width="100" height="25" style="text-indent:20px;word-break:break-all;">
<p> 날짜</p>
</td>
</tr>
<tr>
<td height="1" colspan="3" bgcolor="silver">
</td>
</tr>
<!-- while 문으로 들어온 데이터를 돌림-->
</table>
</td>
</tr>
<tr>
<td height="1" valign="top" bgcolor="silver">
</td>
</tr>
<tr>
<td height="37" valign="middle" bgcolor="#F2F2F2"align="center">
<p>페이징</p>
</td>
</tr>
<tr>
<td height="1" valign="top" bgcolor="silver">
</td>
</tr>
</table>
</body>
</html>
-------------------------------------------------------------------------------------------
소스 끝
게시판은 깔끔한 디자인이 글을 더 쓰구 싶게 만드는 요인중에 하나가 될수 있습니다
그러니 표를 잘 다루시면 좀 더 예쁜 모양의 게시판을 만드실 수 있습니다
이름 내용 날짜에 들어간 스타일 태그를 유념하시구요
style=" word-break:break-all;"
글을 쓰다보면 글이 길어질 경우 게시판이 깨지는 경우를 막아줍니다
게시판은 그런대로 만드신 분이라면 메모장은 아주 쉽게 만들수 있을것입니다
메모장과 게시판의 차이는 글쓰기란과 함께 목록이 보여진다는 점입니다
물론 방명록도 같은 원리이구요
게시판은 목록에 제목이 들어가지만 메모장과 방명록은 제목 대신 그 글의 본문을 뽑아온다는 점만
다릅니다
구성은 비외원일 경우 글을 쓸때 아이디와 비번을 물을수 있도록 아이디와 비번 쓰는 란이 있어야 하며
글을 쓸수 있는 란이 있어야겠죠
그 밑으로는 게시판 마냥 while문으로 돌려서 해당 게시판의 주인의 글만 뽑아오면 됩니다
저번에도 쓴듯 한데 게시판을 만드시면서 디자인 상 유의할 점은 게시판의 넓이를 되도록이면
%로 지정해서 해주는게 제일 좋습니다
게시판의 넓이가 고정되어 있으면 자체만으로 쓸때는 괜챦지만 아이프레임으로 들어갈 경우
해당 프레임의 넓이보다 커지면 당연히 스크롤이 생겨서 조금은 보기 않좋습니다 그걸 미연에
방지하기 위해서는 나모 같은 편집기에서 작업하신 후 제일 바깥 테이블의 넓이를 100%로
맞춰 주시는게 좋습니다 나모에서 표를 짜다 보면 100%로 지정을 해 놓아도 편집에서 조금만 표를 건드려도
숫자로 바뀌거든요
아래의 표는 메모장의 간단한 모양새입니다
나모 같은 편집기에서 <!-- 비 회원일 때: 시작--> 에서부터
<!-- 비 회원일 때: 끝--> 부분까지 지웠다 넣다 해보세요
금방 이해하실 겁니다 회원으로 들어오면 굳이 비번이나 아이디를 물을 필요가 없으니
회원일 경우 비번과 아이디를 적는 부분을 보여줄 필요가 없습니다
그럴때는 회원값과 맞춰서 안보여주는 if문을 써주면 되겠죠
마찬가지로 아래에 있는
<!-- while 문으로 들어온 데이터를 돌림-->
<!-- while 문으로 들어온 데이터를 돌림-->
사이의 소스들을 복사해서 그 밑에 붙여 넣기를 해보세요
보시면 아시겠지만 보기 좋게 아래로 칸이 메겨집니다
즉 글이 있는 만큼 while문을 돌려서 페이징시 원하는 갯수만큼 뿌려주는거죠
이하 html 소스입니다
소스 시작
-----------------------------------------------------------------------------------------
<html>
<head>
<title>제목없음</title>
<meta name="generator" content="Namo WebEditor v4.0">
</head>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" leftmargin="0"
marginwidth="0" topmargin="0" marginheight="0">
<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td height="1" bgcolor="silver">
</td>
</tr>
<!-- 비 회원일 때: 시작-->
<tr>
<td height="39" bgcolor="#F2F2F2">
<table border="0"align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="180" height="42" style="text-indent:20px;">
<font class=td>비밀번호:</font> <INPUT class=input type=password maxLength=20
size=8 value="" name=password>
</td>
<td width="180" height="42" style="text-indent:20px;"><font class=td>이름:
</font><INPUT
class=input maxLength=5 size=10 name=memo_name>
</td>
</tr>
</table>
</td>
</tr>
<!-- 비 회원일 때: 끝-->
<tr>
<td height="47" bgcolor="#F2F2F2">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="100%" style='word-break:break-all;'>
<input class=input type=text name=memo value="" style="width:100%">
</td>
<td width="43" style="padding-top:1px;">
<table align="center" border="1" cellspacing="0" width="59" bordercolordark="white"
bordercolorlight="black" cellpadding="0">
<tr>
<td width="55" height="11" bgcolor="#F8F8FF">
<input type=submit check_submit() style="border:solid 0;font-
size:9pt;color:black;background-color:#F8F8FF;height:15px;width:50;cursor:pointer;" value='글쓰기'
onclick="this.form.action='write_ok.php'" accesskey="s" style="height:11;" >
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="1" bgcolor="silver">
</td>
</tr>
<tr>
<td height="25" valign="top">
</td>
</tr>
<tr>
<td height="75" valign="top">
<table border="0" cellpadding="0" cellspacing="0"width="100%">
<tr>
<td height="1" colspan="3" bgcolor="silver">
</td>
</tr>
<!-- while 문으로 들어온 데이터를 돌림-->
<tr>
<td width="125" height="25" style="text-indent:20px;word-break:break-all;">
<p> 이름</p>
</td>
<td height="25" style=" padding-left:15px;word-break:break-all;">
<p> 내용</p>
</td>
<td width="100" height="25" style="text-indent:20px;word-break:break-all;">
<p> 날짜</p>
</td>
</tr>
<tr>
<td height="1" colspan="3" bgcolor="silver">
</td>
</tr>
<!-- while 문으로 들어온 데이터를 돌림-->
</table>
</td>
</tr>
<tr>
<td height="1" valign="top" bgcolor="silver">
</td>
</tr>
<tr>
<td height="37" valign="middle" bgcolor="#F2F2F2"align="center">
<p>페이징</p>
</td>
</tr>
<tr>
<td height="1" valign="top" bgcolor="silver">
</td>
</tr>
</table>
</body>
</html>
-------------------------------------------------------------------------------------------
소스 끝
게시판은 깔끔한 디자인이 글을 더 쓰구 싶게 만드는 요인중에 하나가 될수 있습니다
그러니 표를 잘 다루시면 좀 더 예쁜 모양의 게시판을 만드실 수 있습니다
이름 내용 날짜에 들어간 스타일 태그를 유념하시구요
style=" word-break:break-all;"
글을 쓰다보면 글이 길어질 경우 게시판이 깨지는 경우를 막아줍니다
댓글 4
-
예뜨락
2005.05.30 07:38
내공이 딸려서 미쳐 못봤네요 ^^;; -
gamzone
2005.05.29 22:00
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red">
이건 지워도 될듯한데요..^^;; -
나라
2005.05.14 13:42
오호..드디어 메모장이군요 -
김기엽
2005.05.15 22:21
예뜨락님 msn 잊어버렸는데 (컴에 몇번 문제가 생겨 윈도우 다시 깔다보니 그렇네요) 다시 알켜주실수 없나요?
쪽지나 메일로 알려주시면 좋을듯 한데