웹마스터 팁

  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;"


글을 쓰다보면 글이 길어질 경우 게시판이 깨지는 경우를 막아줍니다
이 게시물을
수정 삭제
좋아요
목록
제목 글쓴이 날짜
새로운 뉴스티커 [1] 아렌티 2006.04.25
[이 컨트롤을 활성화하고..] 해결하기 [2] 모그422 2006.04.29
플래시 영역에 박스가 생기는것 [4] 로그인 2006.05.03
웹FTP 적용하기 - 꽁수 [4] whenji 2006.05.02
홈페이지 하단 링크주소 없에는 소스 2 [4] 인터니즈 2006.04.27
홈페이지 하단 링크주소 없에는 소스 [6] 인테리어뱅크 2006.04.10
내 홈페이지에 유명사이트 검색엔진을 달자...(네이버,다음,야후 등등) [3] 트래비스 2006.05.10
익스플러로 플래시 영역 박스 생김과 이 컨트롤을 활성화.. [14] 도토리맘 2006.05.15
[소스] 개발자,디자이너 전용 통합검색 스크립트 [1] 김성대 2006.05.19
부모창과 함께 닫히는 팝업창(IE, FF) 행복한고니 2006.07.06
깔끔한 이미지 펼침박스 [2] ▩윤미 2006.07.11
환상적인 이미지 갤러리 (4차원세계에 빠져보세요) [5] ▩윤미 2006.07.11
상단 타이틀바 흐르는 텍스트 왜,그러지 2006.07.14
위에서 아래로 좌에서 우로... [1] 왜,그러지 2006.07.14
날라서 붙는 텍스트 [1] 왜,그러지 2006.07.17
자바스크립트로 만든 테트리스 일명 자트리스 ^^;; [12] beMax 2006.07.27
배경색을 마우스로 크릭하여 지정하여 준다. 왜,그러지 2006.07.27
로또 번호 추출기 [3] 왜,그러지 2006.07.27
텍스트 선택하기 행복한고니 2006.09.06
로또 번호 생성기 허접..ㅋㅋ [5] 삐따기 2006.10.04
태그 쓰기