HTML 태그를 활용한 자기소개서 작성 가이드

문서 내 토픽

1. HTML 기본 구조 및 문서 작성

HTML 문서는 선언으로 시작하며 , , 태그로 구성됩니다. 에는 로 인코딩을 지정하고 로 문서 제목을 설정합니다. <body>에는 실제 콘텐츠를 작성합니다. <h1>부터 <h6>까지의 제목 태그와 <p> 문단 태그를 사용하여 문서 구조를 정의합니다. </div> </li> <li> <div class="SubTitle"> 2. 이미지 삽입 및 <img> 태그 활용 </div> <div class="Desc"> <img> 태그는 src 속성으로 이미지 경로를 지정하고, alt 속성으로 대체 텍스트를 제공합니다. width/height 속성으로 이미지 크기를 조정하고, align 속성으로 정렬을 설정합니다. hspace/vspace 속성으로 좌우상하 여백을 설정할 수 있습니다. 절대경로와 상대경로 두 가지 방법으로 이미지 경로를 지정할 수 있습니다. </div> </li> <li> <div class="SubTitle"> 3. 글꼴 및 텍스트 스타일 지정 </div> <div class="Desc"> <font> 태그는 face 속성으로 글꼴을 지정하고, size 속성으로 크기를, color 속성으로 색상을 변경합니다. 그러나 HTML5에서는 <font> 태그가 권장되지 않으므로 CSS 스타일 사용이 권장됩니다. <span> 태그와 style 속성을 이용하여 텍스트 색상, 그림자, 굵기 등을 조정할 수 있습니다. </div> </li> <li> <div class="SubTitle"> 4. 테이블 구조 및 데이터 표현 </div> <div class="Desc"> <table> 태그로 표를 만들며, <tr>은 행, <th>는 헤더 셀, <td>는 데이터 셀을 나타냅니다. border 속성으로 테두리를 설정하고, cellpadding으로 셀 내부 여백을, colspan/rowspan으로 셀 병합을 합니다. 테이블 내에 <img> 태그를 포함하여 이미지, 텍스트 등 다양한 콘텐츠를 표시할 수 있습니다. </div> </li> </ul> </div> </div> </div> </section> <section class="Box-Z5V6GQL"> <div class="Shell"> <div class="Inner"> <script> /** * 토픽 연관 자료 설정 * @type {Array} * */ const topicRelatedDocConifg = []; </script> <div class="Title"> <img src="/icon/v5/aiWrite/icon_13.svg" alt=""> <span><span class="Color_Primary">Easy AI와 토픽</span> 톺아보기</span> </div> <div class="Detail"> <ul class="First"> <li data-topic-data-seq="1253438"> <script> topicRelatedDocConifg.push( { topicDataSeq: '1253438', queryText: 'HTML 기본 구조 및 문서 작성', excludeDocSeq: 29110043 } ); </script> <div class="SubTitle"> 1. HTML 기본 구조 및 문서 작성 </div> <div class="Desc"> HTML의 기본 구조는 웹 개발의 토대가 되는 매우 중요한 개념입니다. DOCTYPE, html, head, body 태그 등의 올바른 구조 이해는 웹 표준 준수와 브라우저 호환성을 보장합니다. 특히 시맨틱 태그(header, nav, main, footer 등)의 활용은 코드의 가독성을 높이고 SEO 최적화에도 긍정적인 영향을 미칩니다. 초보자부터 전문가까지 HTML 기본 구조를 정확히 이해하는 것은 필수적이며, 이를 통해 접근성 있고 유지보수하기 좋은 웹 문서를 작성할 수 있습니다. </div> </li> <li data-topic-data-seq="1253440"> <script> topicRelatedDocConifg.push( { topicDataSeq: '1253440', queryText: '이미지 삽입 및 <img> 태그 활용', excludeDocSeq: 29110043 } ); </script> <div class="SubTitle"> 2. 이미지 삽입 및 <img> 태그 활용 </div> <div class="Desc"> img 태그는 웹 페이지에 시각적 요소를 추가하는 핵심 도구입니다. src, alt, width, height 속성의 올바른 사용은 웹 성능과 접근성을 동시에 개선합니다. 특히 alt 속성은 시각 장애인을 위한 스크린 리더 지원뿐만 아니라 이미지 로딩 실패 시에도 중요한 역할을 합니다. 반응형 웹 디자인 시대에는 srcset과 picture 요소를 활용한 적응형 이미지 제공도 중요하며, 이를 통해 다양한 기기에서 최적의 사용자 경험을 제공할 수 있습니다. </div> </li> <li data-topic-data-seq="1253442"> <script> topicRelatedDocConifg.push( { topicDataSeq: '1253442', queryText: '글꼴 및 텍스트 스타일 지정', excludeDocSeq: 29110043 } ); </script> <div class="SubTitle"> 3. 글꼴 및 텍스트 스타일 지정 </div> <div class="Desc"> 텍스트 스타일 지정은 웹 페이지의 가독성과 미적 완성도를 결정하는 중요한 요소입니다. HTML의 b, strong, i, em 태그 등은 단순한 시각적 효과를 넘어 의미론적 정보를 전달합니다. 웹 폰트의 활용으로 다양한 디자인 표현이 가능해졌으며, 이는 브랜드 아이덴티티 구축에도 도움이 됩니다. 다만 과도한 스타일 지정은 오히려 가독성을 해칠 수 있으므로, 균형 잡힌 접근이 필요합니다. </div> </li> <li data-topic-data-seq="1253444"> <script> topicRelatedDocConifg.push( { topicDataSeq: '1253444', queryText: '테이블 구조 및 데이터 표현', excludeDocSeq: 29110043 } ); </script> <div class="SubTitle"> 4. 테이블 구조 및 데이터 표현 </div> <div class="Desc"> 테이블은 구조화된 데이터를 효과적으로 표현하는 강력한 도구입니다. thead, tbody, tfoot, th, tr, td 등의 요소를 올바르게 사용하면 데이터의 의미를 명확히 하고 접근성을 높일 수 있습니다. 특히 scope 속성과 caption 요소의 활용은 스크린 리더 사용자의 이해도를 크게 향상시킵니다. 다만 레이아웃 목적으로 테이블을 남용하는 것은 피해야 하며, 복잡한 데이터 표현 시에는 반응형 디자인을 고려한 신중한 설계가 필요합니다. </div> </li> </ul> <ul class="Second"> <li> <a href="/aiWrite/topicWiki/search/?qu=HTML"># HTML</a> </li> <li> <a href="/aiWrite/topicWiki/search/?qu=%EC%9B%B9%ED%94%84%EB%A1%9C%EA%B7%B8%EB%9E%98%EB%B0%8D"># 웹프로그래밍</a> </li> <li> <a href="/aiWrite/topicWiki/search/?qu=%EC%9E%90%EA%B8%B0%EC%86%8C%EA%B0%9C%EC%84%9C"># 자기소개서</a> </li> <li> <a href="/aiWrite/topicWiki/search/?qu=%ED%83%9C%EA%B7%B8"># 태그</a> </li> <li> <a href="/aiWrite/topicWiki/search/?qu=%ED%85%8C%EC%9D%B4%EB%B8%94"># 테이블</a> </li> <li> <a href="/aiWrite/topicWiki/search/?qu=%EC%9D%B4%EB%AF%B8%EC%A7%80%EC%82%BD%EC%9E%85"># 이미지삽입</a> </li> <li> <a href="/aiWrite/topicWiki/search/?qu=CSS%EC%8A%A4%ED%83%80%EC%9D%BC"># CSS스타일</a> </li> <li> <a href="/aiWrite/topicWiki/search/?qu=%EC%9B%B9%EA%B0%9C%EB%B0%9C"># 웹개발</a> </li> </ul> </div> <script> function initToggleBoxes(selector = ".Box-Z5V6GQL .ToggleBox") { const toggleBoxes = document.querySelectorAll(selector); toggleBoxes.forEach((toggleBox, index) => { const btn = toggleBox.querySelector(".BtnToggle"); const content = toggleBox.querySelector(".Content"); const icon = btn.querySelector("img"); if (!btn || !content || !icon) return; content.classList.remove("On"); icon.style.transform = "rotate(0deg)"; btn.style.borderRadius = "16px"; if (index === 0) { content.classList.add("On"); icon.style.transform = "rotate(180deg)"; btn.style.borderRadius = "16px 16px 0 0"; } btn.addEventListener("click", () => { const isOpen = content.classList.contains("On"); toggleBoxes.forEach((otherBox) => { if (otherBox !== toggleBox) { const otherContent = otherBox.querySelector(".Content"); const otherBtn = otherBox.querySelector(".BtnToggle"); const otherIcon = otherBox.querySelector("img"); otherContent.classList.remove("On"); otherBtn.style.borderRadius = "16px"; otherIcon.style.transform = "rotate(0deg)"; } }); if (isOpen) { content.classList.remove("On"); btn.style.borderRadius = "16px"; icon.style.transform = "rotate(0deg)"; } else { content.classList.add("On"); btn.style.borderRadius = "16px 16px 0 0"; icon.style.transform = "rotate(180deg)"; } }); }); } /** * 토픽 연관 자료 출력 * @returns {Promise<void>} */ const renderTopicRelatedDoc = async () => { const promises = topicRelatedDocConifg.map(async (item) => { const searchTopicRelatedDoc = new SearchTopicRelatedDoc(item); try { await searchTopicRelatedDoc.load(); searchTopicRelatedDoc.render(); adjustVisibility(); } catch (error) { searchTopicRelatedDoc.renderReset(); throw error; } }); await Promise.all(promises); }; document.addEventListener("DOMContentLoaded", async () => { try { await renderTopicRelatedDoc(); initToggleBoxes(); } catch (error) {} }); </script> </div> </div> </section>     </div> </main> </div> <div class="clear"></div> </div> <footer class="Footer"> <ul class="Ul-8RMYLOI"> <li><a href="http://www.agentsoft.co.kr/" target="_blank" onclick="Common.hcLogTrace(215, 695);">회사소개</a></li> <li class="Line"></li> <li><a href="https://www.agentsoft.co.kr/partner.php#proposal" target="_blank" onclick="Common.hcLogTrace(215, 696);">제휴광고문의</a></li> <li class="Line"></li> <li><a href="https://www.happycampus.com/policy/" target="_blank" onclick="Common.hcLogTrace(215, 697);">이용약관</a></li> <li class="Line"></li> <li><a href="https://www.happycampus.com/policy/privacy/" target="_blank" onclick="Common.hcLogTrace(215, 698);" class="Strong">개인정보처리방침</a></li> <li class="Line"></li> <li><a href="#refuseEmailCollection" onclick="Common.hcLogTrace(215, 699); Common.refuseEmailCollection();return false;" id="email_refuse">이메일무단 수집거부</a></li> <li class="Line"></li> <li><a href="#linkRequirement" onclick="Common.linkRequirement();return false;" id="link_requirement">링크시 전제조건</a></li> <li class="Line"></li> <li><a href="https://www.happycampus.com/policy/law/" target="_blank" onclick="Common.hcLogTrace(215, 700);">책임한계 및 법적고지</a></li> </ul> <ul class="Ul-2XZ5OA0I">  <li class="Company"> HAPPYCAMPUS </li> <li class="Text"> <div class="Title">(주) 에이전트소프트</div> <ul class="Content Style2"> <li>대표이사 : 김정태</li> <li>개인정보보호 책임자 : 한종욱</li> <li>주소 : 서울특별시 구로구 디지털로33길 12 우림 e-biz센터 2차 211호</li> <li>사업자등록번호 : 204-81-48925 ((주) 에이전트소프트 해피캠퍼스 사업부)</li> <li>통신판매업 신고 : 2004-01560 <a href="javascript:void(0);" onclick="Common.openBizInfoWin();return false;" class="Business">사업자 정보 확인</a></li> <li>호스팅 서비스사업자 : (주) 에이전트소프트 해피캠퍼스사업부</li> </ul> </li> <li class="Text"> <div class="Title">고객센터</div> <ul class="Content"> <li>전화번호 : 02) 890-3333</li> <li>E-mail : <a href="mailto:hd@happycampus.com">hd@happycampus.com</a></li> </ul> <div class="BtnBox"> <button class="Button_13"> <a href="https://www.happycampus.com/helpdesk/ask/" target="_blank"> 1:1 문의하기 </a> </button> <button class="Button_13"> <a href="https://www.happycampus.com/helpdesk" target="_blank" onclick="Common.hcLogTrace(215, 701);"> 고객센터 </a> </button> </div> </li> </ul> <ul class="Ul-WGOUKTR" style="position: relative"> <li> (주) 에이전트소프트는 판매중개자 이며 판매의 거래당사자가 아닙니다. 입점판매자가 등록한 상품정보 및 거래에 대해 (주) 에이전트소프트는 일체 책임을 지지 않습니다. <br> 해피캠퍼스 사이트의 상품/판매회원/중개 서비스/거래 정보, 콘텐츠, UI 등에 대한 무단복제, 전송, 배포, 스크래핑 등의 행위는 저작권법, 콘텐츠산업 진흥법 등 관련법령에 의하여 엄격히 금지됩니다. <button class="BtnLayerIndustry" onclick="$('#PopupIndustry').show();"> <span>안내보기</span> <img src="/icon/v5/layout/icon_31.svg" alt=""> </button> <div class="Modal_3" id="PopupIndustry"> <div class="BtnBox"> <button class="BtnLayerClose" onclick="$('#PopupIndustry').hide();"> <img src="/icon/v5/layout/icon_32.svg" alt="닫기"> </button> </div> <div class="Head"> 콘텐츠 산업 진흥법에 따른 표시 </div> <div class="Body"> <div> <strong>1. 콘텐츠의 명칭</strong> : 상품/판매회원/중개 서비스 및 거래 정보 등 <br> <strong>2. 제작년월일</strong> : 개별 콘텐츠의 게시일 또는 갱신일 <br> <strong>3. 제작자</strong> : 개별 판매회원 </div> <div class="ImgBox"> <img src="/images/v5/common/img_4.png" alt=""> </div> </div> <div class="Foot"> 해피캠퍼스 사이트 상의 모든 콘텐츠는 '콘텐츠산업 진흥법'에 따라 개시일 또는 그 갱신일로부터 5년간 보호됩니다. <br> (제작자의 동의 없는 무단 복제 및 이용 등을 금함) </div> </div> </li> <li> Copyright © AGENTSOFT Co., LTD. All rights reserved. </li> </ul> </footer> <script async src="https://www.googletagmanager.com/gtag/js?id=G-4GNWNPYGY1"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'G-4GNWNPYGY1', { 'page_path': '/aiWrite/topicWiki/' }); </script>  <script> !function(f,b,e,v,n,t,s){ if(f.fbq)return;n=f.fbq=function(){n.callMethod?n.callMethod.apply(n,arguments):n.queue.push(arguments)}; if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0'; n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0]; s.parentNode.insertBefore(t,s)}(window,document,'script','https://connect.facebook.net/en_US/fbevents.js'); fbq('init', '1016558708492179'); fbq('track', 'PageView'); </script> <noscript> <img height="1" width="1" src="https://www.facebook.com/tr?id=1016558708492179&ev=PageView&noscript=1" alt="facebook pixel" /> </noscript>  <script type="text/javascript" src="https://wcs.naver.net/wcslog.js"> </script> <script type="text/javascript"> if (!wcs_add) var wcs_add={}; wcs_add["wa"] = "s_33f71c582cec"; if (!_nasa) var _nasa={}; wcs.inflow("happycampus.com"); wcs_do(_nasa); </script> <script type="text/javascript"> if(!wcs_add) var wcs_add = {}; wcs_add["wa"] = "9cd1b8e189e028"; wcs_do(); </script>  <script defer async src="https://cdn.megadata.co.kr/dist/prod/v2/mtm.js?adverId=agentsoft&device=W"> </script> </div> <script type="text/javascript" src="/js/jquery-ui.min.js?jsVer=20251021.0"></script> <script type="text/javascript" src="/js/common.js?jsVer=20251021.0"></script> <script type="text/javascript" src="/js/aiWrite/aiWrite.js?jsVer=20251021.0"></script> <script type="text/javascript" src="/js/knowhowTalkNotify.js?jsVer=20251021.0"></script> <script type="text/javascript" src="/js/search/searchBar.js?jsVer=20251021.0"></script> <script type="text/javascript" src="/js/docDetailAiSummaryTest.js?jsVer=20251021.0"></script> <script type="text/javascript" src="/js/banner.js?jsVer=20251021.0"></script> <script type="text/javascript" src="/js/jquery/plugins/jquery.keyTrigger.js?jsVer=20251021.0"></script> <script type="text/javascript" src="/js/jquery/plugins/jquery.autoSuggest.js?jsVer=20251021.0"></script> <script type="text/javascript" src="/js/autokeyword.js?jsVer=20251021.0"></script> <script type="text/javascript" src="/js/jquery/plugins/jquery.form.js?jsVer=20251021.0"></script> <script type="text/javascript" src="/js/myshop.js?jsVer=20251021.0"></script> <script type="text/javascript" src="/js/cart.js?jsVer=20251021.0"></script> <script type="text/javascript" src="/js/sellManager.js?jsVer=20251021.0"></script> <script type="text/javascript" src="/js/docManager.js?jsVer=20251021.0"></script> <script type="text/javascript" src="/js/aiWrite/Common.js?ver=2&jsVer=20251021.0"></script> <script type="text/javascript" src="/js//aiWrite/topicWiki.js?jsVer=20251021.0"></script> <script type="text/javascript" src="/js/aiWrite/searchTopicRelatedDoc.js?jsVer=20251021.0"></script> </body> </html>