HTML 홈페이지 만드는 방법 - 초보자를 위한 단계별 안내서

1. HTML 기본 구조

웹 페이지의 기본 구조는 HTML 태그들로 이루어져 있어.
은 문서가 HTML5 버전으로 작성되었음을 선언하는 것이야.
태그는 웹 페이지의 시작과 끝을 정의해.
태그 안에는 문서 정보와 메타데이터들을 담을 수 있어.
</b> 태그는 문서의 제목을 나타내는데 사용돼.</li> <li><b><body></b> 태그는 웹 페이지의 내용을 포함하고 있어.</li> </ul><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 <p>이제 홈페이지에 표시될 <b>제목과 단락</b>을 작성해보겠습니다.</p> <ul> <li><b>제목:</b> <h1> 태그를 사용하여 큰 제목을 표시합니다.</li> <li><b>단락:</b> <p> 태그를 활용하여 텍스트를 단락으로 구분합니다.</li> </ul> <p>제목은 홈페이지의 주요 내용을 간결하게 표현하는 것이 중요합니다. 단락은 사용자에게 정보를 제공하거나 설명할 때 활용됩니다.</p> ```<p> </p> <p> </p> <h3>3. 링크 추가하기</h3> <p> </p> <img src="https://images.unsplash.com/photo-1607641067094-5bca68fabfe6?w=800" alt="Hyperlink" style="width:100%;" /> <p> </p> <ul> <li>웹 페이지에서 다른 페이지로 이동하고 싶을 때는 <b>앵커 태그</b>를 활용합니다.</li> <li>앵커 태그 안에 링크하고 싶은 페이지 주소를 <b>href 속성</b>을 통해 지정해줍니다.</li> <li>이미지나 텍스트를 클릭 시 해당 페이지로 이동하도록 하려면 해당 요소를 <b>앵커 태그</b>로 감싸줍니다.</li> </ul><p> </p> <p> </p> <h3>4. 이미지 삽입</h3> <p> </p> <img src="https://images.unsplash.com/photo-1526900913101-88c16676ca02?w=800" alt="<img>" style="width:100%;" /> <p> </p> <ul> <li><b>이미지 삽입하기:</b> 이미지를 삽입하려면 <b><img></b> 태그를 사용합니다.</li> <li><b>속성:</b> 이미지 경로는 <b>src</b> 속성에 지정하고, 대체 텍스트는 <b>alt</b> 속성에 작성합니다.</li> <li><b>폭과 높이:</b> 이미지의 크기를 조정하려면 <b>width</b>와 <b>height</b> 속성을 활용합니다.</li> <li><b>링크된 이미지:</b> 이미지를 링크하고 싶다면 <b><a></b> 태그 안에 <b><img></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>CSS</b> 기초 다지기</li> <li><b>JavaScript</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> <table>태그를 사용하여 웹페이지에 표를 만들 때에는 <tr>태그를 사용해 각 행(row)을 정의하고, <td>태그를 사용해 각 열(column)을 정의해주어야 합니다. 또한, <th>태그를 사용하여 각 열의 제목을 표시할 수도 있어요. 이를 활용하여 원하는 형식의 테이블을 만들 수 있어요. <ul> <li><b>표 제목</b>: <code><tr><th></th></tr></code>로 표기</li> <li><b>행 추가</b>: <code><tr></tr></code>로 새로운 행 추가</li> <li><b>열 추가</b>: <code><td></td></code>로 새로운 열 추가</li> <li><b>병합</b>: <code>colspan</code> 속성을 사용하여 열 병합</li> <li><b>행 병합</b>: <code>rowspan</code> 속성을 사용하여 행 병합</li> </ul><p> </p> <p> </p> <h3>7. 양식 만들기</h3> <p> </p> <img src="https://images.unsplash.com/photo-1629019621373-e5087c90067b?w=800" alt="Forms" style="width:100%;" /> <p> </p> <ul> <li><b>이름:</b> <input type="text" placeholder="이름을 입력하세요"></li> <li><b>이메일:</b> <input type="email" placeholder="이메일을 입력하세요"></li> <li><b>비밀번호:</b> <input type="password" placeholder="비밀번호를 설정하세요"></li> <li><b>전화번호:</b> <input type="tel" placeholder="전화번호를 입력하세요"></li> <li><b>성별:</b> <label><input type="radio" name="gender" value="male"> 남성</label> <label><input type="radio" name="gender" value="female"> 여성</label> </li> <li><b>생년월일:</b> <input type="date" placeholder="생년월일을 입력하세요"></li> <li><b>선호하는 활동:</b> <label><input type="checkbox" name="activity" value="reading"> 독서</label> <label><input type="checkbox" name="activity" value="cooking"> 요리</label> <label><input type="checkbox" name="activity" value="sports"> 스포츠</label> </li> <li><b>자기소개:</b> <textarea placeholder="간단히 자기를 소개해주세요"></textarea></li> <li><b>제출 버튼:</b> <button type="submit">제출</button></li> </ul><p> </p> <p> </p> <h3>8. CSS 스타일 적용</h3> <p> </p> <img src="https://images.unsplash.com/photo-1508716880829-dd496b382c95?w=800" alt="Styling" style="width:100%;" /> <p> </p> ```html <p>이번에는 CSS 스타일을 적용해보겠습니다. HTML 문서에 CSS를 적용하는 방법은 매우 간단합니다.</p> <ul> <li><b>CSS 코드가 담긴 외부 스타일 시트 파일을 생성해주세요.</b></li> <li><b><link> 태그</b>를 사용하여 HTML 문서와 외부 스타일 시트 파일을 연결합니다.</li> <li><b>CSS 선택자를 사용하여 HTML 요소에 원하는 스타일을 적용하세요.</b></li> </ul> <p>이렇게 간단한 단계를 따라가면 기본적인 CSS 스타일을 HTML에 적용할 수 있습니다.</p> ```<p> </p> <p> </p> <h3>9. 반응형 디자인 추가하기</h3> <p> </p> <img src="https://images.unsplash.com/photo-1599332470533-6099b2e63f25?w=800" alt="Media Queries" style="width:100%;" /> <p> </p> <article> <h2>9. 반응형 디자인 추가하기</h2> <p>지금까지 작업한 웹페이지를 반응형으로 만들어보겠습니다.</p> <ul> <li><b>미디어 쿼리(Media Queries)</b>를 사용하여 화면 크기에 따라 스타일을 변경합니다.</li> <li><b>Viewport</b> 설정을 통해 모바일 환경에서도 웹페이지가 잘 보이도록 합니다.</li> <li><b>Flexbox</b>나 <b>CSS 그리드</b>를 활용하여 레이아웃을 유연하게 조정합니다.</li> <li><b>이미지 태그에 max-width: 100%;</b> 속성을 추가하여 이미지가 화면을 벗어나지 않도록 합니다.</li> </ul> <p>위 내용을 참고하여 웹페이지를 반응형으로 만들어보세요!</p> </article><p> </p> <p> </p> <h3>10. 자바스크립트 기능 추가하기</h3> <p> </p> <p> </p> <ul> <li><b>1. 이벤트 핸들러 등록하기:</b> 버튼 또는 링크 등 사용자가 상호작용할 수 있는 요소를 선택하고, 해당 요소에 이벤트 리스너를 등록하여 원하는 동작을 정의합니다.</li> <li><b>2. 요소 선택하기:</b> JavaScript를 사용하여 HTML 문서 내에서 특정 요소를 선택하고 조작할 수 있습니다. getElementById()나 querySelector() 메서드를 사용하여 요소를 선택합니다.</li> <li><b>3. 요소 스타일 변경하기:</b> 선택한 요소의 스타일을 변경하여 화면에 보여지는 형태를 조절합니다. 스타일을 변경할 때는 선택한 요소의 style 속성을 활용합니다.</li> <li><b>4. 데이터 입력 검증:</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 = '//cherapira.tistory.com/reaction'; window.ReactionReqBody = { entryId: 48 }</script> <div class="wrap_btn" id="reaction-48" 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 태그들로 이루어져 있어. 은 문서가 HTML5 버전으로 작성되었음을 선언하는 것이야. 태그는 웹 페이지의 시작과 끝을 정의해. 태그 안에는 문서 정보와 메타데이터들을 담을 수 있어. 태그는 문서의 제목을 나타내는데 사용돼. 태그는 웹 페이지의 내용을 포함하고 있어. 2. 제목과 단락 작성 ```html이제 홈페이지에 표시될 제목과 단락을 작성해보겠습니다. 제목: 태그를 사용하여 큰 제목을 표시합니다. 단락: 태그를 활용하여 텍스트를 단락으로 구분합니다.제목은 홈페이지의 주요 내용을 간결하게 표현하는 것이 중요합니다. 단락은 사용자에게 정보를 제공하거나 설명할 때 활용됩니다.``` 3. 링크 추가하기 웹 페이.." data-profile-image="https://t1.daumcdn.net/tistory_admin/static/manage/images/r3/default_L.png" data-profile-name="체라피라" data-pc-url="https://cherapira.tistory.com/entry/HTML-%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A7%8C%EB%93%9C%EB%8A%94-%EB%B0%A9%EB%B2%95-%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-%EC%95%88%EB%82%B4%EC%84%9C" data-relative-pc-url="/entry/HTML-%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A7%8C%EB%93%9C%EB%8A%94-%EB%B0%A9%EB%B2%95-%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-%EC%95%88%EB%82%B4%EC%84%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="48" 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="7105323" data-url="https://cherapira.tistory.com/entry/HTML-%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A7%8C%EB%93%9C%EB%8A%94-%EB%B0%A9%EB%B2%95-%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-%EC%95%88%EB%82%B4%EC%84%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/%EA%BF%80%ED%8C%81%EB%AA%A8%EC%9D%8C">꿀팁모음</a>' 카테고리의 다른 글</h4> <table> <tr> <th><a href="/entry/%ED%8E%B8%EC%9D%98%EC%A0%90-%EC%95%8C%EB%B0%94-%EC%B4%88%EB%B3%B4%EC%9E%90%EB%A5%BC-%EC%9C%84%ED%95%9C-%EC%9C%A0%EC%9A%A9%ED%95%9C-%ED%8C%81">편의점 알바 초보자를 위한 유용한 팁</a> <span>(0)</span></th> <td>2024.07.31</td> </tr> <tr> <th><a href="/entry/%ED%95%9C%EC%84%AC-%EB%AA%B0-%ED%95%9C%EA%B5%AD-%EB%8C%80%ED%91%9C-%ED%8C%A8%EC%85%98-%EC%87%BC%ED%95%91%EB%AA%B0%EC%9D%98-%EB%A7%A4%EB%A0%A5%EA%B3%BC-%ED%98%9C%ED%83%9D%EC%9D%84-%EC%95%8C%EB%A0%A4%EB%93%9C%EB%A6%BD%EB%8B%88%EB%8B%A4">한섬 몰 - 한국 대표 패션 쇼핑몰의 매력과 혜택을 알려드립니다</a> <span>(0)</span></th> <td>2024.07.31</td> </tr> <tr> <th><a href="/entry/%EC%86%8C%EC%86%8C%ED%95%9C-%EC%9D%BC%EC%83%81%EC%9D%98-%EB%A7%A4%EB%A0%A5-%EC%86%8C%EC%86%8C%ED%95%9C-%EC%88%9C%EA%B0%84-%EC%86%8D%EC%9D%98-%ED%96%89%EB%B3%B5">소소한 일상의 매력 - 소소한 순간 속의 행복</a> <span>(0)</span></th> <td>2024.07.30</td> </tr> <tr> <th><a href="/entry/%EC%9D%B4%EC%A7%80-%EB%B0%94%EB%A1%9C-%EC%8B%9C%EC%8A%A4%ED%85%9C-%EC%A0%9C%ED%92%88-%EB%B9%A0%EB%A5%B4%EA%B3%A0-%ED%9A%A8%EC%9C%A8%EC%A0%81%EC%9C%BC%EB%A1%9C-%EA%B4%80%EB%A6%AC%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95">이지 바로 시스템 - 제품 빠르고 효율적으로 관리하는 방법</a> <span>(0)</span></th> <td>2024.07.30</td> </tr> <tr> <th><a href="/entry/%ED%99%94%EC%A0%9C%EC%9D%98-50%EB%8C%80-%EC%97%AC%EC%84%B1-%ED%8C%A8%EC%85%98-%EC%8A%A4%ED%83%80%EC%9D%BC-%ED%8A%B8%EB%A0%8C%EB%93%9C%EB%B6%80%ED%84%B0-%ED%8C%81%EA%B9%8C%EC%A7%80">화제의 50대 여성 패션 스타일 - 트렌드부터 팁까지</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/%ED%8E%B8%EC%9D%98%EC%A0%90-%EC%95%8C%EB%B0%94-%EC%B4%88%EB%B3%B4%EC%9E%90%EB%A5%BC-%EC%9C%84%ED%95%9C-%EC%9C%A0%EC%9A%A9%ED%95%9C-%ED%8C%81?category=1185676"> <figure> </figure> <span class="title">편의점 알바 초보자를 위한 유용한 팁</span> </a> </li> <li> <a href="/entry/%ED%95%9C%EC%84%AC-%EB%AA%B0-%ED%95%9C%EA%B5%AD-%EB%8C%80%ED%91%9C-%ED%8C%A8%EC%85%98-%EC%87%BC%ED%95%91%EB%AA%B0%EC%9D%98-%EB%A7%A4%EB%A0%A5%EA%B3%BC-%ED%98%9C%ED%83%9D%EC%9D%84-%EC%95%8C%EB%A0%A4%EB%93%9C%EB%A6%BD%EB%8B%88%EB%8B%A4?category=1185676"> <figure> </figure> <span class="title">한섬 몰 - 한국 대표 패션 쇼핑몰의 매력과 혜택을 알려드립니다</span> </a> </li> <li> <a href="/entry/%EC%86%8C%EC%86%8C%ED%95%9C-%EC%9D%BC%EC%83%81%EC%9D%98-%EB%A7%A4%EB%A0%A5-%EC%86%8C%EC%86%8C%ED%95%9C-%EC%88%9C%EA%B0%84-%EC%86%8D%EC%9D%98-%ED%96%89%EB%B3%B5?category=1185676"> <figure> </figure> <span class="title">소소한 일상의 매력 - 소소한 순간 속의 행복</span> </a> </li> <li> <a href="/entry/%EC%9D%B4%EC%A7%80-%EB%B0%94%EB%A1%9C-%EC%8B%9C%EC%8A%A4%ED%85%9C-%EC%A0%9C%ED%92%88-%EB%B9%A0%EB%A5%B4%EA%B3%A0-%ED%9A%A8%EC%9C%A8%EC%A0%81%EC%9C%BC%EB%A1%9C-%EA%B4%80%EB%A6%AC%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95?category=1185676"> <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"> 분류 전체보기 <img alt="N" src="https://tistory1.daumcdn.net/tistory_admin/blogs/image/category/new_ico_5.gif" style="vertical-align:middle;padding-left:2px;"/></a> <ul class="category_list"><li class=""><a href="/category/%EA%BF%80%ED%8C%81%EB%AA%A8%EC%9D%8C" class="link_item"> 꿀팁모음 <img alt="N" src="https://tistory1.daumcdn.net/tistory_admin/blogs/image/category/new_ico_5.gif" style="vertical-align:middle;padding-left:2px;"/></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/%EC%8A%A4%ED%83%80%EC%9D%BC%EB%A7%81%ED%8C%81">스타일링팁</a> <a href="/tag/%EC%97%AC%ED%96%89%EC%A0%95%EB%B3%B4">여행정보</a> <a href="/tag/%EB%8D%B0%EC%9D%BC%EB%A6%AC%EB%A3%A9">데일리룩</a> <a href="/tag/%EB%8F%84%EC%8B%9C%EC%9E%AC%EC%83%9D">도시재생</a> <a href="/tag/%EC%9A%94%EB%A6%AC%EB%A0%88%EC%8B%9C%ED%94%BC">요리레시피</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%9E%90%EA%B8%B0%EA%B3%84%EB%B0%9C">자기계발</a> <a href="/tag/%EC%84%B1%EA%B3%B5%EC%8A%B5%EA%B4%80">성공습관</a> <a href="/tag/%ED%8C%A8%EC%85%98%EB%B8%94%EB%A1%9C%EA%B7%B8">패션블로그</a> <a href="/tag/%EC%8A%A4%ED%83%80%EC%9D%BC">스타일</a> <a href="/tag/%EB%AA%A9%ED%91%9C%EA%B4%80%EB%A6%AC">목표관리</a> <a href="/tag/%EB%AA%A9%ED%91%9C%EB%8B%AC%EC%84%B1">목표달성</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/%ED%99%88%EC%9D%B8%ED%85%8C%EB%A6%AC%EC%96%B4">홈인테리어</a> <a href="/tag/%ED%8A%B8%EB%A0%8C%EB%94%94">트렌디</a> <a href="/tag/%EB%AA%A9%ED%91%9C%EC%84%A4%EC%A0%95">목표설정</a> <a href="/tag/%ED%95%9C%EC%84%AC%EB%AA%B0">한섬몰</a> <a href="/tag/%EC%97%AC%ED%96%89">여행</a> <a href="/tag/%EC%97%AC%ED%96%89%ED%8C%A8%ED%82%A4%EC%A7%80">여행패키지</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%EA%B0%80%EC%9D%B4%EB%93%9C">인테리어가이드</a> <a href="/tag/%EC%98%A8%EB%9D%BC%EC%9D%B8%ED%95%99%EC%8A%B5">온라인학습</a> <a href="/tag/%EB%A7%9B%EA%B3%BC%EA%B1%B4%EA%B0%95">맛과건강</a> <a href="/tag/%ED%8A%B9%EB%B3%84%ED%95%9C%EA%B2%BD%ED%97%98">특별한경험</a> <a href="/tag/%EC%97%85%EB%AC%B4%EB%AA%A9%ED%91%9C">업무목표</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/%EC%9A%94%EB%A6%AC%EB%B8%94%EB%A1%9C%EA%B7%B8">요리블로그</a> <a href="/tag/%EC%98%81%EC%96%B4%EB%8A%A5%EB%A0%A5%ED%96%A5%EC%83%81">영어능력향상</a> <a href="/tag/%EC%98%81%EC%96%B4%ED%95%99%EC%8A%B5">영어학습</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/7105323/skin/images/script.js?_version_=1717863249"></script> <div class="#menubar menu_toolbar toolbar_rb"> <h2 class="screen_out">티스토리툴바</h2> <div class="btn_tool"><button class="btn_menu_toolbar btn_subscription #subscribe" data-blog-id="7105323" data-url="https://cherapira.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> <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>  <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>  <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-9f215d513ac1c1fc530f1b625c346be762e46741/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":"7105323-48","customProps":{"userId":"0","blogId":"7105323","entryId":"48","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"48","entryTitle":"HTML 홈페이지 만드는 방법 - 초보자를 위한 단계별 안내서","entryType":"POST","categoryName":"꿀팁모음","categoryId":"1185676","serviceCategoryName":null,"serviceCategoryId":null,"author":"6697159","authorNickname":"체라피라","blogNmae":"체라피라","image":"","plink":"/entry/HTML-%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%A7%8C%EB%93%9C%EB%8A%94-%EB%B0%A9%EB%B2%95-%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-%EC%95%88%EB%82%B4%EC%84%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>