초보자를 위한 HTML 웹 사이트 만들기

1. HTML 기본 구조 이해하기

모든 HTML 문서는 \로 시작해야 함
HTML 문서의 시작은 \ 태그로 시작해서 \ 태그로 끝나야 함
문서의 헤더는 \ 태그 안에 위치하며 \ 태그로 제목을 표시함</li> <li>본문은 \<body> 태그로 감싸져야 하며 실제로 웹 페이지에 표시되는 내용들이 들어감</li> </ul><p> </p> <p> </p> <h3>2. 텍스트 요소 추가하기</h3> <p> </p> <img src="https://images.unsplash.com/photo-1523350518665-e177eea6988b?w=800" alt="Element" style="width:100%;" /> <p> </p> ```html <ul> <li><b>헤딩(Heading) 요소:</b> 제목이나 섹션을 나타내는 데 사용됨. <b>h1</b>부터 <b>h6</b>까지 존재하며 중요도에 따라 사용</li> <li><b>문단(Paragraph) 요소:</b> 텍스트 내용을 담는 요소. <b>p</b> 태그를 사용하여 문단을 생성</li> <li><b>강조(Emphasis) 요소:</b> 강조하고 싶은 텍스트를 감싸는 데 사용. <b>em</b> 또는 <b>strong</b> 태그 사용</li> <li><b>링크(Link) 요소:</b> 다른 페이지로 이동하거나 파일을 다운로드하는 링크 생성. <b>a</b> 태그 사용</li> </ul> ```<p> </p> <p> </p> <h3>3. 이미지 삽입하기</h3> <p> </p> <img src="https://images.unsplash.com/photo-1675282500942-151fc0a73565?w=800" alt="Image Tag" 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> </ul><p> </p> <p> </p> <h3>4. 링크 추가하기</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>링크 추가하기</b></p> <p>이번에는 웹 사이트에서 다른 페이지로 이동할 수 있도록 <b>링크</b>를 추가해보겠습니다.</p> <p>1. <b><a></b> 태그를 사용하여 링크를 생성합니다.</p> <p>2. href 속성을 사용하여 링크할 페이지의 URL을 지정합니다.</p> <p>3. 텍스트 혹은 이미지를 해당 <b><a></b> 태그 안에 넣어 클릭 시 이동할 수 있도록 합니다.</p> <p>이제 다른 페이지로 이동할 수 있는 링크를 추가하는 방법을 배웠습니다!</p> ```<p> </p> <p> </p> <h3>5. 목록 구성하기</h3> <p> </p> <img src="https://images.unsplash.com/photo-1569161031678-f49b4b9ca1c2?w=800" alt="Lists" style="width:100%;" /> <p> </p> <ul> <li><b>항목 1:</b> 섹션 소개 <li><b>항목 2:</b> <b>HTML</b>에서 목록 구성하는 방법 <li><b>항목 3:</b> <b>ul</b> 태그 활용하기 <li><b>항목 4:</b> 목록 항목 디자인하는 방법 </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> ```html <p>이제는 표를 만들 차례야. 엑셀처럼 정보를 깔끔하게 정리하기에 딱 좋지!</p> <p><b>표 테그 작성 순서:</b></p> <ul> <li>먼저 <b><table></b> 태그로 표 전체를 감싸줘.</li> <li>다음으로 표 헤더를 지정할 때는 <b><thead></b> 태그를 사용해.</li> <li>헤더에서 각 열을 정의하려면 <b><th></b> 태그를 활용하면 돼.</li> <li>표 본문은 <b><tbody></b> 태그로 묶어줘. 여기에 실제 정보를 입력할거야.</li> <li>각 셀을 지정할 때는 <b><td></b> 태그를 활용하면 돼. 원하는 내용을 입력하면 돼!</li> <li>마지막으로 표를 닫을 때는 <b></table></b> 태그로 마무리하면 완성!</li> </ul> <p>이렇게 해서 정보를 표로 나타내면 사용자들이 정보를 더 편리하게 확인할 수 있어.</p> ```<p> </p> <p> </p> <h3>7. 양식과 입력 요소 추가하기</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>양식</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. 시맨틱 태그 활용하기</h3> <p> </p> <p> </p> <ul> <li>웹 페이지의 구조를 정의할 때 <b>header</b>, <b>nav</b>, <b>section</b>, <b>article</b>, <b>aside</b>, <b>footer</b> 등의 시맨틱 태그를 적절히 활용한다.</li> <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> </ul><p> </p> <p> </p> <h3>9. 스타일과 CSS 적용하기</h3> <p> </p> <img src="https://images.unsplash.com/photo-1508716880829-dd496b382c95?w=800" alt="Styling" style="width:100%;" /> <p> </p> <ul> <li><b>1. 스타일 시트(CSS) 연결:</b> 웹 페이지 상단에 <link> 태그를 사용하여 CSS 파일을 연결합니다.</li> <li><b>2. 내부 스타일 시트:</b> <style> 태그를 사용하여 HTML 문서 내에 스타일을 지정할 수 있습니다.</li> <li><b>3. 인라인 스타일:</b> HTML 요소에 직접 style 속성을 이용하여 스타일을 지정할 수 있습니다.</li> <li><b>4. 선택자 활용:</b> 태그 이름, 클래스, 아이디 등을 이용하여 특정 요소에 스타일을 적용합니다.</li> <li><b>5. 속성 값 설정:</b> 폰트, 크기, 색상, 여백 등의 스타일 속성 값을 설정하여 디자인을 꾸밉니다.</li> </ul><p> </p> <p> </p> <h3>10. 반응형 웹 디자인 기본 개념</h3> <p> </p> <img src="https://images.unsplash.com/photo-1640158616235-731aa6b43d38?w=800" alt="Responsive Web Design." style="width:100%;" /> <p> </p> <ul> <li><b>반응형 웹 디자인</b>은 여러 디바이스의 화면 크기에 맞춰 웹 사이트를 자동으로 최적화하는 기술이다.</li> <li><b>미디어 쿼리</b>를 이용하여 화면 크기에 따라 스타일이 변하도록 설정할 수 있다.</li> <li><b>Viewport</b>는 웹 페이지가 표시되는 영역을 말하며, 반응형 웹에서 중요한 개념이다.</li> <li>Flexible grid system을 이용하여 <b>다양한 디바이스</b>에 맞는 레이아웃을 구성할 수 있다.</li> <li><b>Fluid images</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 = '//chukopuro.tistory.com/reaction'; window.ReactionReqBody = { entryId: 42 }</script> <div class="wrap_btn" id="reaction-42" 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 문서의 시작은 \ 태그로 시작해서 \ 태그로 끝나야 함 문서의 헤더는 \ 태그 안에 위치하며 \ 태그로 제목을 표시함 본문은 \ 태그로 감싸져야 하며 실제로 웹 페이지에 표시되는 내용들이 들어감 2. 텍스트 요소 추가하기 ```html 헤딩(Heading) 요소: 제목이나 섹션을 나타내는 데 사용됨. h1부터 h6까지 존재하며 중요도에 따라 사용 문단(Paragraph) 요소: 텍스트 내용을 담는 요소. p 태그를 사용하여 문단을 생성 강조(Emphasis) 요소: 강조하고 싶.." data-profile-image="https://t1.daumcdn.net/tistory_admin/static/manage/images/r3/default_L.png" data-profile-name="추코푸로" data-pc-url="https://chukopuro.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-%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" 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-%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" 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="42" 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="7105303" data-url="https://chukopuro.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-%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" 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%9D%BC%EC%83%81%EC%A0%95%EB%B3%B4%EA%B8%80">일상정보글</a>' 카테고리의 다른 글</h4> <table> <tr> <th><a href="/entry/%EB%8C%80%ED%98%95%EA%B2%AC%EC%9D%84-%EC%9C%84%ED%95%9C-%EC%99%84%EB%B2%BD%ED%95%9C-%EC%A7%91-%EA%BE%B8%EB%AF%B8%EA%B8%B0-%EA%B0%80%EC%9D%B4%EB%93%9C">대형견을 위한 완벽한 집 꾸미기 가이드</a> <span>(0)</span></th> <td>2024.08.02</td> </tr> <tr> <th><a href="/entry/%EB%B6%80%EB%AA%A8%EB%8B%98-%EA%B2%B0%ED%98%BC-%EA%B8%B0%EB%85%90%EC%9D%BC-%EC%84%A0%EB%AC%BC-%EC%95%84%EC%9D%B4%EB%94%94%EC%96%B4-%EB%AA%A8%EC%9D%8C">부모님 결혼 기념일 선물 아이디어 모음</a> <span>(1)</span></th> <td>2024.08.02</td> </tr> <tr> <th><a href="/entry/%EB%8B%A4%EC%96%91%ED%95%9C-%ED%97%88%EB%B8%8C-%EC%B0%A8-%EC%A2%85%EB%A5%98-%EC%86%8C%EA%B0%9C">다양한 허브 차 종류 소개</a> <span>(0)</span></th> <td>2024.07.31</td> </tr> <tr> <th><a href="/entry/%EC%BD%94%ED%85%94-%EB%A1%9C-%EB%B9%88%ED%8B%B0%EC%A7%80-%EA%B0%90%EC%84%B1%EC%9C%BC%EB%A1%9C-%EB%AC%BC%EB%93%A4%EB%8B%A4">코텔 로 - 빈티지 감성으로 물들다</a> <span>(0)</span></th> <td>2024.07.31</td> </tr> <tr> <th><a href="/entry/%EA%B0%80%EC%99%80%EC%B9%B4%EB%AF%B8-%EB%AF%B8%EC%97%90%EC%BD%94-%EA%B7%B8%EB%85%80%EC%9D%98-%EC%9D%B4%EB%A0%A5%EA%B3%BC-%EC%84%B1%EA%B3%BC">가와카미 미에코 - 그녀의 이력과 성과</a> <span>(1)</span></th> <td>2024.07.28</td> </tr> </table> </div>  </div> <div class="related-articles"> <h2>관련글</h2> <ul> <li> <a href="/entry/%EB%8C%80%ED%98%95%EA%B2%AC%EC%9D%84-%EC%9C%84%ED%95%9C-%EC%99%84%EB%B2%BD%ED%95%9C-%EC%A7%91-%EA%BE%B8%EB%AF%B8%EA%B8%B0-%EA%B0%80%EC%9D%B4%EB%93%9C?category=1259968"> <figure> </figure> <span class="title">대형견을 위한 완벽한 집 꾸미기 가이드</span> </a> </li> <li> <a href="/entry/%EB%B6%80%EB%AA%A8%EB%8B%98-%EA%B2%B0%ED%98%BC-%EA%B8%B0%EB%85%90%EC%9D%BC-%EC%84%A0%EB%AC%BC-%EC%95%84%EC%9D%B4%EB%94%94%EC%96%B4-%EB%AA%A8%EC%9D%8C?category=1259968"> <figure> </figure> <span class="title">부모님 결혼 기념일 선물 아이디어 모음</span> </a> </li> <li> <a href="/entry/%EB%8B%A4%EC%96%91%ED%95%9C-%ED%97%88%EB%B8%8C-%EC%B0%A8-%EC%A2%85%EB%A5%98-%EC%86%8C%EA%B0%9C?category=1259968"> <figure> </figure> <span class="title">다양한 허브 차 종류 소개</span> </a> </li> <li> <a href="/entry/%EC%BD%94%ED%85%94-%EB%A1%9C-%EB%B9%88%ED%8B%B0%EC%A7%80-%EA%B0%90%EC%84%B1%EC%9C%BC%EB%A1%9C-%EB%AC%BC%EB%93%A4%EB%8B%A4?category=1259968"> <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%EA%B8%80" 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%B8%94%EB%A1%9C%EA%B7%B8%EC%A0%95%EB%B3%B4">블로그정보</a> <a href="/tag/%EB%AA%A9%ED%91%9C%EA%B3%84%ED%9A%8D">목표계획</a> <a href="/tag/%EC%B0%A8">차</a> <a href="/tag/%ED%98%B8%ED%85%94%EC%98%88%EC%95%BD">호텔예약</a> <a href="/tag/%EC%8A%A4%ED%83%80%EC%9D%BC">스타일</a> <a href="/tag/%ED%9E%90%EB%A7%81%EC%97%AC%ED%96%89">힐링여행</a> <a href="/tag/%EC%98%A8%EB%9D%BC%EC%9D%B8%EC%87%BC%ED%95%91">온라인쇼핑</a> <a href="/tag/%EC%B6%94%EC%B2%9C%EC%95%84%EC%9D%B4%ED%85%9C">추천아이템</a> <a href="/tag/%EC%8A%A4%ED%83%80%EC%9D%BC%EB%A7%81">스타일링</a> <a href="/tag/%EB%B7%B0%ED%8B%B0%ED%8C%81">뷰티팁</a> <a href="/tag/%EC%97%AC%ED%96%89%EC%A0%95%EB%B3%B4">여행정보</a> <a href="/tag/%EB%B8%94%EB%A1%9C%EA%B7%B8">블로그</a> <a href="/tag/%EC%8A%A4%ED%83%80%EC%9D%BC%EB%A7%81%ED%8C%81">스타일링팁</a> <a href="/tag/%ED%8C%A8%EC%85%98%EB%B8%94%EB%A1%9C%EA%B7%B8">패션블로그</a> <a href="/tag/%ED%8C%A8%EC%85%98%ED%85%9C">패션템</a> <a href="/tag/%ED%8C%A8%EC%85%98">패션</a> <a href="/tag/%EB%B2%B3%EB%B6%80%EC%8A%A4%EA%B8%B0%EB%85%B8%EC%9D%B4%ED%98%B8%ED%85%94">벳부스기노이호텔</a> <a href="/tag/%EC%9E%90%EA%B8%B0%EA%B3%84%EB%B0%9C">자기계발</a> <a href="/tag/%EB%8B%A4%EC%9D%B4%EC%96%B4%ED%8A%B8">다이어트</a> <a href="/tag/%EC%97%AC%ED%96%89%EC%A4%80%EB%B9%84">여행준비</a> <a href="/tag/%EC%97%AC%ED%96%89">여행</a> <a href="/tag/%ED%95%9C%EA%B5%AD%EC%9D%8C%EC%8B%9D">한국음식</a> <a href="/tag/%EC%96%B8%EC%96%B4%ED%95%99%EC%8A%B5">언어학습</a> <a href="/tag/%EC%97%AC%ED%96%89%EB%B8%94%EB%A1%9C%EA%B7%B8">여행블로그</a> <a href="/tag/%EB%AA%A9%ED%91%9C%EB%8B%AC%EC%84%B1">목표달성</a> <a href="/tag/%EB%AA%A9%ED%91%9C%EC%84%A4%EC%A0%95">목표설정</a> <a href="/tag/%EC%97%AC%ED%96%89%ED%8C%81">여행팁</a> <a href="/tag/%ED%88%AC%EC%96%B4%ED%8C%A8%ED%82%A4%EC%A7%80">투어패키지</a> <a href="/tag/%ED%95%B4%EC%99%B8%EC%97%AC%ED%96%89">해외여행</a> <a href="/tag/%EC%82%AC%EC%A7%84%EB%8B%A4%EC%9A%B4%EB%A1%9C%EB%93%9C">사진다운로드</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/7105303/skin/images/script.js?_version_=1717863221"></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="7105303" data-url="https://chukopuro.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-57383c446b0fdc8f5aba26805f52f60c3b4022b8/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":"7105303-42","customProps":{"userId":"0","blogId":"7105303","entryId":"42","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"42","entryTitle":"초보자를 위한 HTML 웹 사이트 만들기 - 단계별 가이드","entryType":"POST","categoryName":"일상정보글","categoryId":"1259968","serviceCategoryName":null,"serviceCategoryId":null,"author":"6697146","authorNickname":"추코푸로","blogNmae":"추코푸로","image":"","plink":"/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-%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","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>

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

1. HTML 기본 구조 이해하기