도와주세요

네이버 카페 대문을 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 12882
공지 접속 불가 사태 수습은 진행중입니다.35 마스터 2018.10.05 13521
공지 회원 전용 페이지가 생겼습니다.10 마스터 2018.03.20 14134
공지 [필독] 질문하는 방법5 마스터 2018.02.23 533
268 아이고 자바스크립트 고수분들 도와주세요!!!2 Hanam09 2018.01.08 161
267 리디렉션 형태가 여러가지가 있던데 설명좀 해주실분 계신가요?4 참빛바다 2018.01.01 136
266 만약 광고를..13 Hanam09 2017.12.30 194
265 ssh 로 접속했는데, 왜 아무 명령어가 되지 않을까요?14 워시퍼 2017.12.23 176
264 Tracert 명령어의 사용 방법과 관련하여 질문 드립니다 ^^4 이니스프리 2017.12.21 239
263 질문이 있습니다!2 준그루 2017.12.17 125
262 php로도 irc 접속이 가능한가요?2 준그루 2017.12.16 134
261 다른 버튼은 바꾸어봤지만 요 + 버튼은 찾을 수 가 없네요... Blessed_Umbrella 2017.12.14 85
260 서브도메인 적용 방법좀 알려주실수있을까요? Blessed_Umbrella 2017.12.13 85
259 실시간 오디오 스트리밍을 하고 싶습니다. 도와주세요.6 김윤광 2017.12.13 240
258 이 "게시" 버튼이 오작동하여 떼어버리려고합니다.2 Blessed_Umbrella 2017.12.12 119
257 그누보드 게시글 자동 작성 php 파일 관련해서 질문 드려요 ^^10 이니스프리 2017.12.12 458
256 호스팅서비스를 변경하려면 어떻게 해야 하나요?1 칸달프 2017.12.11 111
255 이게... 무슨상황인거지요?12 Blessed_Umbrella 2017.12.10 406
254 미디어위키 각주 확장기능 도움2 Blessed_Umbrella 2017.12.08 158
253 "크롬이 응답하지 않습니다. 다시 시작하시겠습니까?" 오류 관련 질문 드려요 ^^8 이니스프리 2017.12.05 2191
252 이미지 트래픽 절감에 관련하여 질문 드려요7 이니스프리 2017.12.05 236
251 리버티스킨 목차 버튼 삭제3 Blessed_Umbrella 2017.12.04 149
250 에.. 서명이 어디갔지...1 Blessed_Umbrella 2017.12.04 116
249 인용문, 가로줄등이 작동하지 않습니다.5 Blessed_Umbrella 2017.12.03 106
이전 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
서버에 요청 중입니다. 잠시만 기다려 주십시오...