한스 잡동사니 창고

참고/컴공부

[스크랩] 테이블만들기 초급

한스 강 2008. 1. 16. 00:45
태그연습장　　　RGB색상코드
 

테이블만들기 초급

① 가로로 2개의 테이블 만들기 가로로 2개의 테이블을 만들어 좌측엔 이미지를 우측엔 글을 넣어봅시다. 먼저, 이미지를 준비합니다. (가로278*세로400) <img src=http://imgsrc2.search.daum.net/imgair2//00/76/34/00763409_2.jpg width=278 height=400 border=0 align=cehter> 테이블을 준비합니다. </FONT></FONT><table border="0" cellspacing="0" style="border-collapse:collapse;"> <tr> <td width="278" height="400"> </td> <td width="300" height="400"> </td></tr></table> <FONT class=blinespace style="FONT-SIZE: 9pt"><FONT class=blinespace style="FONT-SIZE: 9pt" color=#4b4b4b>예제1) ------------------------------------------------------------------- </FONT></FONT><table border="1" cellspacing="0" style="border-collapse:collapse;"> <tr> <td width="278" height="400"> <center> <img src=http://imgsrc2.search.daum.net/imgair2//00/76/34/00763409_2.jpg width=278 height=400 border=0 align=cehter> </center> </td> <td width="300" height="400"> <div align="left" style="margin-left:20;"> <pre> </pre> <center> <font style="font-size:9pt" class="blinespace" color="808080" face="굴림">하늘을 날고 싶어~</font> </center> <pre><font style="font-size:9pt" class="blinespace" color="808080" face="굴림">어린 시절엔 그네를 타고 있으면<br> 하늘의 구름도 잡을 수 있을거 같았는데..<br> 눈을 감고 발을 구르면..<br> 하늘을 헤엄쳐 다니는 기분이었는데..<br><br> 어린 시절 즐겨 타던 그네는<br> 내게 하늘을 날 수 있을거 같은 희망을 줬었는데..<br> 손을 뻗으면..<br> 그 높던 하늘의 구름도 만질 수 있었는데..<br><br> 뭐든 될 수 있고, <br> 뭐든 할 수 있을거 같던 그날의 기억이 그립습니다. <br> 이젠, 내가 너무 커버린 걸까요?<br> 아니면, 그 그네가 너무 작아져 버린걸까요?</font></pre></div> </td></tr></table> <FONT class=blinespace style="FONT-SIZE: 9pt"><FONT class=blinespace style="FONT-SIZE: 9pt" color=#4b4b4b>------------------------------------------------------------------- 예제결과1)
 




하늘을 날고 싶어~


어린 시절엔 그네를 타고 있으면



하늘의 구름도 잡을 수 있을거 같았는데..

                
눈을 감고 발을 구르면..

                
하늘을 헤엄쳐 다니는 기분이었는데..




어린 시절 즐겨 타던 그네는

                
내게 하늘을 날 수 있을거 같은 희망을 줬었는데..

                
손을 뻗으면..

                
그 높던 하늘의 구름도 만질 수 있었는데..



뭐든 될 수 있고, 

                
뭐든 할 수 있을거 같던 그날의 기억이 그립습니다. 

                
이젠, 내가 너무 커버린 걸까요?

                
아니면, 그 그네가 너무 작아져 버린걸까요?


예제2) 우측 테이블에 색상과 cellspacing=&quot;10&quot; 을 넣어볼까요?
예제결과2)









 






하늘을 날고 싶어~



어린 시절엔 그네를 타고 있으면

하늘의 구름도 잡을 수 있
을거 같았는데..

눈을 감고 발을 구르면..

하늘을 헤엄쳐 다니는 기분이었는데..


어린 시절 즐겨 타던 그네는

내게 하늘을 날 수 있을거 같은 희망을 줬었는데..

손을 뻗으면..

그 높던 하늘의 구름도 만질 수 있었는데..


뭐든 될 수 있고, 

뭐든 할 수 있을거 같던 그날의 기억이 그립습니다. 

이젠, 내가 너무 커버린 걸까요?

아니면, 그 그네가 너무 작아져 버린걸까요?


