도와주세요

네이버 카페 대문을 HTML로 제작해보려는데 너무 어렵네요.

도바킨2018.07.09 04:27조회 수 261댓글 6

  • 2
    • 글자 크기

위의 사진처럼 만들어 보고 싶어서 만드는데

하지만 결과는 위의 사진이네요..

아래의 코드로 만들었습니다..


전체글보기와 자유게시판의 공백을 없애고 싶습니다.. ㅠㅠ


어떻게 해야할까요?


 
<br style="line-height:0.1">
<table cellpadding="0" cellspacing="0" class="NHN_Layout_Main">
  <tbody>
     
    <tr>
 
    <!--0.로고-->
 
    <td class="NHN_Layout_Preset">
      <table width="165" height="165" cellpadding="0" cellspacing="0" class="Basicborder NHN_Layout NHN_Layout">
        <tbody><tr>
          <td style="padding:5px;vertical-align:top" class="NHN_Layout_Preset m-tcol-c"><img src="https://cafefiles.pstatic.net/MjAxODA3MDlfMjIz/MDAxNTMxMDc2OTIyMjk0.9rdWwe4ybR13-mQJLm9Wm8-ODFDOgfeooA6qLTCVDnYg.-Jic7enLTycc21rsjcoP82lkDH46G1W9fx3yFFOmcUwg.PNG.stjertmeis/%E3%85%87%E3%85%88%E3%85%81%E3%85%87%E3%84%B4%E3%85%8C%E3%85%8C%E3%85%8C%E3%85%8C%E3%85%8B%E3%85%8B%E3%85%8C.png" width="330" height="165" alt="대문이미지"></td>
          </tr>
        </tbody></table>
    </td>
 
    <!--1.공지사항-->
 
    <td width="5" class="NHN_Layout_Space"></td>
    <td class="NHN_Layout_Preset" style="font-size:0" valign="top">
      <table width="165" height="165" cellpadding="0" cellspacing="0" class="Basicborder NHN_Layout">
        <tbody><tr>
          <td style="padding:5px;vertical-align:top" class="NHN_Layout_Preset m-tcol-c"><img src="https://cafefiles.pstatic.net/MjAxODA3MDlfMjA3/MDAxNTMxMDc2ODgzOTk0.Uvusw0icZtAZKT6PyGTiEFVTwDaGXw6rhvDYu1AljlIg.XcGudl1ND6vP0HHU2qbQCEBqOyqzQgOMIbLlGxaPFEAg.PNG.stjertmeis/1%EA%B3%B5%EC%A7%80%EC%82%AC%ED%95%AD.png" width="165" height="165" alt="대문이미지"></td>
          </tr>
        </tbody></table>
    </td>
 
    <!--2.이벤트-->
 
    <td width="5" class="NHN_Layout_Space"></td>
    <td class="NHN_Layout_Preset" style="font-size:0" valign="top">
      <table width="165" height="165" cellpadding="0" cellspacing="0" class="Basicborder NHN_Layout">
        <tbody><tr>
          <td style="padding:5px;vertical-align:top" class="NHN_Layout_Preset m-tcol-c"><img src="https://cafefiles.pstatic.net/MjAxODA3MDlfMTM2/MDAxNTMxMDc2ODk0ODU0.LRg13KkLslXCY87yaCGVsGGd9mdN1w3LlRUHlEb77NAg.GC6ONBQpU70Yc4Qb9M-TrEnA3FtpidXpd0RizyJgEfYg.PNG.stjertmeis/2%EC%9D%B4%EB%B2%A4%ED%8A%B8.png" width="165" height="165" alt="대문이미지"></td>
          </tr>
        </tbody></table>
    </td>
    </tr>
    <tr>
      <td height="5" style="font-size:0" class="NHN_Layout_Space"></td>
      <td height="5" style="font-size:0" class="NHN_Layout_Space"></td>
      <td height="5" style="font-size:0" class="NHN_Layout_Space"></td>
    </tr>
    <tr>
 
      <!--3.전체글보기-->
 
      <td class="NHN_Layout_Preset" valign="top">
        <table width="165" height="165" cellpadding="0" cellspacing="0" class="Basicborder NHN_Layout">
          <tbody><tr>
            <td style="padding:5px;vertical-align:top" class="NHN_Layout_Preset m-tcol-c"><img src="https://cafefiles.pstatic.net/MjAxODA3MDlfMTQx/MDAxNTMxMDc2OTAxNTUz.3nmzVNp0trq8OgXe1tpJJ7aMNPH3TM5QfPzcPGiH5GEg.ySDxznkJtEuM8XNYhJAeN6_kqZx28LZcdp9IjrgZyo4g.PNG.stjertmeis/3%EC%A0%84%EC%B2%B4%EA%B8%80%EB%B3%B4%EA%B8%B0.png" width="165" height="165" alt="대문이미지"></td>
            </tr>
          </tbody></table>
      </td>
      <!--4. 자유게시판-->
 
      <td width="5" class="NHN_Layout_Space"></td>
      <td class="NHN_Layout_Preset" valign="top">
        <table width="165" height="165" cellpadding="0" cellspacing="0" class="Basicborder NHN_Layout">
          <tbody><tr>
            <td style="padding:5px;vertical-align:top" class="NHN_Layout_Preset m-tcol-c"><img src="https://cafefiles.pstatic.net/MjAxODA3MDlfMTkg/MDAxNTMxMDc3NDM3NTg2.-oKAig7RNoTxASmB7HLamxn7xoTn_ZDaY-iOrYqJyNog.54kRliu5g3eqIbGyJz3Z1jNdhnA_JN82SVbSOOn7J5Eg.PNG.stjertmeis/4%EC%9E%90%EC%9C%A0%EA%B2%8C%EC%8B%9C%ED%8C%90.png" width="165" height="165" alt="대문이미지"></td>
            </tr>
          </tbody></table>
      </td>
      <!--5.통합신고-->
 
      <td width="5" class="NHN_Layout_Space"></td>
      <td class="NHN_Layout_Preset" valign="top">
        <table width="165" height="165" cellpadding="0" cellspacing="0" class="Basicborder NHN_Layout">
          <tbody><tr>
            <td style="padding:5px;vertical-align:top" class="NHN_Layout_Preset m-tcol-c"><img src="https://cafefiles.pstatic.net/MjAxODA3MDlfMjMx/MDAxNTMxMDc2OTA4Mzk2.__in2bV7Mk_UbFXabCD0t9rO-OiI-XpEakV99oZN7Gkg.32qKdrJ6womAuk28fPTGv1NCUcA5TYPCsA0Y_JDB7r8g.PNG.stjertmeis/5%ED%86%B5%ED%95%A9%EC%8B%A0%EA%B3%A0.png" width="165" height="165" alt="대문이미지"></td>
            </tr>
          </tbody></table>
      </td>
 
      <!--6.통합질문-->
 
      <td width="5" class="NHN_Layout_Space"></td>
      <td class="NHN_Layout_Preset" valign="top">
        <table width="165" height="165" cellpadding="0" cellspacing="0" class="Basicborder NHN_Layout">
          <tbody><tr>
            <td style="padding:5px;vertical-align:top" class="NHN_Layout_Preset m-tcol-c"><img src="https://cafefiles.pstatic.net/MjAxODA3MDlfMjUg/MDAxNTMxMDc2OTEzOTg2.gKPXRr26dg-nG2JGwbNosSN9coe-frpOwEIDUdOEIJ0g.PZ-txsZTTSoPcQMMSvx8Nd_C8kw2lZV6UaslOmrgLFgg.PNG.stjertmeis/6%ED%86%B5%ED%95%A9%EC%A7%88%EB%AC%B8.png" width="165" height="165" alt="대문이미지"></td>
            </tr>
          </tbody></table>
      </td>
    </tr>
  </tbody></table>

