웹마스터 팁

  2. Support
  3. 웹마스터 팁

나만의 미니홈 만들기 ㅡ 메모장 디자인 (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;"


글을 쓰다보면 글이 길어질 경우 게시판이 깨지는 경우를 막아줍니다
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
[PHP 동영상강좌] 9. form태그를 이용한 값의 전달 [15] 서기 2005.11.22
[PHP 동영상강좌] 8. Get방식의 전달과 테이블, 스타일태그의 사용 [13] 서기 2005.11.22
[PHP 동영상강좌] 7. Get방식을 이용한 변수의 전달 [12] 서기 2005.11.22
[PHP 동영상강좌] 6. Hello PHP [14] 서기 2005.11.22
[PHP 동영상강좌] 5. 웹서버/웹브라우져/PHP란 무엇인가 [12] 서기 2005.11.17
[PHP 동영상강좌] 4. 스타일 시트 [17] 서기 2005.11.17
[PHP 동영상강좌] 3. 테이블 태그의 심화 [10] 서기 2005.11.17
[PHP 동영상강좌] 2. 하이퍼링크, 테이블태그의 사용방법 [15] 서기 2005.11.17
[PHP 동영상강좌] 1. HTML이란 무엇인가! [22] 서기 2005.11.17
주민등록번호 진위확인 [5] file 엔시™ 2005.11.08
예전에 책원고로 만들었던것인데 필요한분 사용하세요 [7] file 유창화 2005.10.22
이쁜 달력소스입니다. [2] file 최문혁 2005.09.05
자기계정에서 file()가 잘안될때.... [5] 이진환님 2005.08.18
일년치 달력을 한꺼번에 보자!!! [4] 未淚 2005.08.07
효율적인 경로 지정하기 [9] 대류 2005.07.27
대용량 파일 업로드 컴포넌트 [4] file OTLNO 2005.06.15
트랙백 기능 구현하기. 태규 2005.06.12
나만의 미니홈 만들기 ㅡ 메모장 소스 예뜨락 2005.06.09
mysql 테이블 스키마 보는법. [2] 최문혁 2005.05.14
나만의 미니홈 만들기 ㅡ 메모장 디자인 (html 소스) [4] 예뜨락 2005.05.12
태그 쓰기