좀 전 보다는 더 예뻐졌죠? ㅎㅎ 응용은 자유입니다. ^^<br><br>
★유의할점..<br>
가로로 테이블을 나누실땐, 반드시 세로의 크기는 같아야 합니다.<br>
세로의 수치가 서로 다르면 큰 수치의 크기에 따라 테이블이 생성됩니다. <br><br>
② 세로로 2개의 테이블 만들기<br><br>
먼저 이미지를 준비합니다.(가로 500*세로 378)<br><br>
<img src=http://movieimage.hanmail.net/images/photo/photo_still/photo_still_007250/photo_still_7285_41387_L.jpg
width=400 height=278 boeder=0 align=center>
테이블을 준비합니다.
</FONT></FONT><table border="1" cellspacing="0" style="border-collapse:collapse;">
<tr> 
<td width="400" height="278">
</td></tr>
<tr>
<td width="400" height="200">
</td></tr></table>
<FONT class=blinespace style="FONT-SIZE: 9pt"><FONT class=blinespace style="FONT-SIZE: 9pt" color=#4b4b4b>아래 테이블의 세로 수치 200은 넣으셔도 되고 안 넣으셔도 됩니다. <br>
글의 양에 따라 자동으로 조절 됩니다. ^^
예제3)
-------------------------------------------------------------------
</FONT></FONT><table border="1" cellspacing="0" style="border-collapse:collapse;">
<tr> 
<td width="400" height="278">
<center>
<img src=http://movieimage.hanmail.net/images/photo/photo_still/photo_still_007250/photo_still_7285_41387_L.jpg
width=400 height=278 boeder=0 align=center>
</center>
</td></tr>
<tr>
<td width="400" height="200">
<div align="left" style="margin-left:24;">
<pre>
</pre>
<center>
<font style="font-size:9pt" class="blinespace" color="4b4b4b" face="굴림"><b>하늘을 날고 싶어~</b></font><br><br>
</center>
<font style="font-size:9pt" class="blinespace" color="4b4b4b" face="굴림">어린 시절엔 그네를 타고 있으면<br>
하늘의 구름도 잡을 수 있을거 같았는데..<br>
눈을 감고 발을 구르면..<br>
하늘을 헤엄쳐 다니는 기분이었는데..<br><br>
어린 시절 즐겨 타던 그네는<br>
내게 하늘을 날 수 있을거 같은 희망을 줬었는데.<br>.
손을 뻗으면..<br>
그 높던 하늘의 구름도 만질 수 있었는데..<br><br>
뭐든 될 수 있고, <br>
뭐든 할 수 있을거 같던 그날의 기억이 그립습니다. <br>
이젠, 내가 너무 커버린 걸까요?<br>
아니면, 그 그네가 너무 작아져 버린걸까요?<br></font>
</pre></div>
</td></tr></table>
<FONT class=blinespace style="FONT-SIZE: 9pt"><FONT class=blinespace style="FONT-SIZE: 9pt" color=#4b4b4b>-------------------------------------------------------------------
세로와는 다르게 style=&quot;margin-left:24;&quot; 을 24로 했습니다
예제결과3)









 









하늘을 날고 싶어~




어린 시절엔 그네를 타고 있으면

하늘의 구름도 잡을 수 있을거 같았는데..

눈을 감고 발을 구르면..

하늘을 헤엄쳐 다니는 기분이었는데..


어린 시절 즐겨 타던 그네는

내게 하늘을 날 수 있을거 같은 희망을 줬었는데..

손을 뻗으면..

그 높던 하늘의 구름도 만질 수 있었는데..


뭐든 될 수 있고, 

뭐든 할 수 있을거 같던 그날의 기억이 그립습니다. 

이젠, 내가 너무 커버린 걸까요?

아니면, 그 그네가 너무 작아져 버린걸까요?


예제4) 테두리를 3으로 하고 cellspacing=&quot;10&quot; 아래 테이블에 색을 넣어볼까요?
예제결과4)









 









하늘을 날고 싶어~




어린 시절엔 그네를 타고 있으면

하늘의 구름도 잡을 수 있을거 같았는데..

눈을 감고 발을 구르면..

하늘을 헤엄쳐 다니는 기분이었는데..


어린 시절 즐겨 타던 그네는

내게 하늘을 날 수 있을거 같은 희망을 줬었는데..

손을 뻗으면..

그 높던 하늘의 구름도 만질 수 있었는데..


뭐든 될 수 있고, 

뭐든 할 수 있을거 같던 그날의 기억이 그립습니다. 

이젠, 내가 너무 커버린 걸까요?

아니면, 그 그네가 너무 작아져 버린걸까요?