Fus Ro Dah!!!

  • 2
    • 글자 크기
  • 2018.7.9 09:39

    ** 네이버 예시






    ** 제작하신 내용





    로고가 있는 셀은 가로로 2개 병합시켜 주셔야 합니다.

  • 도바킨글쓴이
    2018.7.9 12:42

    아..아하..!(깊은 깨달음..)

    흠.. 근데 어떻게 하는걸까요 핳(하지만 깨달음을 능가하는 지식의 한계)

  • 2018.7.11 08:55

    div와 float을 이용해 보세요

    반응형까지 고고싱

  • 2018.7.14 22:16
    <!DOCTYPE HTML>
    <html lang="ko">
    <head>
    <meta charset="UTF-8" />
    <title>HTML5 Edit</title>
    </head>
    <body> <!--Nemo's NHN Layout-->
    <br style="line-height:0.1">
    <table cellpadding="0" cellspacing="0" class="NHN_Layout_Main">
      <tbody>
         
        <tr>
     
        <!--0.로고-->
     
        <td class="NHN_Layout_Preset">
          <table width="165" height="165" cellpadding="0" cellspacing="0" class="Basicborder NHN_Layout NHN_Layout">
            <tbody><tr>
              <td style="padding:5px;vertical-align:top" class="NHN_Layout_Preset m-tcol-c"><img src="https://cafefiles.pstatic.net/MjAxODA3MDlfMjIz/MDAxNTMxMDc2OTIyMjk0.9rdWwe4ybR13-mQJLm9Wm8-ODFDOgfeooA6qLTCVDnYg.-Jic7enLTycc21rsjcoP82lkDH46G1W9fx3yFFOmcUwg.PNG.stjertmeis/%E3%85%87%E3%85%88%E3%85%81%E3%85%87%E3%84%B4%E3%85%8C%E3%85%8C%E3%85%8C%E3%85%8C%E3%85%8B%E3%85%8B%E3%85%8C.png" width="330" height="165" alt="대문이미지"></td>
              </tr>
            </tbody></table>
        </td>
     
        <!--1.공지사항-->
     
        <td width="5" class="NHN_Layout_Space"></td>
        <td class="NHN_Layout_Preset" style="font-size:0" valign="top">
          <table width="165" height="165" cellpadding="0" cellspacing="0" class="Basicborder NHN_Layout">
            <tbody><tr>
              <td style="padding:5px;vertical-align:top" class="NHN_Layout_Preset m-tcol-c"><img src="https://cafefiles.pstatic.net/MjAxODA3MDlfMjA3/MDAxNTMxMDc2ODgzOTk0.Uvusw0icZtAZKT6PyGTiEFVTwDaGXw6rhvDYu1AljlIg.XcGudl1ND6vP0HHU2qbQCEBqOyqzQgOMIbLlGxaPFEAg.PNG.stjertmeis/1%EA%B3%B5%EC%A7%80%EC%82%AC%ED%95%AD.png" width="165" height="165" alt="대문이미지"></td>
              </tr>
            </tbody></table>
        </td>
     
        <!--2.이벤트-->
     
        <td width="5" class="NHN_Layout_Space"></td>
        <td class="NHN_Layout_Preset" style="font-size:0" valign="top">
          <table width="165" height="165" cellpadding="0" cellspacing="0" class="Basicborder NHN_Layout">
            <tbody><tr>
              <td style="padding:5px;vertical-align:top" class="NHN_Layout_Preset m-tcol-c"><img src="https://cafefiles.pstatic.net/MjAxODA3MDlfMTM2/MDAxNTMxMDc2ODk0ODU0.LRg13KkLslXCY87yaCGVsGGd9mdN1w3LlRUHlEb77NAg.GC6ONBQpU70Yc4Qb9M-TrEnA3FtpidXpd0RizyJgEfYg.PNG.stjertmeis/2%EC%9D%B4%EB%B2%A4%ED%8A%B8.png" width="165" height="165" alt="대문이미지"></td>
              </tr>
            </tbody></table>
        </td>
        </tr>
        <tr>
          <td height="5" style="font-size:0" class="NHN_Layout_Space"></td>
          <td height="5" style="font-size:0" class="NHN_Layout_Space"></td>
          <td height="5" style="font-size:0" class="NHN_Layout_Space"></td>
        </tr>
        <tr>
     
          <!--3.전체글보기 AND 4. 자유게시판-->
     
          <td class="NHN_Layout_Preset" valign="top">
            <table width="165" height="165" cellpadding="0" cellspacing="0" class="Basicborder NHN_Layout">
              <tbody><tr>
                <td style="padding:5px;vertical-align:top" class="NHN_Layout_Preset m-tcol-c"><img src="https://cafefiles.pstatic.net/MjAxODA3MDlfMTQx/MDAxNTMxMDc2OTAxNTUz.3nmzVNp0trq8OgXe1tpJJ7aMNPH3TM5QfPzcPGiH5GEg.ySDxznkJtEuM8XNYhJAeN6_kqZx28LZcdp9IjrgZyo4g.PNG.stjertmeis/3%EC%A0%84%EC%B2%B4%EA%B8%80%EB%B3%B4%EA%B8%B0.png" width="165" height="165" alt="대문이미지"></td>
                            <td style="padding:5px;vertical-align:top" class="NHN_Layout_Preset m-tcol-c"><img src="https://cafefiles.pstatic.net/MjAxODA3MDlfMTkg/MDAxNTMxMDc3NDM3NTg2.-oKAig7RNoTxASmB7HLamxn7xoTn_ZDaY-iOrYqJyNog.54kRliu5g3eqIbGyJz3Z1jNdhnA_JN82SVbSOOn7J5Eg.PNG.stjertmeis/4%EC%9E%90%EC%9C%A0%EA%B2%8C%EC%8B%9C%ED%8C%90.png" width="165" height="165" alt="대문이미지"></td>
    
                </tr>
               
              </tbody></table>
          </td>
          <!--5.통합신고-->
     
          <td width="5" class="NHN_Layout_Space"></td>
          <td class="NHN_Layout_Preset" valign="top">
            <table width="165" height="165" cellpadding="0" cellspacing="0" class="Basicborder NHN_Layout">
              <tbody><tr>
                <td style="padding:5px;vertical-align:top" class="NHN_Layout_Preset m-tcol-c"><img src="https://cafefiles.pstatic.net/MjAxODA3MDlfMjMx/MDAxNTMxMDc2OTA4Mzk2.__in2bV7Mk_UbFXabCD0t9rO-OiI-XpEakV99oZN7Gkg.32qKdrJ6womAuk28fPTGv1NCUcA5TYPCsA0Y_JDB7r8g.PNG.stjertmeis/5%ED%86%B5%ED%95%A9%EC%8B%A0%EA%B3%A0.png" width="165" height="165" alt="대문이미지"></td>
                </tr>
              </tbody></table>
          </td>
     
          <!--6.통합질문-->
     
          <td width="5" class="NHN_Layout_Space"></td>
          <td class="NHN_Layout_Preset" valign="top">
            <table width="165" height="165" cellpadding="0" cellspacing="0" class="Basicborder NHN_Layout">
              <tbody><tr>
                <td style="padding:5px;vertical-align:top" class="NHN_Layout_Preset m-tcol-c"><img src="https://cafefiles.pstatic.net/MjAxODA3MDlfMjUg/MDAxNTMxMDc2OTEzOTg2.gKPXRr26dg-nG2JGwbNosSN9coe-frpOwEIDUdOEIJ0g.PZ-txsZTTSoPcQMMSvx8Nd_C8kw2lZV6UaslOmrgLFgg.PNG.stjertmeis/6%ED%86%B5%ED%95%A9%EC%A7%88%EB%AC%B8.png" width="165" height="165" alt="대문이미지"></td>
                </tr>
              </tbody></table>
          </td>
        </tr>
      </tbody></table><!--END Nemo's NHN Blog Layout-->
    </body>
    </html>



  • 2018.7.14 22:23

    네모님이 말씀하신 내용과 같이 셀을 가로로 2개 병합시킨 예입니다

  • 2018.7.16 20:44

    대단하당....

