본문 바로가기
알짜정보

초보자를 위한 HTML 웹 사이트 제작 가이드

by 일기의하루 2024. 7. 30.

1. HTML 기본 구조

 

Semantic HTML

 

```html HTML 기본 구조

HTML 기본 구조

웹 페이지를 구성하는 기본적인 HTML 구조는 다음과 같습니다:

  • : 문서 형식을 정의하는 선언부
  • : 전체 HTML 문서를 감싸는 최상위 요소
  • : 문서의 정보를 담는 요소
  • </b>: 문서의 제목을 정의하는 요소</li> <li><b><body></b>: 실제 내용을 담는 요소</li> </ul> <p>위 요소들을 조합하여 웹 페이지의 기본 구조를 만들 수 있습니다.</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-b1256873150c15c7114aaf063952a438e6675e67/static/script/common.js"></script> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-b1256873150c15c7114aaf063952a438e6675e67/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":"6317818-223","customProps":{"userId":"0","blogId":"6317818","entryId":"223","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"223","entryTitle":"초보자를 위한 HTML 웹 사이트 제작 가이드","entryType":"POST","categoryName":"알짜정보","categoryId":"1106274","serviceCategoryName":null,"serviceCategoryId":null,"author":"6170266","authorNickname":"일기의하루","blogNmae":"일기의하루","image":"","plink":"/223","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>2. 텍스트 요소</h3> <p> </p> <img src="https://images.unsplash.com/photo-1510772314292-9c0ad420734a?w=800" alt="Semantic Elements" style="width:100%;" /> <p> </p> ```html <ul> <li><b>제목(title)</b>: 웹 페이지의 제목을 정의하는 태그</li> <li><b>단락(p)</b>: 문단을 구분하는 태그</li> <li><b>강조(em)</b>: 단어나 구를 강조하는 태그</li> <li><b>굵게(strong)</b>: 내용을 더 강조하기 위한 태그</li> <li><b>하이퍼링크(a)</b>: 다른 페이지로 연결하는 링크를 생성하는 태그</li> </ul> ```<p> </p> <p> </p> <h3>3. 이미지 삽입</h3> <p> </p> <img src="https://images.unsplash.com/photo-1617458343913-22a55e25922d?w=800" alt="Alt attribute" style="width:100%;" /> <p> </p> ```html <p>이미지를 웹 페이지에 삽입하는 방법을 알려줄게. 이미지를 삽입할 때에는 <b>img</b> 태그를 사용해야 해. 아래는 이미지 삽입하는 방법을 설명한 목록이야:</p> <ul> <li><b>src</b>: 이미지 파일의 주소를 지정해야 해. "src" 속성을 사용해서 이미지 파일의 경로를 정확히 입력해야 해.</li> <li><b>alt</b>: 이미지를 설명하는 텍스트를 제공해야 해. "alt" 속성을 활용해서 이미지를 설명하는 간단한 텍스트를 넣어야 해.</li> <li><b>width</b> 및 <b>height</b>: 이미지의 폭과 높이를 설정할 수 있어. "width"와 "height" 속성을 사용해서 이미지의 크기를 조절할 수 있어.</li> </ul> <p>이렇게 쉽게 이미지를 웹 페이지에 삽입하는 방법을 익혔다면, 이제 멋진 이미지들로 웹 페이지를 더욱 생생하게 만들어보는 건 어때?</p> ```<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> ```html <ul> <li>웹 사이트 제목 추가: <b>href</b> 속성 사용</li> <li>내부 페이지로 이동하는 링크 추가: <b>상대 경로</b> 이용</li> <li>새 창에서 링크 열기: <b>target=”_blank”</b> 속성 활용</li> </ul> ```<p> </p> <p> </p> <h3>5. 목록 요소</h3> <p> </p> <p> </p> <ol> <li><b>첫 번째 항목</b>: 이것은 첫 번째 목록 요소입니다. 어쩌구 저쩌구 특징을 가지고 있습니다.</li> <li><b>두 번째 항목</b>: 이것은 두 번째 목록 요소입니다. 어쩌구 저쩌구 내용이 있습니다.</li> <li><b>세 번째 항목</b>: 이것은 세 번째 목록 요소로, 중요한 내용을 담고 있습니다.</li> </ol><p> </p> <p> </p> <h3>6. 테이블 생성</h3> <p> </p> <img src="https://images.unsplash.com/photo-1573805672213-81b449b17e8a?w=800" alt="Responsive design" style="width:100%;" /> <p> </p> ```html <h2>테이블 생성</h2> <p>웹 사이트에서 정보를 구조적으로 보여주는 테이블은 매우 유용합니다. 테이블을 생성하고 싶다면 아래 단계를 따라주세요.</p> <ol> <li><b><table></b> 태그를 사용하여 테이블을 시작합니다.</li> <li><b><tr></b> 태그를 사용하여 각 행(row)을 나타냅니다.</li> <li><b><th></b> 태그를 사용하여 제목 셀(header cell)을 만듭니다.</li> <li><b><td></b> 태그를 사용하여 일반 셀(data cell)을 만듭니다.</li> <li>테이블을 마칠 때에는 <b></table></b> 태그로 닫아줍니다.</li> </ol> ```<p> </p> <p> </p> <h3>7. 폼 요소</h3> <p> </p> <p> </p> ```html <ul> <li><b>폼 요소</b>란 사용자로부터 정보나 데이터를 입력받을 수 있는 HTML 요소들을 말해.</li> <li><b>폼 요소</b> 중에서 가장 많이 사용되는 것이 <b>input</b> 요소야.</li> <li><b>input</b> 요소는 여러 종류의 입력을 받을 수 있는데, 그 종류를 지정하는데에는 <b>type</b> 속성을 사용해.</li> <li>주요한 <b>input</b> 요소 타입으로는 <b>text, password, radio, checkbox, submit, reset</b> 등이 있어.</li> <li>그리고, <b>label</b> 요소를 이용하면 <b>input</b> 요소에 설명을 추가할 수 있어.</li> </ul> ```<p> </p> <p> </p> <h3>8. 반응형 웹 디자인 기본 개념</h3> <p> </p> <img src="https://images.unsplash.com/photo-1599332470533-6099b2e63f25?w=800" alt="Media Queries" style="width:100%;" /> <p> </p> <ul> <li><b>반응형 웹 디자인</b>: 사용자 장치의 화면 크기에 따라 웹 사이트 레이아웃이 변화하여 최적의 경험을 제공하는 디자인 접근법</li> <li><b>미디어 쿼리</b>: CSS3의 일부로, 장치 특징에 따라 스타일을 적용하기 위한 기술</li> <li><b>이미지 유연성</b>: 화면 크기에 따라 이미지 크기가 유동적으로 조절되어 선명한 화질을 유지하는 기능</li> <li><b>플러이드 그리드</b>: 백분율로 지정된 너비를 가진 그리드 시스템을 사용하여 화면에 맞춰 유연하게 배치하는 기법</li> </ul><p> </p> <p> </p></div> <!-- System - START --> <!-- System - END --> <script onerror="changeAdsenseToAdfit()" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-9527582522912841" crossorigin="anonymous"></script> <!-- inventory --> <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 = '//diary-info.tistory.com/reaction'; window.ReactionReqBody = { entryId: 223 }</script> <div class="wrap_btn" id="reaction-223" 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 HTML 기본 구조 웹 페이지를 구성하는 기본적인 HTML 구조는 다음과 같습니다: : 문서 형식을 정의하는 선언부 : 전체 HTML 문서를 감싸는 최상위 요소 : 문서의 정보를 담는 요소 : 문서의 제목을 정의하는 요소 : 실제 내용을 담는 요소 위 요소들을 조합하여 웹 페이지의 기본 구조를 만들 수 있습니다. ```  2. 텍스트 요소  ```html 제목(title): 웹 페이지의 제목을 정의하는 태그 .." data-profile-image="https://t1.daumcdn.net/tistory_admin/static/manage/images/r3/default_L.png" data-profile-name="일기의하루" data-pc-url="https://diary-info.tistory.com/entry/%EC%B4%88%EB%B3%B4%EC%9E%90%EB%A5%BC-%EC%9C%84%ED%95%9C-HTML-%EC%9B%B9-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EC%A0%9C%EC%9E%91-%EA%B0%80%EC%9D%B4%EB%93%9C" data-relative-pc-url="/entry/%EC%B4%88%EB%B3%B4%EC%9E%90%EB%A5%BC-%EC%9C%84%ED%95%9C-HTML-%EC%9B%B9-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EC%A0%9C%EC%9E%91-%EA%B0%80%EC%9D%B4%EB%93%9C" 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="223" 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="6317818" data-url="https://diary-info.tistory.com/entry/%EC%B4%88%EB%B3%B4%EC%9E%90%EB%A5%BC-%EC%9C%84%ED%95%9C-HTML-%EC%9B%B9-%EC%82%AC%EC%9D%B4%ED%8A%B8-%EC%A0%9C%EC%9E%91-%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">일기의하루</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> <!-- <rdf:RDF xmlns="https://web.resource.org/cc/" xmlns:dc="https://purl.org/dc/elements/1.1/" xmlns:rdf="https://www.w3.org/1999/02/22-rdf-syntax-ns#"> <Work rdf:about=""> <license rdf:resource="https://creativecommons.org/licenses/by-nc-nd/4.0/deed.ko" /> </Work> <License rdf:about="https://creativecommons.org/licenses/by-nc-nd/4.0/deed.ko"> <permits rdf:resource="https://web.resource.org/cc/Reproduction"/> <permits rdf:resource="https://web.resource.org/cc/Distribution"/> <requires rdf:resource="https://web.resource.org/cc/Notice"/> <requires rdf:resource="https://web.resource.org/cc/Attribution"/> <prohibits rdf:resource="https://web.resource.org/cc/CommercialUse"/> </License> </rdf:RDF> --> <div data-tistory-react-app="SupportButton"></div> </div> <!-- PostListinCategory - START --> <div class="another_category another_category_color_gray"> <h4>'<a href="/category/%EC%95%8C%EC%A7%9C%EC%A0%95%EB%B3%B4">알짜정보</a>' 카테고리의 다른 글</h4> <table> <tr> <th><a href="/entry/%EC%95%84%EB%A6%84%EB%8B%A4%EC%9A%B4-%EB%85%B8%EC%9D%84-%EC%82%AC%EC%A7%84-%EB%AA%A8%EC%9D%8C-%EC%9E%90%EC%97%B0%EC%9D%98-%EC%95%84%EB%A6%84%EB%8B%A4%EC%9B%80-%EB%8B%B4%EC%95%84%EB%82%B4%EB%8B%A4">아름다운 노을 사진 모음 - 자연의 아름다움 담아내다</a>  <span>(0)</span></th> <td>2024.07.31</td> </tr> <tr> <th><a href="/entry/%EC%99%93%EC%B1%A0-%EC%98%81%ED%99%94-%EB%8B%A4%EC%96%91%ED%95%9C-%EC%9E%A5%EB%A5%B4%EC%9D%98-%EC%9D%B8%EA%B8%B0-%EC%98%81%ED%99%94-%EC%B6%94%EC%B2%9C">왓챠 영화 - 다양한 장르의 인기 영화 추천</a>  <span>(0)</span></th> <td>2024.07.30</td> </tr> <tr> <th><a href="/entry/%EC%97%AC%EC%84%B1%EC%9D%84-%EC%9C%84%ED%95%9C-%EC%B5%9C%EC%8B%A0-%EC%8B%A4%EB%82%B4-%EC%88%98%EC%98%81%EB%B3%B5-%ED%8A%B8%EB%A0%8C%EB%93%9C-2021">여성을 위한 최신 실내 수영복 트렌드 2021</a>  <span>(0)</span></th> <td>2024.07.29</td> </tr> <tr> <th><a href="/entry/%EC%95%A0%EB%A1%9C-%EC%98%81%ED%99%94-%EA%B0%90%EC%84%B1%EC%9D%84-%EC%9E%90%EA%B7%B9%ED%95%98%EB%8A%94-%EA%B0%90%EC%A0%95%EC%9D%98-%EC%84%B8%EA%B3%84">애로 영화 - 감성을 자극하는 감정의 세계</a>  <span>(0)</span></th> <td>2024.07.29</td> </tr> <tr> <th><a href="/entry/%EC%9B%90%ED%84%B0%EC%B9%98-%EC%89%98%ED%84%B0-%ED%8E%B8%EB%A6%AC%ED%95%98%EA%B3%A0-%EA%B0%95%EB%A0%A5%ED%95%9C-%EB%B3%B4%ED%98%B8-%EC%86%94%EB%A3%A8%EC%85%98">원터치 쉘터 - 편리하고 강력한 보호 솔루션</a>  <span>(1)</span></th> <td>2024.07.25</td> </tr> </table> </div> <!-- PostListinCategory - END --> </div> <div class="related-articles"> <h2>관련글</h2> <ul> <li> <a href="/entry/%EC%95%84%EB%A6%84%EB%8B%A4%EC%9A%B4-%EB%85%B8%EC%9D%84-%EC%82%AC%EC%A7%84-%EB%AA%A8%EC%9D%8C-%EC%9E%90%EC%97%B0%EC%9D%98-%EC%95%84%EB%A6%84%EB%8B%A4%EC%9B%80-%EB%8B%B4%EC%95%84%EB%82%B4%EB%8B%A4?category=1106274"> <figure> </figure> <span class="title">아름다운 노을 사진 모음 - 자연의 아름다움 담아내다</span> </a> </li> <li> <a href="/entry/%EC%99%93%EC%B1%A0-%EC%98%81%ED%99%94-%EB%8B%A4%EC%96%91%ED%95%9C-%EC%9E%A5%EB%A5%B4%EC%9D%98-%EC%9D%B8%EA%B8%B0-%EC%98%81%ED%99%94-%EC%B6%94%EC%B2%9C?category=1106274"> <figure> </figure> <span class="title">왓챠 영화 - 다양한 장르의 인기 영화 추천</span> </a> </li> <li> <a href="/entry/%EC%97%AC%EC%84%B1%EC%9D%84-%EC%9C%84%ED%95%9C-%EC%B5%9C%EC%8B%A0-%EC%8B%A4%EB%82%B4-%EC%88%98%EC%98%81%EB%B3%B5-%ED%8A%B8%EB%A0%8C%EB%93%9C-2021?category=1106274"> <figure> </figure> <span class="title">여성을 위한 최신 실내 수영복 트렌드 2021</span> </a> </li> <li> <a href="/entry/%EC%95%A0%EB%A1%9C-%EC%98%81%ED%99%94-%EA%B0%90%EC%84%B1%EC%9D%84-%EC%9E%90%EA%B7%B9%ED%95%98%EB%8A%94-%EA%B0%90%EC%A0%95%EC%9D%98-%EC%84%B8%EA%B3%84?category=1106274"> <figure> </figure> <span class="title">애로 영화 - 감성을 자극하는 감정의 세계</span> </a> </li> </ul> </div> <div class="comments"> <h2>댓글<span class="count"></span></h2> <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%95%8C%EC%A7%9C%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> <!-- Facebook/Twitter --> <div class="social-list tab-ui"> </div> <!-- 태그 --> <div class="tags"> <h2>태그</h2> <a href="/tag/%EB%B7%B0%ED%8B%B0%ED%8C%81">뷰티팁</a> <a href="/tag/%EB%B7%B0%ED%8B%B0">뷰티</a> <a href="/tag/%EB%B8%94%EB%A1%9C%EA%B7%B8">블로그</a> <a href="/tag/%EB%B8%94%EB%A1%9C%EA%B7%B8%EC%A0%95%EB%B3%B4">블로그정보</a> <a href="/tag/%EC%98%81%ED%99%94%EB%A6%AC%EB%B7%B0">영화리뷰</a> <a href="/tag/%EC%8A%A4%ED%83%80%EC%9D%BC">스타일</a> <a href="/tag/%ED%95%B4%EC%8B%9C%ED%83%9C%EA%B7%B8">해시태그</a> <a href="/tag/%EC%9D%B8%ED%85%8C%EB%A6%AC%EC%96%B4">인테리어</a> <a href="/tag/%EA%B8%80%EC%93%B0%EA%B8%B0">글쓰기</a> <a href="/tag/%ED%97%A4%EC%96%B4%EC%8A%A4%ED%83%80%EC%9D%BC">헤어스타일</a> <a href="/tag/%EC%8A%A4%ED%83%80%EC%9D%BC%EB%A7%81">스타일링</a> <a href="/tag/%ED%8A%B8%EB%A0%8C%EB%93%9C">트렌드</a> <a href="/tag/SEO">SEO</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/%ED%99%98%EA%B2%BD%EB%B3%B4%ED%98%B8">환경보호</a> <a href="/tag/%EA%B2%80%EC%83%89%EC%97%94%EC%A7%84%EC%B5%9C%EC%A0%81%ED%99%94">검색엔진최적화</a> <a href="/tag/%EC%9D%B8%ED%85%8C%EB%A6%AC%EC%96%B4%EC%95%84%EC%9D%B4%EB%94%94%EC%96%B4">인테리어아이디어</a> <a href="/tag/%EB%AA%A9%ED%91%9C%EB%8B%AC%EC%84%B1">목표달성</a> <a href="/tag/%EC%97%AD%EC%82%AC">역사</a> <a href="/tag/%EC%A0%95%EB%B3%B4%EA%B8%80">정보글</a> <a href="/tag/%EC%82%AC%EC%9A%A9%ED%9B%84%EA%B8%B0">사용후기</a> <a href="/tag/%ED%99%88%EC%9D%B8%ED%85%8C%EB%A6%AC%EC%96%B4">홈인테리어</a> <a href="/tag/%ED%8C%A8%EC%85%98">패션</a> <a href="/tag/%EC%A0%95%EB%B3%B4">정보</a> <a href="/tag/%EB%94%94%EC%9E%90%EC%9D%B8">디자인</a> <a href="/tag/%EB%B8%94%EB%A1%9C%EA%B7%B8%EA%B8%80">블로그글</a> <a href="/tag/%EC%9E%90%EA%B8%B0%EA%B3%84%EB%B0%9C">자기계발</a> <a href="/tag/%ED%99%88%EC%BF%A1">홈쿡</a> <a href="/tag/%EB%A7%9B%EC%A7%91%EC%B6%94%EC%B2%9C">맛집추천</a> <a href="/tag/%EC%9D%B8%ED%85%8C%EB%A6%AC%EC%96%B4%EC%86%8C%ED%92%88">인테리어소품</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/6317818/skin/images/script.js?_version_=1715870627"></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="//diary-info.tistory.com/api"></iframe> <!-- 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 --> </body> </html>