★ 유의할점..<br>
세로로 2개의 테이블을 나눌땐 가로의 400은 수정할 수 없습니다.<br>
가로의 수치가 서로 다르면 큰 수치의 크기에 따라 테이블이 생성됩니다.<br><br>
위의 예제는 편지지에서 마니 보셨죠? 응용은 각자의 몫? ^^<br><br>
예를들어 윗 테이블엔 스위시작품을 넣어도 되겠죠? <br>
테이블의 크기는 스위시의 사이즈로 맞추시구요..<br>
그밖에 테두리색도 바꿔보시고 이미지에 따라 아래 테이블의 <br>
배경색도 바꿔 보시고.. 글의 제목도 우측에서 20px 로 해 보시고..^^<br>
</FONT></FONT><div class='scrap_memo'><span><b>출처</b> : 아름다운 60대<span></div><div class='scrap_memo'><span><b>글쓴이</b> : 예보 <span><a href="http://cafe.daum.net/_service/bbs_read?grpid=6A1T&fldid=6P66&contentval=001HMzzzzzzzzzzzzzzzzzzzzzzzzz" class="d_4F72B3 under" target="_blank">원글보기</a></div><div class='scrap_memo'><span><b>메모</b> :  <span></div></div>
            <!-- System - START -->

<!-- System - END -->

                    <div class="container_postbtn #post_button_group">
  <div class="postbtn_like"><script>window.ReactionButtonType = 'reaction';
window.ReactionApiUrl = '//kaya52.tistory.com/reaction';
window.ReactionReqBody = {
    entryId: 14606002
}</script>
<div class="wrap_btn" id="reaction-14606002" data-tistory-react-app="Reaction"></div><div class="wrap_btn wrap_btn_share"><button type="button" class="btn_post sns_btn btn_share" aria-expanded="false" data-thumbnail-url="https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png" data-title="[스크랩] 테이블만들기 초급" data-description="태그연습장　　　RGB색상코드 테이블만들기 초급 ① 가로로 2개의 테이블 만들기 가로로 2개의 테이블을 만들어 좌측엔 이미지를 우측엔 글을 넣어봅시다. 먼저, 이미지를 준비합니다. (가로278*세로400) 테이블을 준비합니다. 예제1) ------------------------------------------------------------------- 하늘을 날고 싶어~ .." data-profile-image="https://t1.daumcdn.net/tistory_admin/static/manage/images/r3/default_L.png" data-profile-name="한스 강" data-pc-url="https://kaya52.tistory.com/14606002" data-relative-pc-url="/14606002" data-blog-title="한스 잡동사니 창고"><span class="ico_postbtn ico_share">공유하기</span></button>
  <div class="layer_post" id="tistorySnsLayer"></div>
</div><div class="wrap_btn wrap_btn_etc" data-entry-id="14606002" data-entry-visibility="public" data-category-visibility="public"><button type="button" class="btn_post btn_etc2" aria-expanded="false"><span class="ico_postbtn ico_etc">게시글 관리</span></button>
  <div class="layer_post" id="tistoryEtcLayer"></div>
</div></div>
<button type="button" class="btn_menu_toolbar btn_subscription #subscribe" data-blog-id="5459911" data-url="https://kaya52.tistory.com/14606002" data-device="web_pc" data-tiara-action-name="구독 버튼_클릭"><em class="txt_state"></em><strong class="txt_tool_id">한스 잡동사니 창고</strong><span class="img_common_tistory ico_check_type1"></span></button>  <div data-tistory-react-app="SupportButton"></div>
</div>

                    <!-- PostListinCategory - START -->
<div class="another_category another_category_color_gray">
  <h4>'<a href="/category/%EC%B0%B8%EA%B3%A0">참고</a> &gt; <a href="/category/%EC%B0%B8%EA%B3%A0/%EC%BB%B4%EA%B3%B5%EB%B6%80">컴공부</a>' 카테고리의 다른 글</h4>
  <table>
    <tr>
      <th><a href="/14741717">[스크랩] 멈춰있는 이미지 움직이는 프로그램</a>&nbsp;&nbsp;<span>(0)</span></th>
      <td>2008.01.25</td>
    </tr>
    <tr>
      <th><a href="/14741705">[스크랩] 사진속 일부배경 지우는 프로그램</a>&nbsp;&nbsp;<span>(0)</span></th>
      <td>2008.01.25</td>
    </tr>
    <tr>
      <th><a href="/14606011">[스크랩] 테이블의 가로 세로 나누기</a>&nbsp;&nbsp;<span>(0)</span></th>
      <td>2008.01.16</td>
    </tr>
    <tr>
      <th><a href="/14605934">[스크랩] 사진속 일부 배경 지우기</a>&nbsp;&nbsp;<span>(0)</span></th>
      <td>2008.01.16</td>
    </tr>
    <tr>
      <th><a href="/13848204">[스크랩] 소스모음</a>&nbsp;&nbsp;<span>(0)</span></th>
      <td>2007.11.21</td>
    </tr>
  </table>