댓글 달기

번호 제목 글쓴이 날짜 조회 수
공지 앞으로 ssh 사용시 한글 사용이 가능합니다.7 마스터 2018.10.12 12898
공지 접속 불가 사태 수습은 진행중입니다.35 마스터 2018.10.05 13542
공지 회원 전용 페이지가 생겼습니다.10 마스터 2018.03.20 14175
공지 [필독] 질문하는 방법5 마스터 2018.02.23 552
268 신서버는 연장시켜도 바로 반영이 안되는가요?2 title: 금메달 (30일)동방개념지국 2017.02.13 194
267 신서버 패널 점검중인가요?1 title: 도밥위키!Dobob 2017.01.10 166
266 스포어 호스팅은 자바를 지원하나요?5 샹키 2018.08.21 88
265 스포어 호스팅 관련..2 endom4086 2018.08.21 68
264 스마트업로더 이미지 업로드 엑박12 연우빠 2017.10.01 267
263 스레드식 게시판 프로그램좀 추천해주세요.4 Blessed_Umbrella 2018.05.20 83
262 숨겨진 파일을 삭제하는 방법은 어떻게 해야하나요?2 워시퍼 2016.09.14 230
261 센토라 패널 도메인 리다이렉트12 루니 2017.08.06 219
260 서피스에 사용할 포터블 모니터 추천 부탁드립니다.2 이니스프리 2018.04.20 206
259 서비스 신청3 기특한크리퍼 2017.10.18 145
258 서비스 구매 후...2 title: 은메달도다 2016.10.18 235
257 서브도메인은 어떻게 연결시켜야되나요?2 50knots 2017.02.21 235
256 서브도메인은 뭐가 뭔지 하나도 모르겠습니다..5 Blessed_Umbrella 2018.03.18 135
255 서브도메인 적용 방법좀 알려주실수있을까요? Blessed_Umbrella 2017.12.13 89
254 서브도메인 네임서버3 benjamin 2017.07.30 278
253 서버의 구성에 관련하여 질문드립니다7 Soto 2018.10.03 67
252 서버에서 아파치 오류가 뜨고 있네요1 abnoeh 2018.05.08 68
251 서버 호스팅 승인 얼마나 걸리나요 보통?7 Aloha 2018.04.20 182
250 서버 기계를 추천해주세요7 Blessed_Umbrella 2018.03.31 166
249 서명 어디서 변경하지요...?1 Blessed_Umbrella 2017.12.03 84
이전 1 ... 5 6 7 8 9 10 11 12 13 14... 23다음
첨부 (2)
dwassd.png
211.9KB / Download 25
xzxcsw.png
36.5KB / Download 13
서버에 요청 중입니다. 잠시만 기다려 주십시오...