HTML을 활용한 홈페이지 제작 가이드

1. HTML 기본 구조

HTML 기본 구조

HTML은 웹 페이지의 구조를 정의하는 언어로, 다음과 같은 구조를 갖추고 있다.

: HTML 문서의 버전을 지정하는 선언부이다.
: HTML 문서의 시작과 끝을 감싸는 최상위 요소이며, 모든 요소의 부모다.
: 웹 페이지 제목, 메타데이터, 외부 스타일 시트 등을 포함하는 요소다.
: 실제 내용이 들어가는 부분으로, 사용자에게 보여지는 내용이 포함된다.
</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-ca4388dc0a651c2b3f7e5d621b4f57e49eb8bea8/static/script/common.js"></script> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-ca4388dc0a651c2b3f7e5d621b4f57e49eb8bea8/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":"6317822-234","customProps":{"userId":"0","blogId":"6317822","entryId":"234","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"234","entryTitle":"HTML을 활용한 홈페이지 제작 가이드","entryType":"POST","categoryName":"정보모음","categoryId":"1110232","serviceCategoryName":null,"serviceCategoryId":null,"author":"6170266","authorNickname":"창진이의정보글","blogNmae":"창진이의정보글","image":"","plink":"/entry/HTML%EC%9D%84-%ED%99%9C%EC%9A%A9%ED%95%9C-%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","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> <p> </p> 텍스트 포맷팅은 웹페이지를 더욱 매력적으로 만들어주는 중요한 요소야. <b>굵은 글씨</b>, <i>기울임 글씨</i>, <u>밑줄 글씨</u>는 주로 사용되는 기본 스타일이야. 텍스트에 색상도 입힐 수 있어. <font color="red">빨간색 텍스트</font>나 <font color="blue">파란색 텍스트</font> 같은 식으로 사용 가능한 거야. 페이지에 주요 내용을 강조하기 위해서는 <b>중요한 부분</b>을 꼭 <b>굵게</b> 표시해줘. 리스트는 <ul>과 <li> 태그로 감싸 쉽게 만들 수 있어. 이렇게 작성하면 가독성도 높아져. 요약하자면, 텍스트 포맷팅은 웹페이지를 더욱 눈에 띄게 만들어줘.<p> </p> <p> </p> <h3>3. 링크 생성</h3> <p> </p> <img src="https://images.unsplash.com/photo-1578417827799-062058dc06bf?w=800" alt="Anchor Tag" style="width:100%;" /> <p> </p> ```html <p>메뉴 항목을 다른 페이지로 연결하려면 <b><a></b> 태그를 사용합니다.</p> <ul> <li>다른 웹페이지로 이동하는 외부 링크를 생성하려면 <b><a href="링크주소"></b> 내용 </a>를 사용합니다.</li> <li>같은 페이지 내의 특정 부분으로 이동하는 내부 링크를 생성하려면 해당 부분에 <b>id</b> 속성을 추가하고, <b><a href="#부분id"></b> 내용 </a>를 사용합니다.</li> <li>새 탭이나 새 창에서 링크를 열고 싶다면 <b>target="_blank"</b> 속성을 추가합니다.</li> </ul> ```<p> </p> <p> </p> <h3>4. 이미지 삽입</h3> <p> </p> <img src="https://images.unsplash.com/photo-1716840580875-11e15797b122?w=800" alt="Alt text" style="width:100%;" /> <p> </p> <ul> <li>이미지를 삽입하려면 <b>img</b> 태그를 사용한다.</li> <li><b>src</b> 속성에 이미지 파일의 경로를 지정해야 한다.</li> <li><b>alt</b> 속성을 이용해 이미지의 대체 텍스트를 추가할 수 있다.</li> <li>이미지의 가로 너비와 세로 높이는 <b>width</b>와 <b>height</b> 속성으로 조절할 수 있다.</li> <li>필요에 따라 <b>title</b> 속성을 이용하여 이미지에 추가 설명을 달아줄 수 있다.</li> </ul><p> </p> <p> </p> <h3>5. 목록 생성</h3> <p> </p> <img src="https://images.unsplash.com/photo-1706647976492-ae07eb584f8f?w=800" alt="`<ul>`" style="width:100%;" /> <p> </p> <ul> <li><b>HTML 기본 구조</b> - 웹페이지의 기본이 되는 구조를 이해한다.</li> <li><b>텍스트 편집</b> - 제목, 단락, 강조 효과 등 텍스트를 다루는 방법을 알아본다.</li> <li><b>링크 생성</b> - 다른 페이지로 이동하거나 파일을 다운로드할 수 있는 링크를 생성하는 방법에 대해 학습한다.</li> <li><b>이미지 삽입</b> - 이미지를 웹페이지에 삽입하는 방법과 주의할 점을 배운다.</li> <li><b>목록 생성</b> - 순서 있는 목록과 순서 없는 목록을 만드는 방법에 대해 자세히 알아본다.</li> </ul><p> </p> <p> </p> <h3>6. 테이블 생성</h3> <p> </p> <img src="https://images.unsplash.com/photo-1495548054858-0e78bb72869e?w=800" alt="Table" style="width:100%;" /> <p> </p> <h3>테이블 생성</h3> <p><b>테이블 생성</b>은 웹페이지의 레이아웃을 구성하는 데 중요한 역할을 한다. 테이블을 사용하여 컨텐츠를 구조화하고 배치할 수 있다.</p> <ul> <li><b><table></b> 태그를 사용하여 테이블을 생성한다.</li> <li><b><tr></b> 태그를 사용하여 테이블의 행을 생성한다.</li> <li><b><td></b> 태그를 사용하여 테이블의 셀을 생성한다.</li> <li><b>테이블 속성</b>을 활용하여 테이블의 스타일과 속성을 조절할 수 있다.</li> </ul> <p>테이블을 생성할 때, 각 요소의 역할과 관계를 명확히 이해하고 구조적으로 구성하는 것이 중요하다.</p><p> </p> <p> </p> <h3>7. 폼 생성</h3> <p> </p> <img src="https://images.unsplash.com/photo-1520364729339-dcee97a284ff?w=800" alt="Form building" style="width:100%;" /> <p> </p> <ul> <li><b>텍스트 입력 필드</b> - 사용자가 텍스트를 입력할 수 있는 공간.</li> <li><b>비밀번호 입력 필드</b> - 비밀번호를 입력받을 수 있는 공간으로 입력한 내용이 가려짐.</li> <li><b>라디오 버튼</b> - 여러 옵션 중 하나를 선택할 수 있는 방법을 제공.</li> <li><b>체크 박스</b> - 다수의 옵션을 선택할 수 있는 상자.</li> <li><b>드롭다운 목록</b> - 여러 옵션 중 하나를 선택할 수 있는 리스트.</li> <li><b>버튼</b> - 클릭하면 어떤 동작을 수행하는 요소.</li> </ul><p> </p> <p> </p> <h3>8. HTML5 요소들</h3> <p> </p> <img src="https://images.unsplash.com/photo-1510772314292-9c0ad420734a?w=800" alt="Semantic Elements" style="width:100%;" /> <p> </p> <ul> <li><b>header</b>: 웹 페이지나 섹션의 머리말을 정의하는 요소</li> <li><b>nav</b>: 네비게이션 링크 집합을 정의하는 요소</li> <li><b>section</b>: 문서의 섹션을 정의하며 주제나 콘텐츠의 연속을 그룹화함</li> <li><b>article</b>: 독립적으로 구별되거나 재사용 가능한 콘텐츠를 정의하는 요소</li> <li><b>aside</b>: 사이드바 콘텐츠를 정의하는 요소</li> <li><b>footer</b>: 웹 페이지나 섹션의 바닥글을 정의하는 요소</li> <li><b>main</b>: 주요 콘텐츠를 표시하는 요소</li> <li><b>figure</b>: 독립적인 콘텐츠를 정의하거나 설명하는 요소</li> <li><b>figcaption</b>: figure 요소의 캡션을 정의하는 요소</li> </ul><p> </p> <p> </p> <h3>9. CSS와의 협업</h3> <p> </p> <img src="https://images.unsplash.com/photo-1573805672213-81b449b17e8a?w=800" alt="Responsive design" style="width:100%;" /> <p> </p> <ul> <li><b>CSS와 HTML 분리</b>하기</li> <li><b>클래스와 ID 선택자</b>를 활용한 스타일링</li> <li><b>상속</b>을 이해하고 활용하기</li> <li><b>반응형 웹디자인</b>을 위한 미디어쿼리 사용법 숙지하기</li> <li><b>CSS 전처리기</b>의 장단점 알기</li> </ul><p> </p> <p> </p> <h3>10. 반응형 웹 디자인</h3> <p> </p> <img src="https://images.unsplash.com/photo-1599332470533-6099b2e63f25?w=800" alt="Media queries" style="width:100%;" /> <p> </p> ```html <p>반응형 웹 디자인은 모바일, 태블릿, 데스크톱과 같은 다양한 디바이스에서 웹사이트가 최적으로 보이도록 만드는 중요한 요소다.</p> <ul> <li><b>미디어 쿼리(Media Queries)</b>: 미디어 쿼리를 활용해 디바이스 화면의 너비나 해상도에 따라 스타일을 다르게 적용할 수 있다.</li> <li><b>유연한 그리드 시스템</b>: 그리드 시스템을 활용하여 화면 크기에 따라 레이아웃을 조절할 수 있다.</li> <li><b>이미지 및 미디어 콘텐츠 처리</b>: 이미지나 동영상 같은 미디어 콘텐츠도 반응형으로 제공하여 사용자 경험을 향상시킬 수 있다.</li> <li><b>탭 숨김</b>: 작은 화면에서는 보통 메뉴와 같은 요소를 숨기고 아이콘으로 사용자가 터치할 수 있도록 한다.</li> </ul> ```<p> </p> <p> </p></div>   <div class="container_postbtn #post_button_group"> <div class="postbtn_like"><script>window.ReactionButtonType = 'reaction'; window.ReactionApiUrl = '//changjininfo.tistory.com/reaction'; window.ReactionReqBody = { entryId: 234 }</script> <div class="wrap_btn" id="reaction-234" 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 문서의 시작과 끝을 감싸는 최상위 요소이며, 모든 요소의 부모다. : 웹 페이지 제목, 메타데이터, 외부 스타일 시트 등을 포함하는 요소다. : 실제 내용이 들어가는 부분으로, 사용자에게 보여지는 내용이 포함된다. : 웹 페이지의 제목을 나타내며, 브라우저의 탭에 표시된다. 이렇게 HTML의 기본 구조는 간단하지만 중요하다. 올바른 구조로 웹 페이지를.." data-profile-image="https://t1.daumcdn.net/tistory_admin/static/manage/images/r3/default_L.png" data-profile-name="창진이의정보글" data-pc-url="https://changjininfo.tistory.com/entry/HTML%EC%9D%84-%ED%99%9C%EC%9A%A9%ED%95%9C-%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" data-relative-pc-url="/entry/HTML%EC%9D%84-%ED%99%9C%EC%9A%A9%ED%95%9C-%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" 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="234" 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="6317822" data-url="https://changjininfo.tistory.com/entry/HTML%EC%9D%84-%ED%99%9C%EC%9A%A9%ED%95%9C-%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" 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>  <div data-tistory-react-app="SupportButton"></div> </div>  <div class="another_category another_category_color_gray"> <h4>'<a href="/category/%EC%A0%95%EB%B3%B4%EB%AA%A8%EC%9D%8C">정보모음</a>' 카테고리의 다른 글</h4> <table> <tr> <th><a href="/entry/%EC%97%B0%EA%B5%AC%EB%B9%84-%ED%86%B5%ED%95%A9-%EA%B4%80%EB%A6%AC-%EC%8B%9C%EC%8A%A4%ED%85%9C-%ED%9A%A8%EC%9C%A8%EC%A0%81%EC%9D%B8-%EB%B9%84%EC%9A%A9-%EA%B4%80%EB%A6%AC-%EC%86%94%EB%A3%A8%EC%85%98">연구비 통합 관리 시스템 - 효율적인 비용 관리 솔루션</a> <span>(1)</span></th> <td>2024.07.31</td> </tr> <tr> <th><a href="/entry/%EC%B9%B4%EB%93%9C-%EB%89%B4%EC%8A%A4-%EB%A7%8C%EB%93%9C%EB%8A%94-%EB%B2%95-%EC%B4%88%EB%B3%B4%EC%9E%90%EB%A5%BC-%EC%9C%84%ED%95%9C-%EC%8B%A4%EC%A0%84-%EA%B0%80%EC%9D%B4%EB%93%9C">카드 뉴스 만드는 법 - 초보자를 위한 실전 가이드</a> <span>(0)</span></th> <td>2024.07.30</td> </tr> <tr> <th><a href="/entry/%EB%B9%88%ED%8F%B4-%EB%A7%A8-%ED%8A%B8%EB%A0%8C%EB%94%94%ED%95%9C-%ED%8C%A8%EC%85%98-%EC%95%84%EC%9D%B4%ED%85%9C%EC%9C%BC%EB%A1%9C-%EC%8A%A4%ED%83%80%EC%9D%BC-%ED%96%A5%EC%83%81%ED%95%98%EA%B8%B0">빈폴 맨 - 트렌디한 패션 아이템으로 스타일 향상하기</a> <span>(0)</span></th> <td>2024.07.29</td> </tr> <tr> <th><a href="/entry/%ED%8B%B0%EB%B9%99-%EC%98%81%ED%99%94-%EB%8B%A4%EC%96%91%ED%95%9C-%EC%9E%A5%EB%A5%B4%EC%99%80-%EC%B5%9C%EC%8B%A0-%EC%98%81%ED%99%94-%EC%86%8C%EC%8B%9D%EC%9C%BC%EB%A1%9C-%EC%A6%90%EA%B8%B0%EB%8A%94-%EC%8A%A4%ED%8A%B8%EB%A6%AC%EB%B0%8D-%EC%84%9C%EB%B9%84%EC%8A%A4">티빙 영화 - 다양한 장르와 최신 영화 소식으로 즐기는 스트리밍 서비스</a> <span>(0)</span></th> <td>2024.07.29</td> </tr> <tr> <th><a href="/entry/%EB%94%94%EC%98%AC-%EC%88%98%EC%98%81%EB%B3%B5-%EA%B3%A0%ED%92%88%EA%B2%A9-%EB%9F%AD%EC%85%94%EB%A6%AC-%EC%88%98%EC%98%81%EB%B3%B5%EC%9D%98-%EC%A0%95%EC%88%98">디올 수영복 - 고품격 럭셔리 수영복의 정수</a> <span>(0)</span></th> <td>2024.07.29</td> </tr> </table> </div>  </div> <div class="related-articles"> <h2>관련글</h2> <ul> <li> <a href="/entry/%EC%97%B0%EA%B5%AC%EB%B9%84-%ED%86%B5%ED%95%A9-%EA%B4%80%EB%A6%AC-%EC%8B%9C%EC%8A%A4%ED%85%9C-%ED%9A%A8%EC%9C%A8%EC%A0%81%EC%9D%B8-%EB%B9%84%EC%9A%A9-%EA%B4%80%EB%A6%AC-%EC%86%94%EB%A3%A8%EC%85%98?category=1110232"> <figure> </figure> <span class="title">연구비 통합 관리 시스템 - 효율적인 비용 관리 솔루션</span> </a> </li> <li> <a href="/entry/%EC%B9%B4%EB%93%9C-%EB%89%B4%EC%8A%A4-%EB%A7%8C%EB%93%9C%EB%8A%94-%EB%B2%95-%EC%B4%88%EB%B3%B4%EC%9E%90%EB%A5%BC-%EC%9C%84%ED%95%9C-%EC%8B%A4%EC%A0%84-%EA%B0%80%EC%9D%B4%EB%93%9C?category=1110232"> <figure> </figure> <span class="title">카드 뉴스 만드는 법 - 초보자를 위한 실전 가이드</span> </a> </li> <li> <a href="/entry/%EB%B9%88%ED%8F%B4-%EB%A7%A8-%ED%8A%B8%EB%A0%8C%EB%94%94%ED%95%9C-%ED%8C%A8%EC%85%98-%EC%95%84%EC%9D%B4%ED%85%9C%EC%9C%BC%EB%A1%9C-%EC%8A%A4%ED%83%80%EC%9D%BC-%ED%96%A5%EC%83%81%ED%95%98%EA%B8%B0?category=1110232"> <figure> </figure> <span class="title">빈폴 맨 - 트렌디한 패션 아이템으로 스타일 향상하기</span> </a> </li> <li> <a href="/entry/%ED%8B%B0%EB%B9%99-%EC%98%81%ED%99%94-%EB%8B%A4%EC%96%91%ED%95%9C-%EC%9E%A5%EB%A5%B4%EC%99%80-%EC%B5%9C%EC%8B%A0-%EC%98%81%ED%99%94-%EC%86%8C%EC%8B%9D%EC%9C%BC%EB%A1%9C-%EC%A6%90%EA%B8%B0%EB%8A%94-%EC%8A%A4%ED%8A%B8%EB%A6%AC%EB%B0%8D-%EC%84%9C%EB%B9%84%EC%8A%A4?category=1110232"> <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%A0%95%EB%B3%B4%EB%AA%A8%EC%9D%8C" 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/%EB%A7%9B%EC%A7%91">맛집</a> <a href="/tag/%EC%97%AC%ED%96%89%EB%B8%94%EB%A1%9C%EA%B7%B8">여행블로그</a> <a href="/tag/%EB%B8%94%EB%A1%9C%EA%B7%B8">블로그</a> <a href="/tag/%ED%95%B4%EC%8B%9C%ED%83%9C%EA%B7%B8">해시태그</a> <a href="/tag/%EC%A0%95%EB%B3%B4%EA%B8%80">정보글</a> <a href="/tag/%EA%B8%80%EC%93%B0%EA%B8%B0">글쓰기</a> <a href="/tag/%EC%97%AC%ED%96%89%EA%B0%80%EC%9D%B4%EB%93%9C">여행가이드</a> <a href="/tag/%EC%9E%90%EA%B8%B0%EA%B3%84%EB%B0%9C">자기계발</a> <a href="/tag/%EA%B2%8C%EC%9E%84%ED%8C%81">게임팁</a> <a href="/tag/%EB%94%94%EC%9E%90%EC%9D%B8">디자인</a> <a href="/tag/%EC%B6%94%EC%B2%9C">추천</a> <a href="/tag/%ED%8C%A8%EC%85%98">패션</a> <a href="/tag/%EB%B8%94%EB%A1%9C%EA%B7%B8%EC%A0%95%EB%B3%B4">블로그정보</a> <a href="/tag/%EC%97%AD%EC%82%AC">역사</a> <a href="/tag/%ED%99%88%EC%BF%A1">홈쿡</a> <a href="/tag/%EC%97%AC%ED%96%89%ED%8C%81">여행팁</a> <a href="/tag/%EB%8B%A4%EC%9D%B4%EC%96%B4%ED%8A%B8">다이어트</a> <a href="/tag/%EC%A0%95%EB%B3%B4">정보</a> <a href="/tag/%EB%AA%A9%ED%91%9C%EB%8B%AC%EC%84%B1">목표달성</a> <a href="/tag/%EC%8A%A4%ED%83%80%EC%9D%BC%EB%A7%81">스타일링</a> <a href="/tag/%ED%98%B8%ED%85%94%EC%B6%94%EC%B2%9C">호텔추천</a> <a href="/tag/%EC%97%AC%ED%96%89">여행</a> <a href="/tag/%EB%B7%B0%ED%8B%B0">뷰티</a> <a href="/tag/%EC%9A%B4%EB%8F%99">운동</a> <a href="/tag/%ED%8C%A8%EC%85%98%EB%B8%94%EB%A1%9C%EA%B7%B8">패션블로그</a> <a href="/tag/%EA%B0%80%EC%9D%BC%EC%BB%B7">가일컷</a> <a href="/tag/%EB%A8%B8%EB%A6%AC%EC%8A%A4%ED%83%80%EC%9D%BC">머리스타일</a> <a href="/tag/%ED%8E%B8%EB%A6%AC%ED%95%A8">편리함</a> <a href="/tag/%EB%B8%94%EB%A1%9C%EA%B7%B8%EA%B8%80">블로그글</a> <a href="/tag/%EC%84%B1%EC%9E%A5">성장</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/6317822/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="//changjininfo.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>