</div>

<!-- PostListinCategory - END -->

    </div>

    <!-- article-footer -->
    <div class="article-footer">

      

      <div class="article-page">
        <h3 class="title-footer">'참고/컴공부'의 다른글</h3>
        <ul>
          <li>
            
          </li>
          <li><span>현재글</span><strong>[스크랩] 테이블만들기 초급</strong></li>
          <li>
            
          </li>
        </ul>
      </div>

      
        <!-- article-related -->
        <div class="article-related">
          <h3 class="title-footer">관련글</h3>
          <ul class="list-related">
            
              <li class="item-related">
                <a href="/14741705?category=1006801" class="link-related">
                  <span class="thumnail" style="background-image:url('')"></span>
                  <div class="box_content">
                    <strong>[스크랩] 사진속 일부배경 지우는 프로그램</strong>
                    <span class="date">2008.01.25</span>
                  </div>
                </a>
              </li>
            
              <li class="item-related">
                <a href="/14606011?category=1006801" class="link-related">
                  <span class="thumnail" style="background-image:url('')"></span>
                  <div class="box_content">
                    <strong>[스크랩] 테이블의 가로 세로 나누기</strong>
                    <span class="date">2008.01.16</span>
                  </div>
                </a>
              </li>
            
              <li class="item-related">
                <a href="/14605934?category=1006801" class="link-related">
                  <span class="thumnail" style="background-image:url('')"></span>
                  <div class="box_content">
                    <strong>[스크랩] 사진속 일부 배경 지우기</strong>
                    <span class="date">2008.01.16</span>
                  </div>
                </a>
              </li>
            
              <li class="item-related">
                <a href="/13848204?category=1006801" class="link-related">
                  <span class="thumnail" style="background-image:url('')"></span>
                  <div class="box_content">
                    <strong>[스크랩] 소스모음</strong>
                    <span class="date">2007.11.21</span>
                  </div>
                </a>
              </li>
            
          </ul>
        </div>
        <!-- // article-related -->
      

      <!-- article-reply -->
      <div class="article-reply">
        <div class="area-reply">
          <div data-tistory-react-app="Namecard"></div>
        </div>
      </div>
      <!-- // article-reply -->

    </div>
    <!-- // article-footer -->

  

      
  
              <!-- // s_article_rep -->

              <!-- s_article_protected / 개별 보호글 페이지 -->
              
              <!-- // s_article_protected -->

              <!-- s_page_rep -->
              
              <!-- // s_page_rep -->

              <!-- s_notice_rep / 개별 공지사항 페이지 -->
							

              <!-- // s_notice_rep -->

              <!-- s_tag / 개별 태그 페이지-->
              
              <!-- // s_tag -->

              <!-- s_local / 개별 위치로그 페이지 -->
              
              <!-- // s_local -->

              <div class="article-reply">
                <div class="area-reply">
                  <!-- s_guest  / 개별 방명록 페이지 -->
                  
                </div>
              </div>

              <!-- s_paging -->
              
              <!-- // s_paging -->

            </div>
            <!-- area-view -->

            <!-- s_cover_group / 커버 리스트 -->
            
            <!-- // s_cover_group -->

          </div>
          <!-- // area-main -->

          <!-- aside -->
          <aside class="area-aside">
            <!-- sidebar 01 -->
            
                <!-- 프로필 -->
								<div class="box-profile " style="background-image:url('');">
									<div class="inner-box">
										<img src="https://t1.daumcdn.net/tistory_admin/static/manage/images/r3/default_L.png" class="img-profile" alt="프로필사진">
										<p class="tit-g">한스 잡동사니 창고</p>
                    <p class="text-profile">마테호른 앞에서</p>
                    <!-- 블로그 소유자 접속시 보여지는 버튼 -->
										<div class="btn_tool"><button class="btn_menu_toolbar btn_subscription  #subscribe" data-blog-id="5459911" data-url="https://kaya52.tistory.com" data-device="web_pc"><strong class="txt_tool_id">한스 잡동사니 창고</strong><em class="txt_state">구독하기</em><span class="img_common_tistory ico_check_type1"></span></button></div>
                    <!-- 블로그 소유자가 아닌 경우 보여지는 버튼 그룹 -->
                    <div class="profile-btn-group visitor">
                        <button type="button" class="btn-g btn-primary btn-write">글쓰기</button> 
                        <button type="button" class="btn-g btn-blog-manage">블로그 관리</button> 
                    </div>
										<div class="box-sns">
											
											
											
											
										</div>
									</div>
								</div>
              

            <!-- sidebar 02 -->
            
                  <!-- 카테고리 메뉴 -->
                  <div class="box-category box-category-2depth">
                    <nav>
                      <ul class="tt_category"><li class=""><a href="/category" class="link_tit"> 분류 전체보기 </a>
  <ul class="category_list"><li class=""><a href="/category/%EC%82%AC%EC%A7%84%28%EC%86%8C%EC%8A%A4%20%EA%B2%B8%EC%9A%A9%29" class="link_item"> 사진(소스 겸용) </a>
  <ul class="sub_category_list"><li class=""><a href="/category/%EC%82%AC%EC%A7%84%28%EC%86%8C%EC%8A%A4%20%EA%B2%B8%EC%9A%A9%29/%EB%82%B4%EC%82%AC%EC%A7%84" class="link_sub_item"> 내사진 </a></li>
