HTML 만들기 - 초보자를 위한 단계별 가이드

1. HTML 소개

HTML 소개

HTML은 HyperText Markup Language의 약자로, 웹 페이지의 구조를 정의하기 위한 언어이다.
HTML은 여는 태그와 닫는 태그로 이루어져 있으며, 각 요소는 태그로 둘러싸여 있다.
HTML은 웹 브라우저가 문서를 해석하여 사용자에게 보여줄 수 있는 형식으로 변환된다.
HTML을 통해 제목, 단락, 이미지, 링크 등 다양한 콘텐츠를 웹 페이지에 표시할 수 있다.

2. HTML 기본 구조

<b>HTML</b> 기본 구조

HTML 문서는 보통 아래와 같은 기본 구조를 가지고 있어.

: 문서 유형을 정의하는 선언부터 시작해. 이 부분은 생략하지 않는 게 중요해.
: HTML 문서의 시작을 알리는 태그로, 모든 요소들을 감싸고 있어.
: 문서의 메타데이터를 담는 곳이야. 제목이나 외부 스타일 시트 링크 등이 여기 들어가.
</b>: 문서의 제목을 정의하는 태그로, 웹 브라우저 탭에 표시돼.</li> <li><b><body></b>: 실제 내용이 들어가는 부분으로, 사용자가 웹 페이지에서 볼 수 있는 건 대부분 여기에 위치해.</li> </ul> <p>위의 구조를 기억하면 HTML 문서를 작성하는 데 도움이 될 거야. 다음 단계에서는 각 요소를 자세히 살펴보자.</p> <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/tistory-902dc0cb26fb26d270f15e63a9e4a51a16e707a0/static/script/common.js"></script> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-902dc0cb26fb26d270f15e63a9e4a51a16e707a0/static/script/shortcut.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":"7061401-103","customProps":{"userId":"0","blogId":"7061401","entryId":"103","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"103","entryTitle":"HTML 만들기 - 초보자를 위한 단계별 가이드","entryType":"POST","categoryName":"일상정보","categoryId":"1439961","serviceCategoryName":null,"serviceCategoryId":null,"author":"6587120","authorNickname":"veony","blogNmae":"veony","image":"","plink":"/entry/HTML-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EC%B4%88%EB%B3%B4%EC%9E%90%EB%A5%BC-%EC%9C%84%ED%95%9C-%EB%8B%A8%EA%B3%84%EB%B3%84-%EA%B0%80%EC%9D%B4%EB%93%9C","tags":["html가이드","웹개발","웹디자인","초보자","코딩","프로그래밍"]},"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><p> </p> <p> </p> <h3>3. 텍스트 포맷팅</h3> <p> </p> <img src="https://images.unsplash.com/photo-1616553429514-916001949f22?w=800" alt="Formatting" style="width:100%;" /> <p> </p> ``` <ul> <li>텍스트를 <b>굵게</b> 표시하려면: <b><b></b> 태그 사용</li> <li>텍스트를 <b>기울임체</b>로 표시하려면: <b><i></b> 태그 사용</li> <li>텍스트를 <b>밑줄</b>로 표시하려면: <b><u></b> 태그 사용</li> <li>텍스트를 <b>취소선</b>으로 표시하려면: <b><s></b> 태그 사용</li> </ul> ```<p> </p> <p> </p> <h3>4. 링크 추가</h3> <p> </p> <img src="https://images.unsplash.com/photo-1607641067094-5bca68fabfe6?w=800" alt="Hyperlink" style="width:100%;" /> <p> </p> <ul> <li>텍스트 링크: <b><a href="링크 URL">링크 텍스트</a></b></li> <li>이미지를 클릭 가능한 링크로 만들기: <b><a href="링크 URL"><img src="이미지 URL" alt="대체 텍스트"></a></b></li> <li>새 탭에서 링크 열기: <b><a href="링크 URL" target="_blank">링크 텍스트</a></b></li> <li>내부 페이지로 이동하는 링크: <b><a href="상대 경로 URL">링크 텍스트</a></b></li> </ul><p> </p> <p> </p> <h3>5. 이미지 삽입</h3> <p> </p> <img src="https://images.unsplash.com/photo-1617458343913-22a55e25922d?w=800" alt="Alt attribute" style="width:100%;" /> <p> </p> <ul> <li>이미지를 삽입하려면 <b>img</b> 태그를 사용한다.</li> <li><b>src</b> 속성을 사용하여 이미지의 URL을 지정한다.</li> <li><b>alt</b> 속성은 이미지에 대한 대체 텍스트를 제공한다.</li> <li><b>width</b> 및 <b>height</b> 속성을 사용하여 이미지의 크기를 조절할 수 있다.</li> <li>이미지를 클릭 가능하게 하려면 <b>a</b> 태그를 사용하여 이미지를 링크로 만들 수 있다.</li> </ul><p> </p> <p> </p> <h3>6. 목록 사용</h3> <p> </p> <img src="https://images.unsplash.com/photo-1706647976492-ae07eb584f8f?w=800" alt="<ul>" style="width:100%;" /> <p> </p> <ul> <li><b>준비물</b>: 에디터, 브라우저</li> <li><b>단계</b>: 계획 수립, 구성요소 작성, 스타일 적용</li> <li><b>준수 사항</b>: 시맨틱한 태그 사용, 네스트된 목록 지양</li> </ul><p> </p> <p> </p> <h3>7. 표 만들기</h3> <p> </p> <img src="https://images.unsplash.com/photo-1495548054858-0e78bb72869e?w=800" alt="Table" style="width:100%;" /> <p> </p> <ul> <li>표는 HTML에서 데이터를 구조화하고 시각적으로 보기 쉽게 표시하는 방법 중 하나야.</li> <li>표를 만들 때에는 <b><table></b>, <b><tr></b>, <b><td></b> 태그들이 사용돼.</li> <li><b><table></b> 태그는 전체적인 표의 구조를 정의해주는데요, <b><tr></b> 태그는 표의 각 행을 나타내고, <b><td></b> 태그는 각 셀을 정의해.</li> <li>각 행 안에는 하나 이상의 셀이 들어가며, <b><td></b> 태그는 각 셀의 내용을 정의하는 역할을 한답니다.</li> <li>테이블의 행을 나타내는 <b><tr></b> 태그 안에는 각 셀을 나타내는 <b><td></b> 태그를 넣어주는 방식으로 표를 완성시킬 수 있어.</li> <li>표를 디자인하고자 할 때에는 CSS를 활용하여 표의 스타일을 변경하고 꾸밀 수 있어.</li> </ul><p> </p> <p> </p> <h3>8. 폼 구성요소 추가</h3> <p> </p> <img src="https://images.unsplash.com/photo-1627843240043-aa499ed215e7?w=800" alt="Form Elements" style="width:100%;" /> <p> </p> <ul> <li><b>input 요소:</b> 사용자로부터 입력을 받을 수 있는 필드를 만들 때 사용됩니다.</li> <li><b>label 요소:</b> 폼 요소에 라벨을 붙일 때 사용되며, 반드시 해당 폼 요소의 id와 연결되어야 합니다.</li> <li><b>button 요소:</b> 사용자가 클릭할 수 있는 버튼을 만들 때 사용됩니다.</li> <li><b>textarea 요소:</b> 여러 줄의 텍스트를 입력할 수 있는 입력 필드를 만들 때 사용됩니다.</li> <li><b>select 요소:</b> 드롭다운 목록을 만들 때 사용되며, <b>option</b> 요소를 사용하여 목록 항목을 정의할 수 있습니다.</li> </ul><p> </p> <p> </p> <h3>9. 실습 예제와 팁</h3> <p> </p> <img src="https://images.unsplash.com/photo-1580795478759-6ed0b6694ac1?w=800" alt="Practice" style="width:100%;" /> <p> </p> <ul> <li>실습 예제: 웹 페이지에 제목과 문단 넣기</li> <li><b>HTML 코드</b>: <pre> <!DOCTYPE html> <html> <head> <title><b>나만의 웹 페이지</b></title> </head> <body> <h1><b>안녕, 세상!</b></h1> <p><b>첫 웹 페이지를 만들어 봅시다.</b></p> </body> </html> </pre> </li> <li><b>팁 1</b>: 태그를 꼭 닫아야 합니다.</li> <li><b>팁 2</b>: 몇 가지 문법 오류가 있더라도 포기하지 마세요. 계속해서 고쳐가며 배웁시다.</li> <li><b>팁 3</b>: 자신만의 창의적인 디자인을 위해 CSS를 공부하면 도움이 됩니다.</li> </ul><p> </p> <p> </p> <h3>10. 참고 자료 및 더 배우기</h3> <p> </p> <img src="https://images.unsplash.com/photo-1642778771770-07e2afdd5187?w=800" alt="Resource" style="width:100%;" /> <p> </p> <ul> <li> <b>MDN Web Docs</b>: 웹 기술 관련 정보, 문서, 가이드, API 등의 풍부한 자료가 있음 </li> <li> <b>w3schools</b>: HTML, CSS, JavaScript 등 웹 기술의 튜토리얼과 예제를 제공 </li> <li> <b>Stack Overflow</b>: 웹 개발자들이 질문과 답변을 주고받는 커뮤니티 </li> <li> <b>CSS-Tricks</b>: 웹 디자인, CSS 관련 팁과 트릭을 소개하는 사이트 </li> <li> <b>Can I use</b>: 다양한 브라우저의 HTML, CSS, JavaScript 호환성 정보 확인 가능 </li> </ul><p> </p> <p> </p></div>   <script onerror="changeAdsenseToAdfit()" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9527582522912841" crossorigin="anonymous"></script>  <ins class="adsbygoogle" style="margin:50px 0; display:block" data-ad-client="ca-pub-9527582522912841" data-ad-slot="4947159016" data-ad-format="auto" data-full-width-responsive="true" data-ad-type="inventory" data-ad-adfit-unit="DAN-HCZEy0KQLPMGnGuC"></ins> <script id="adsense_script"> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <script> if(window.ObserveAdsenseUnfilledState !== undefined){ ObserveAdsenseUnfilledState(); } </script> <div class="container_postbtn #post_button_group"> <div class="postbtn_like"><script>window.ReactionButtonType = 'reaction'; window.ReactionApiUrl = '//veony.tistory.com/reaction'; window.ReactionReqBody = { entryId: 103 }</script> <div class="wrap_btn" id="reaction-103" 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="HTML 만들기 - 초보자를 위한 단계별 가이드" data-description="1. HTML 소개 HTML은 HyperText Markup Language의 약자로, 웹 페이지의 구조를 정의하기 위한 언어이다. HTML은 여는 태그와 닫는 태그로 이루어져 있으며, 각 요소는 태그로 둘러싸여 있다. HTML은 웹 브라우저가 문서를 해석하여 사용자에게 보여줄 수 있는 형식으로 변환된다. HTML을 통해 제목, 단락, 이미지, 링크 등 다양한 콘텐츠를 웹 페이지에 표시할 수 있다. 2. HTML 기본 구조 HTML 문서는 보통 아래와 같은 기본 구조를 가지고 있어. : 문서 유형을 정의하는 선언부터 시작해. .." data-profile-image="https://t1.daumcdn.net/tistory_admin/static/manage/images/r3/default_L.png" data-profile-name="veony" data-pc-url="https://veony.tistory.com/entry/HTML-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EC%B4%88%EB%B3%B4%EC%9E%90%EB%A5%BC-%EC%9C%84%ED%95%9C-%EB%8B%A8%EA%B3%84%EB%B3%84-%EA%B0%80%EC%9D%B4%EB%93%9C" data-relative-pc-url="/entry/HTML-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EC%B4%88%EB%B3%B4%EC%9E%90%EB%A5%BC-%EC%9C%84%ED%95%9C-%EB%8B%A8%EA%B3%84%EB%B3%84-%EA%B0%80%EC%9D%B4%EB%93%9C" data-blog-title="veony"><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="103" 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="7061401" data-url="https://veony.tistory.com/entry/HTML-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EC%B4%88%EB%B3%B4%EC%9E%90%EB%A5%BC-%EC%9C%84%ED%95%9C-%EB%8B%A8%EA%B3%84%EB%B3%84-%EA%B0%80%EC%9D%B4%EB%93%9C" data-device="web_pc" data-tiara-action-name="구독 버튼_클릭"><em class="txt_state"></em><strong class="txt_tool_id">veony</strong><span class="img_common_tistory ico_check_type1"></span></button><div class="postbtn_ccl" data-ccl-type="1" data-ccl-derive="2"> <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/deed.ko" target="_blank" class="link_ccl" rel="license"> <span class="bundle_ccl"> <span class="ico_postbtn ico_ccl1">저작자표시</span> <span class="ico_postbtn ico_ccl2">비영리</span> <span class="ico_postbtn ico_ccl3">변경금지</span> </span> </a> </div>  <div data-tistory-react-app="SupportButton"></div> </div>  <div class="another_category another_category_color_gray"> <h4>'<a href="/category/%EC%9D%BC%EC%83%81%EC%A0%95%EB%B3%B4">일상정보</a>' 카테고리의 다른 글</h4> <table> <tr> <th><a href="/entry/%EC%B4%88%EB%B3%B4%EC%9E%90%EB%A5%BC-%EC%9C%84%ED%95%9C-%EA%B0%9C%EC%9D%B8-%EC%9B%B9-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EB%8B%A8%EA%B3%84%EB%B3%84-%EA%B0%80%EC%9D%B4%EB%93%9C">초보자를 위한 개인 웹 사이트 만들기 - 단계별 가이드</a> <span>(0)</span></th> <td>2024.08.01</td> </tr> <tr> <th><a href="/entry/%EB%AF%B8%EC%88%A0%EC%9D%98-%EB%AF%B8%EB%9E%98-21-%EC%84%B8%EA%B8%B0-%EB%AF%B8%EC%88%A0%EC%9D%98-%EC%83%88%EB%A1%9C%EC%9A%B4-%EC%96%BC%EA%B5%B4">미술의 미래 - "21 세기 미술"의 새로운 얼굴</a> <span>(1)</span></th> <td>2024.08.01</td> </tr> <tr> <th><a href="/entry/123RF-%EC%97%AC%EC%84%B1-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%8D%94-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0">123RF 여성 이미지 - 더 알아보기</a> <span>(0)</span></th> <td>2024.07.31</td> </tr> <tr> <th><a href="/entry/%EC%9A%B4%EC%95%85%EC%82%B0-%EC%9E%90%EC%97%B0-%ED%9C%B4%EC%96%91%EB%A6%BC-%EC%86%8C%EA%B0%9C%EC%99%80-%EC%9D%B4%EC%9A%A9-%EC%95%88%EB%82%B4">운악산 자연 휴양림 소개와 이용 안내</a> <span>(0)</span></th> <td>2024.07.31</td> </tr> <tr> <th><a href="/entry/%ED%9A%A8%EA%B3%BC%EC%A0%81%EC%9D%B8-%EB%85%B8%EC%85%98-%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80-%EC%A0%9C%EC%9E%91-%EA%B0%80%EC%9D%B4%EB%93%9C">효과적인 노션 홈페이지 제작 가이드</a> <span>(0)</span></th> <td>2024.07.30</td> </tr> </table> </div>  </div> <div class="related-articles"> <h2>관련글</h2> <ul> <li> <a href="/entry/%EC%B4%88%EB%B3%B4%EC%9E%90%EB%A5%BC-%EC%9C%84%ED%95%9C-%EA%B0%9C%EC%9D%B8-%EC%9B%B9-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EB%A7%8C%EB%93%A4%EA%B8%B0-%EB%8B%A8%EA%B3%84%EB%B3%84-%EA%B0%80%EC%9D%B4%EB%93%9C?category=1439961"> <figure> </figure> <span class="title">초보자를 위한 개인 웹 사이트 만들기 - 단계별 가이드</span> </a> </li> <li> <a href="/entry/%EB%AF%B8%EC%88%A0%EC%9D%98-%EB%AF%B8%EB%9E%98-21-%EC%84%B8%EA%B8%B0-%EB%AF%B8%EC%88%A0%EC%9D%98-%EC%83%88%EB%A1%9C%EC%9A%B4-%EC%96%BC%EA%B5%B4?category=1439961"> <figure> </figure> <span class="title">미술의 미래 - "21 세기 미술"의 새로운 얼굴</span> </a> </li> <li> <a href="/entry/123RF-%EC%97%AC%EC%84%B1-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EB%8D%94-%EC%95%8C%EC%95%84%EB%B3%B4%EA%B8%B0?category=1439961"> <figure> </figure> <span class="title">123RF 여성 이미지 - 더 알아보기</span> </a> </li> <li> <a href="/entry/%EC%9A%B4%EC%95%85%EC%82%B0-%EC%9E%90%EC%97%B0-%ED%9C%B4%EC%96%91%EB%A6%BC-%EC%86%8C%EA%B0%9C%EC%99%80-%EC%9D%B4%EC%9A%A9-%EC%95%88%EB%82%B4?category=1439961"> <figure> </figure> <span class="title">운악산 자연 휴양림 소개와 이용 안내</span> </a> </li> </ul> </div> <div class="comments"> <div data-tistory-react-app="Namecard"></div> </div> </div> </article> <aside id="aside" class="sidebar"> <div class="sidebar-1">  <nav class="category"> <ul class="tt_category"><li class=""><a href="/category" class="link_tit"> 분류 전체보기 </a> <ul class="category_list"><li class=""><a href="/category/%EC%9D%BC%EC%83%81%EC%A0%95%EB%B3%B4" class="link_item"> 일상정보 </a></li> </ul> </li> </ul> </nav> </div> <div class="sidebar-2">  <div class="notice"> <h2>공지사항</h2> <ul> </ul> </div>  <div class="post-list tab-ui"> <div id="recent" class="tab-list"> <h2>최근글</h2> <ul> </ul> </div> <div id="popular" class="tab-list"> <h2>인기글</h2> <ul> </ul> </div> </div>  <div class="recent-comment"> <h2>최근댓글</h2> <ul> </ul> </div>  <div class="social-list tab-ui"> </div>  <div class="tags"> <h2>태그</h2> <a href="/tag/%ED%99%88%EC%9D%B8%ED%85%8C%EB%A6%AC%EC%96%B4">홈인테리어</a> <a href="/tag/%ED%98%B8%ED%85%94%EC%B6%94%EC%B2%9C">호텔추천</a> <a href="/tag/%EC%9A%B4%EB%8F%99">운동</a> <a href="/tag/%EB%B8%94%EB%A1%9C%EA%B7%B8%EC%A0%95%EB%B3%B4">블로그정보</a> <a href="/tag/%EB%94%94%EC%9E%90%EC%9D%B8%ED%8C%81">디자인팁</a> <a href="/tag/%EC%97%AC%ED%96%89%EA%B0%80%EC%9D%B4%EB%93%9C">여행가이드</a> <a href="/tag/%ED%8C%A8%EC%85%98">패션</a> <a href="/tag/%EC%84%B1%EC%9E%A5">성장</a> <a href="/tag/%ED%91%B8%EB%93%9C%EC%8A%A4%ED%83%80%EA%B7%B8%EB%9E%A8">푸드스타그램</a> <a href="/tag/%EC%9A%94%EB%A6%AC%EB%A0%88%EC%8B%9C%ED%94%BC">요리레시피</a> <a href="/tag/%ED%8E%B8%EC%95%88%ED%95%A8">편안함</a> <a href="/tag/%EB%8D%B0%EC%9D%BC%EB%A6%AC%EB%A3%A9">데일리룩</a> <a href="/tag/%EC%9E%90%EA%B8%B0%EA%B3%84%EB%B0%9C">자기계발</a> <a href="/tag/%EC%97%AC%ED%96%89">여행</a> <a href="/tag/%EC%97%AC%ED%96%89%EB%B8%94%EB%A1%9C%EA%B7%B8">여행블로그</a> <a href="/tag/%EC%9B%B9%EA%B0%9C%EB%B0%9C">웹개발</a> <a href="/tag/%ED%8A%B8%EB%A0%8C%EB%93%9C">트렌드</a> <a href="/tag/%EC%9D%B8%ED%85%8C%EB%A6%AC%EC%96%B4%EB%94%94%EC%9E%90%EC%9D%B8">인테리어디자인</a> <a href="/tag/%EC%98%A4%EB%8A%98%EC%9D%98%EC%A7%91">오늘의집</a> <a href="/tag/%EC%97%AC%ED%96%89%EC%B6%94%EC%B2%9C">여행추천</a> <a href="/tag/%ED%8A%B8%EB%A0%8C%EB%94%94">트렌디</a> <a href="/tag/%EC%9A%94%EB%A6%AC%EB%B8%94%EB%A1%9C%EA%B7%B8">요리블로그</a> <a href="/tag/%EB%94%94%EC%9E%90%EC%9D%B8%ED%8A%B8%EB%A0%8C%EB%93%9C">디자인트렌드</a> <a href="/tag/%EB%B7%B0%ED%8B%B0%ED%8C%81">뷰티팁</a> <a href="/tag/%ED%8C%A8%EC%85%98%EB%B8%8C%EB%9E%9C%EB%93%9C">패션브랜드</a> <a href="/tag/%EC%8A%A4%ED%8A%B8%EB%A6%BF%ED%8C%A8%EC%85%98">스트릿패션</a> <a href="/tag/%ED%99%88%EC%BF%A1">홈쿡</a> <a href="/tag/%EC%8A%A4%ED%83%80%EC%9D%BC">스타일</a> <a href="/tag/%EB%B8%94%EB%A1%9C%EA%B7%B8">블로그</a> <a href="/tag/%EB%A7%9B%EC%9E%88%EB%8A%94%EC%9D%8C%EC%8B%9D">맛있는음식</a> </div>  <div class="count"> <h2>전체 방문자</h2> <p class="total"></p> <p>Today : </p> <p>Yesterday : </p> </div>  <div class="social-channel"> <ul> </ul> </div> </div> </aside> </div> </section> <hr> <footer id="footer"> <div class="inner"> <div class="order-menu"> </div> <a href="#" class="page-top">TOP</a> <p class="meta">Designed by 티스토리</p> <p class="copyright">© Kakao Corp.</p> </div> </footer> </div> <script src="https://tistory1.daumcdn.net/tistory/7061401/skin/images/script.js?_version_=1715087777"></script> <div class="#menubar menu_toolbar "> <h2 class="screen_out">티스토리툴바</h2> </div> <div class="#menubar menu_toolbar "></div> <div class="layer_tooltip"> <div class="inner_layer_tooltip"> <p class="desc_g"></p> </div> </div> <iframe id="editEntry" style="position:absolute;width:1px;height:1px;left:-100px;top:-100px" src="//veony.tistory.com/api"></iframe>  <script src="//search1.daumcdn.net/search/statics/common/js/g/search_dragselection.min.js"></script>   <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>  </body> </html>