<li class=""><a href="/category/%EC%82%AC%EC%A7%84%28%EC%86%8C%EC%8A%A4%20%EA%B2%B8%EC%9A%A9%29/%EC%B9%B4%ED%8E%98%20%EA%B8%80" class="link_sub_item"> 카페 글 </a></li>
<li class=""><a href="/category/%EC%82%AC%EC%A7%84%28%EC%86%8C%EC%8A%A4%20%EA%B2%B8%EC%9A%A9%29/%EA%B8%B0%ED%83%80" class="link_sub_item"> 기타 </a></li>
</ul>
</li>
<li class=""><a href="/category/%EC%9D%8C%EC%95%85%28%EC%86%8C%EC%8A%A4%EB%B3%B4%EA%B8%B0%29" class="link_item"> 음악(소스보기) </a>
  <ul class="sub_category_list"><li class=""><a href="/category/%EC%9D%8C%EC%95%85%28%EC%86%8C%EC%8A%A4%EB%B3%B4%EA%B8%B0%29/%ED%81%B4%EB%9E%98%EC%8B%9D" class="link_sub_item"> 클래식 </a></li>
<li class=""><a href="/category/%EC%9D%8C%EC%95%85%28%EC%86%8C%EC%8A%A4%EB%B3%B4%EA%B8%B0%29/%ED%8C%9D" class="link_sub_item"> 팝 </a></li>
<li class=""><a href="/category/%EC%9D%8C%EC%95%85%28%EC%86%8C%EC%8A%A4%EB%B3%B4%EA%B8%B0%29/%EC%9A%B0%EB%A6%AC%20%EA%B3%A1" class="link_sub_item"> 우리 곡 </a></li>
</ul>
</li>
<li class=""><a href="/category/%EC%B0%B8%EA%B3%A0" class="link_item"> 참고 </a>
  <ul class="sub_category_list"><li class=""><a href="/category/%EC%B0%B8%EA%B3%A0/%EC%9D%B8%EA%B0%84" class="link_sub_item"> 인간 </a></li>
<li class=""><a href="/category/%EC%B0%B8%EA%B3%A0/%EC%82%B0%EC%95%BC%EC%B4%88" class="link_sub_item"> 산야초 </a></li>
<li class=""><a href="/category/%EC%B0%B8%EA%B3%A0/%EA%B1%B4%EA%B0%95%EC%9D%BC%EB%B0%98" class="link_sub_item"> 건강일반 </a></li>
<li class=""><a href="/category/%EC%B0%B8%EA%B3%A0/%EA%B7%80%EC%B4%8C" class="link_sub_item"> 귀촌 </a></li>
<li class=""><a href="/category/%EC%B0%B8%EA%B3%A0/%EC%9D%8C%EC%8B%9D" class="link_sub_item"> 음식 </a></li>
<li class=""><a href="/category/%EC%B0%B8%EA%B3%A0/%EB%9D%BC%EC%98%A4%EC%8A%A4%EC%96%B4" class="link_sub_item"> 라오스어 </a></li>
<li class=""><a href="/category/%EC%B0%B8%EA%B3%A0/%EC%BB%B4%EA%B3%B5%EB%B6%80" class="link_sub_item"> 컴공부 </a></li>
<li class=""><a href="/category/%EC%B0%B8%EA%B3%A0/%EC%97%AC%ED%96%89%EC%A0%95%EB%B3%B4" class="link_sub_item"> 여행정보 </a></li>
<li class=""><a href="/category/%EC%B0%B8%EA%B3%A0/%EC%B7%A8%EB%AF%B8" class="link_sub_item"> 취미 </a></li>
<li class=""><a href="/category/%EC%B0%B8%EA%B3%A0/%EC%9E%A1%EB%8F%99%EC%82%AC%EB%8B%88" class="link_sub_item"> 잡동사니 </a></li>
<li class=""><a href="/category/%EC%B0%B8%EA%B3%A0/%EA%B7%B8%EC%99%B8" class="link_sub_item"> 그외 </a></li>
</ul>
</li>
<li class=""><a href="/category/%EA%B8%80%EB%AA%A8%EC%9D%8C" class="link_item"> 글모음 </a>
  <ul class="sub_category_list"><li class=""><a href="/category/%EA%B8%80%EB%AA%A8%EC%9D%8C/%EC%9E%91%EC%9D%80%EB%B0%B0" class="link_sub_item"> 작은배 </a></li>
<li class=""><a href="/category/%EA%B8%80%EB%AA%A8%EC%9D%8C/%ED%95%B4%EC%86%A1%28%E6%B5%B7%E6%9D%BE%20%29" class="link_sub_item"> 해송(海松 ) </a></li>
<li class=""><a href="/category/%EA%B8%80%EB%AA%A8%EC%9D%8C/50%2C60%20%EC%B9%B4%ED%8E%98" class="link_sub_item"> 50,60 카페 </a></li>
</ul>
</li>
<li class=""><a href="/category/%ED%8D%BC%EC%98%A8%20%EA%B2%83%EB%93%A4%28%EC%9E%84%EC%8B%9C%EC%A0%80%EC%9E%A5%29" class="link_item"> 퍼온 것들(임시저장) </a>
  <ul class="sub_category_list"><li class=""><a href="/category/%ED%8D%BC%EC%98%A8%20%EA%B2%83%EB%93%A4%28%EC%9E%84%EC%8B%9C%EC%A0%80%EC%9E%A5%29/%EA%B8%80" class="link_sub_item"> 글 </a></li>
<li class=""><a href="/category/%ED%8D%BC%EC%98%A8%20%EA%B2%83%EB%93%A4%28%EC%9E%84%EC%8B%9C%EC%A0%80%EC%9E%A5%29/%EC%9D%8C%EC%95%85%28%ED%99%94%EC%9D%BC%29" class="link_sub_item"> 음악(화일) </a></li>
<li class=""><a href="/category/%ED%8D%BC%EC%98%A8%20%EA%B2%83%EB%93%A4%28%EC%9E%84%EC%8B%9C%EC%A0%80%EC%9E%A5%29/%EB%B0%B1%EA%B3%BC%EC%82%AC%EC%A0%84" class="link_sub_item"> 백과사전 </a></li>
</ul>
</li>
</ul>
</li>
</ul>

                    </nav>
                  </div>
              
                <!-- 태그 -->
                <div class="box-tag">
                  <h3 class="title-sidebar">Tag</h3>
                  <div class="box_tag">
                    
                  </div>
                </div>
              
                <!-- 최근글과 인기글-->
                <div class="box-recent">
                  <h3 class="title-sidebar blind">최근글과 인기글</h3>
                  <ul class="tab-recent">
                    <li class="tab-button recent_button on"><a class="tab-button" href="#" onclick="return false;">최근글</a></li>
                    <li class="tab-button sidebar_button"><a class="tab-button" href="#" onclick="return false;">인기글</a></li>
                  </ul>
                  <ul class="list-recent">
                    
                  </ul>

                  <ul class="list-recent list-tab" style="display: none">
                    
                  </ul>
                </div>
              
                <!-- 최근댓글 -->
                <div class="box-reply">
                  <h3 class="title-sidebar">최근댓글</h3>
                  <ul class="list-sidebar">
                    
                  </ul>
                </div>
              
                <!-- 공지사항 -->
                
                  <div class="box-notice">
                    <h3 class="title-sidebar">공지사항</h3>
                    <ul class="list-sidebar">
                      
                    </ul>
                  </div>
                
              
                <!-- 페이스북 트위터 플러그인 -->
                <div class="box-plugins">
                  <h3 class="title-sidebar blind">페이스북 트위터 플러그인</h3>
                  <ul class="tab-sns">
                    <li class="tab-button item-facebook on"><a class="tab-button" href="#" onclick="return false;">Facebook</a></li>
                    <li class="tab-button item-twitter"><a class="tab-button" href="#" onclick="return false;">Twitter</a></li>
                  </ul>

                  <div class="plugin-facebook">
                    <div id="fb-root"></div>
                      <script>(function(d, s, id) {
                        var js, fjs = d.getElementsByTagName(s)[0];
                        if (d.getElementById(id)) return;
                        js = d.createElement(s); js.id = id;
                        js.src = '//connect.facebook.net/ko_KR/sdk.js#xfbml=1&version=v3.2&appId=360877073936113&autoLogAppEvents=1';
                        fjs.parentNode.insertBefore(js, fjs);
                      }(document, 'script', 'facebook-jssdk'));</script>
                    <div class="fb-page" data-href="" data-tabs="timeline" data-small-header="true" data-adapt-container-width="true" data-hide-cover="true" data-show-facepile="false"><blockquote cite="" class="fb-xfbml-parse-ignore"><a href=""></a></blockquote>
                    </div>
                  </div>

                  <div class="plugin-twitter" style="display: none;">
                    <a class="twitter-timeline" href=""></a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
                  </div>
                </div>
              
                <!-- 글 보관함 -->
                <div class="box-archive">
                  <h3 class="title-sidebar">Archives</h3>
                  <ul class="list-sidebar">
                    
                  </ul>
                </div>
              
                <!-- 달력 모듈-->
                <div class="box-calendar">
                  <h3 class="title-sidebar"><span class="blind">Calendar</span></h3>
                  <div class="inner-calendar"><table class="tt-calendar" cellpadding="0" cellspacing="1" style="width: 100%; table-layout: fixed">
  <caption class="cal_month"><a href="/archive/202504" title="1개월 앞의 달력을 보여줍니다.">«</a> &nbsp; <a href="/archive/202505" title="현재 달의 달력을 보여줍니다.">2025/05</a> &nbsp; <a href="/archive/202506" title="1개월 뒤의 달력을 보여줍니다.">»</a></caption>
  <thead>
    <tr>
      <th class="cal_week2">일</th>
      <th class="cal_week1">월</th>
      <th class="cal_week1">화</th>
      <th class="cal_week1">수</th>
      <th class="cal_week1">목</th>
      <th class="cal_week1">금</th>
      <th class="cal_week1">토</th>
    </tr>
  </thead>
  <tbody>
    <tr class="cal_week cal_current_week">
      <td class="cal_day1 cal_day2"> </td>
      <td class="cal_day1 cal_day2"> </td>
      <td class="cal_day1 cal_day2"> </td>
      <td class="cal_day1 cal_day2"> </td>
      <td class="cal_day cal_day3">1</td>
      <td class="cal_day cal_day3">2</td>
      <td class="cal_day cal_day3">3</td>
    </tr>
    <tr class="cal_week">
      <td class="cal_day cal_day3 cal_day_sunday">4</td>
      <td class="cal_day cal_day4">5</td>
      <td class="cal_day cal_day3">6</td>
      <td class="cal_day cal_day3">7</td>
      <td class="cal_day cal_day3">8</td>
      <td class="cal_day cal_day3">9</td>
      <td class="cal_day cal_day3">10</td>
    </tr>
    <tr class="cal_week">
      <td class="cal_day cal_day3 cal_day_sunday">11</td>
      <td class="cal_day cal_day3">12</td>
      <td class="cal_day cal_day3">13</td>
      <td class="cal_day cal_day3">14</td>
      <td class="cal_day cal_day3">15</td>
      <td class="cal_day cal_day3">16</td>
      <td class="cal_day cal_day3">17</td>
    </tr>
    <tr class="cal_week">
      <td class="cal_day cal_day3 cal_day_sunday">18</td>
      <td class="cal_day cal_day3">19</td>
      <td class="cal_day cal_day3">20</td>
      <td class="cal_day cal_day3">21</td>
      <td class="cal_day cal_day3">22</td>
      <td class="cal_day cal_day3">23</td>
      <td class="cal_day cal_day3">24</td>
    </tr>
    <tr class="cal_week">
      <td class="cal_day cal_day3 cal_day_sunday">25</td>
      <td class="cal_day cal_day3">26</td>
      <td class="cal_day cal_day3">27</td>
      <td class="cal_day cal_day3">28</td>
      <td class="cal_day cal_day3">29</td>
      <td class="cal_day cal_day3">30</td>
      <td class="cal_day cal_day3">31</td>
    </tr>
  </tbody>
</table></div>
                </div>
              
                <!-- 방문자수 -->
                <div class="box-visit">
                  <h3 class="title-sidebar"><span class="blind">방문자수</span>Total</h3>
                  <p class="text-total"></p>
                  <ul>
                    <li class="item-visit">Today : </li>
                    <li class="item-visit">Yesterday : </li>
                  </ul>
                </div>
              

						<!-- search-bar for MOBILE -->
						<div class="util use-sidebar">
							<div class="search">
                <label for="searchInput" class="screen_out">블로그 내 검색</label>
								<input id="searchInput" class="searchInput" type="text" name="search" value="" placeholder="검색내용을 입력하세요." onkeypress="if (event.keyCode == 13) { requestSearch('.util.use-sidebar .searchInput') }">
							</div>
						</div>

          </aside>
          <!-- // aside -->

        </main>
        <!-- // main -->
      </div>
      <!-- // container -->

    

    <!-- footer -->
      <footer id="footer">

        <div class="inner-footer">
          <div class="box-policy">
            
            
            
          </div>
          <div>
            <p class="text-info">Copyright © Kakao Corp. All rights reserved.</p>
            <address></address>
          </div>

          <div class="box-site">
            <button type="button" data-toggle="xe-dropdown" aria-expanded="false">관련사이트</button>
            <ul>
              
            </ul>
          </div>
        </div>

      </footer>
      <!-- // footer -->

    </div>
    <!-- // wrap -->
  
<div class="#menubar menu_toolbar ">
  <h2 class="screen_out">티스토리툴바</h2>
</div>
<div class="#menubar menu_toolbar "><div class="btn_tool btn_tool_type1" id="menubar_wrapper" data-tistory-react-app="Menubar"></div></div>
<div class="layer_tooltip">
  <div class="inner_layer_tooltip">
    <p class="desc_g"></p>
  </div>
</div>
<div id="editEntry" style="position:absolute;width:1px;height:1px;left:-100px;top:-100px"></div>


                <!-- DragSearchHandler - START -->
<script src="//search1.daumcdn.net/search/statics/common/js/g/search_dragselection.min.js"></script>

<!-- DragSearchHandler - END -->

        <!-- SyntaxHighlight - START -->
        <link href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/styles/atom-one-light.min.css" rel="stylesheet"/><script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/delphi.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/php.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/python.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/r.min.js" defer></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/ruby.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/scala.min.js" defer></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/shell.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/sql.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/swift.min.js" defer></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/typescript.min.js" defer></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.3/languages/vbnet.min.js" defer></script>
  <script>hljs.initHighlightingOnLoad();</script>


        <!-- SyntaxHighlight - END -->

                
                <div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div>
<script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/userblog-9b39e501cfa58eeb992c6807fdf4fea5b7937b59/static/script/common.js"></script>
<script type="text/javascript">window.roosevelt_params_queue = window.roosevelt_params_queue || [{channel_id: 'dk', channel_label: '{tistory}'}]</script>
<script type="text/javascript" src="//t1.daumcdn.net/midas/rt/dk_bt/roosevelt_dk_bt.js" async="async"></script>

                
                <script>window.tiara = {"svcDomain":"user.tistory.com","section":"글뷰","trackPage":"글뷰_보기","page":"글뷰","key":"5459911-14606002","customProps":{"userId":"0","blogId":"5459911","entryId":"14606002","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"14606002","entryTitle":"[스크랩] 테이블만들기 초급","entryType":"POST","categoryName":"참고/컴공부","categoryId":"1006801","serviceCategoryName":null,"serviceCategoryId":null,"author":"5462297","authorNickname":"한스 강","blogNmae":"한스 잡동사니 창고","image":"","plink":"/14606002","tags":[]},"kakaoAppKey":"3e6ddd834b023f24221217e370daed18","appUserId":"null"}</script>
<script type="module" src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index.js"></script>
<script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/polyfills-legacy.js" nomodule="true" defer="true"></script>
<script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.5/index-legacy.js" nomodule="true" defer="true"></script>

                </body>
</html>