Skip to main content
Uncategorized

HTML 기초: 웹 페이지 구성 시작하기

By 2023-03-27No Comments

HTML은 웹 페이지를 만들기 위해 필요한 가장 기본적인 언어입니다. HTML로 작성된 웹 페이지는 인터넷 브라우저를 통해 보여지며, 많은 웹 사이트와 애플리케이션에서 사용됩니다.

HTML은 Hyper Text Markup Language의 약자이며, 웹 페이지 내에서 텍스트, 이미지, 비디오 등 다양한 내용을 구성하기 위한 태그를 제공합니다. HTML을 배우기 시작하려면 먼저 웹 페이지 구성의 기초를 이해해야 합니다.

웹 페이지 구성을 시작하기 위해서는 먼저 HTML 파일을 만들어야 합니다. HTML 파일은 일반적으로 .html 확장자를 가지며, 기본적으로 텍스트 기반의 파일입니다. 파일을 생성한 후 HTML 문서의 기본 구조를 작성해야 합니다.

HTML 문서의 기본 구조는 다음과 같습니다.

“`html



웹 페이지 제목


웹 페이지 내용


“`

HTML 문서의 가장 상단에는 ``을 작성해야 합니다. 이것은 웹 페이지가 HTML5로 작성된 것임을 브라우저에게 알리는 역할을 합니다. 그 다음, `` 태그로 전체 문서 구조를 감싸고, `` 태그 내에는 웹 페이지의 제목(``)과 같은 메타 데이터를 작성합니다.</p> <p>웹 페이지의 본문 내용은 `<body>` 태그 내에 작성합니다. 웹 페이지 내용은 텍스트뿐만 아니라, 이미지, 비디오, 테이블 등 다양한 요소들을 포함할 수 있습니다. 각 요소들은 다른 태그를 사용하여 표현됩니다.</p> <p>예를 들어, 이미지를 웹 페이지에 추가하려면 다음과 같이 작성합니다.</p> <p>“`html<br /> <br /> “`</p> <p>이미지 파일 경로는 이미지 파일이 위치한 경로를 입력하고, 대체 텍스트는 이미지를 표시할 수 없을 때 대신 보여질 텍스트를 입력합니다.</p> <p>이와 같이 각 요소들을 적절한 태그와 함께 작성하면 웹 페이지를 보다 정확하고 구조화된 방법으로 구성할 수 있습니다.</p> <p>HTML 뿐만 아니라 CSS와 JavaScript를 배워 웹 페이지를 더욱 다양하고 동적으로 만들 수 있습니다. HTML의 기초를 탄탄히 다지고, 다음 단계로 나아갈 준비를 하세요.</p> </div> </div><!--/post-content--> </div><!--/inner-wrap--> </article> </div><!--/post-area--> <div id="sidebar" data-nectar-ss="false" class="col span_3 col_last"> <div id="nectar_popular_posts-6" class="widget nectar_popular_posts_widget"><ul class="nectar_blog_posts_popular nectar_widget" data-style="hover-featured-image"><li class="has-img" data-views="33566"><a href="https://gawoori.net/srt-%ec%9e%90%eb%a7%89%ed%8c%8c%ec%9d%bc%ec%9d%84-txt-%ed%8c%8c%ec%9d%bc%eb%a1%9c-%eb%b3%80%ed%99%98%ed%95%98%ea%b8%b0/"> <div class="popular-featured-img" style="background-image: url(https://gawoori.net/wp-content/uploads/2018/10/original-file-svg-file-nominally-822-754-pixels-file-size-33.png);"></div><span class="meta-wrap"><span class="post-title">SRT 자막파일을 TXT 파일로 변환하기</span> <span class="post-date">2018-10-15</span></span></a></li><li class="has-img" data-views="13600"><a href="https://gawoori.net/wix-vs-wordpress-%ec%96%b4%eb%8a%90%ea%b2%83%ec%9d%b4-%eb%8d%94-%eb%82%98%ec%9d%84%ea%b9%8c-%ec%9e%a5%eb%8b%a8%ec%a0%90-%eb%b9%84%ea%b5%90/"> <div class="popular-featured-img" style="background-image: url(https://gawoori.net/wp-content/uploads/2018/10/WP-WX.png);"></div><span class="meta-wrap"><span class="post-title">Wix vs. WordPress – 어느것이 더 나을까? (장단점 비교)</span> <span class="post-date">2018-10-11</span></span></a></li><li class="has-img" data-views="11765"><a href="https://gawoori.net/%eb%ac%b8%ec%9e%90%ec%97%b4%ec%97%90-%eb%b3%80%ec%88%98-%ec%b6%94%ea%b0%80/"> <div class="popular-featured-img" style="background-image: url(https://gawoori.net/wp-content/uploads/2018/05/apple-black-and-white-camera-6482-600x403.jpg);"></div><span class="meta-wrap"><span class="post-title">[자바스크립트] 28. 문자열에 변수 추가</span> <span class="post-date">2019-02-12</span></span></a></li><li class="has-img" data-views="10320"><a href="https://gawoori.net/wordpress-%eb%8c%93%ea%b8%80%ec%97%90-%ec%9d%b4%eb%af%b8%ec%a7%80-%ec%b2%a8%eb%b6%80%eb%a5%bc-%ed%97%88%ec%9a%a9%ed%95%98%eb%8a%94-%eb%b0%a9%eb%b2%95/"> <div class="popular-featured-img" style="background-image: url(https://gawoori.net/wp-content/uploads/2018/05/code-coding-computer-879109-600x403.jpg);"></div><span class="meta-wrap"><span class="post-title">[워드프레스] WordPress 댓글에 이미지 첨부를 허용하는 방법</span> <span class="post-date">2018-06-02</span></span></a></li><li data-views="9898"><a href="https://gawoori.net/javascript%eb%a1%9c-%ec%88%ab%ec%9e%90-%ec%a6%9d%ea%b0%80%ec%8b%9c%ed%82%a4%ea%b8%b0/"> <span class="meta-wrap"><span class="post-title">[자바스크립트] 11. JavaScript로 숫자 증가시키기</span> <span class="post-date">2018-05-02</span></span></a></li></ul></div> </div><!--/sidebar--> </div><!--/row--> <div class="row"> <div class="comments-section" data-author-bio="false"> <div id="disqus_thread"></div> </div> </div><!--/row--> </div><!--/container main-content--> </div><!--/container-wrap--> <div class="nectar-social fixed" data-position="" data-rm-love="0" data-color-override="override"><a href="#"><i class="icon-default-style steadysets-icon-share"></i></a><div class="nectar-social-inner"><a class='facebook-share nectar-sharing' href='#' title='Share this'> <i class='fa fa-facebook'></i> <span class='social-text'>Share</span> </a><a class='twitter-share nectar-sharing' href='#' title='Tweet this'> <i class='fa fa-twitter'></i> <span class='social-text'>Tweet</span> </a><a class='linkedin-share nectar-sharing' href='#' title='Share this'> <i class='fa fa-linkedin'></i> <span class='social-text'>Share</span> </a><a class='pinterest-share nectar-sharing' href='#' title='Pin this'> <i class='fa fa-pinterest'></i> <span class='social-text'>Pin</span> </a></div></div> <div id="footer-outer" data-cols="1" data-custom-color="true" data-disable-copyright="false" data-matching-section-color="true" data-copyright-line="true" data-using-bg-img="false" data-bg-img-overlay="0.8" data-full-width="false" data-using-widget-area="true" data-link-hover="default"> <div id="footer-widgets" data-has-widgets="true" data-cols="1"> <div class="container"> <div class="row"> <div class="col span_12"> <div id="nav_menu-7" class="widget widget_nav_menu"><div class="menu-td-demo-footer-menu-container"><ul id="menu-td-demo-footer-menu" class="menu"><li id="menu-item-6402" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6402"><a href="https://gawoori.net/about">About Us</a></li> <li id="menu-item-6405" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-6405"><a href="https://gawoori.net/contact/">Contact Us</a></li> </ul></div></div> </div> </div> </div><!--/container--> </div><!--/footer-widgets--> <div class="row" id="copyright" data-layout="default"> <div class="container"> <div class="col span_7 col_last"> <ul class="social"> </ul> </div><!--/span_7--> <div class="col span_5"> <div class="widget"></div> <p>© 2024 가우리. </p> </div><!--/span_5--> </div><!--/container--> </div><!--/row--> </div><!--/footer-outer--> <div id="slide-out-widget-area-bg" class="slide-out-from-right dark"> </div> <div id="slide-out-widget-area" class="slide-out-from-right" data-dropdown-func="separate-dropdown-parent-link" data-back-txt="Back"> <div class="inner-wrap"> <div class="inner" data-prepend-menu-mobile="false"> <a class="slide_out_area_close" href="#"><span class="screen-reader-text">Close Menu</span> <span class="close-wrap"> <span class="close-line close-line1"></span> <span class="close-line close-line2"></span> </span> </a> <div class="off-canvas-menu-container mobile-only" role="navigation"> <ul class="menu"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-5194"><a href="https://gawoori.net/wordpress/">WordPress</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-7509"><a href="https://gawoori.net/wordpress/aws/">AWS</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-7512"><a href="https://gawoori.net/wordpress/plugins/">Plugins</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-7511"><a href="https://gawoori.net/wordpress/woocommerce/">Woocommerce</a></li> </ul> </li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6029"><a href="https://gawoori.net/news/">News</a></li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-6185"><a>Coding</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5191"><a href="https://gawoori.net/coding/javascript/">Javascript</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-7215"><a href="https://gawoori.net/coding/c-linux/">C Linux & Terminal</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-6899"><a href="https://gawoori.net/coding/vb-net/">VB.Net</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-7952"><a href="https://gawoori.net/coding/php-mysql/">PHP & MySQL</a></li> </ul> </li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-has-children menu-item-7505"><a href="https://gawoori.net/other/">Other</a> <ul class="sub-menu"> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-7508"><a href="https://gawoori.net/other/tips/">Tips</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-7507"><a href="https://gawoori.net/other/personal/">Personal</a></li> <li class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-7510"><a href="https://gawoori.net/reviews/">Reviews</a></li> </ul> </li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6359"><a href="https://gawoori.net/contact/">Contact</a></li> </ul> <ul class="menu secondary-header-items"> </ul> </div> </div> <div class="bottom-meta-wrap"><ul class="off-canvas-social-links"></ul></div><!--/bottom-meta-wrap--></div> <!--/inner-wrap--> </div> </div> <!--/ajax-content-wrap--> <a id="to-top" aria-label="Back to top" href="#" class="mobile-enabled"><i role="presentation" class="fa fa-angle-up"></i></a> </div></div><!--/ocm-effect-wrap--><link data-pagespeed-no-defer data-nowprocket data-wpacu-skip data-no-optimize data-noptimize rel='stylesheet' id='main-styles-non-critical-css' href='https://gawoori.net/wp-content/themes/salient/css/build/style-non-critical.css?ver=16.1.2' type='text/css' media='all' /> <link data-pagespeed-no-defer data-nowprocket data-wpacu-skip data-no-optimize data-noptimize rel='stylesheet' id='magnific-css' href='https://gawoori.net/wp-content/themes/salient/css/build/plugins/magnific.css?ver=8.6.0' type='text/css' media='all' /> <link data-pagespeed-no-defer data-nowprocket data-wpacu-skip data-no-optimize data-noptimize rel='stylesheet' id='nectar-ocm-core-css' href='https://gawoori.net/wp-content/themes/salient/css/build/off-canvas/core.css?ver=16.1.2' type='text/css' media='all' /> <link data-pagespeed-no-defer data-nowprocket data-wpacu-skip data-no-optimize data-noptimize rel='stylesheet' id='nectar-ocm-slide-out-right-material-css' href='https://gawoori.net/wp-content/themes/salient/css/build/off-canvas/slide-out-right-material.css?ver=16.1.2' type='text/css' media='all' /> <link data-pagespeed-no-defer data-nowprocket data-wpacu-skip data-no-optimize data-noptimize rel='stylesheet' id='nectar-ocm-slide-out-right-hover-css' href='https://gawoori.net/wp-content/themes/salient/css/build/off-canvas/slide-out-right-hover.css?ver=16.1.2' type='text/css' media='all' /> <script type="text/javascript" id="disqus_count-js-extra"> /* <![CDATA[ */ var countVars = {"disqusShortname":"gawoori"}; /* ]]> */ </script> <script type="text/javascript" src="https://gawoori.net/wp-content/plugins/disqus-comment-system/public/js/comment_count.js?ver=3.0.24.1" id="disqus_count-js"></script> <script type="text/javascript" id="disqus_embed-js-extra"> /* <![CDATA[ */ var embedVars = {"disqusConfig":{"integration":"wordpress 3.0.24.1","sso":{"name":"\uac00\uc6b0\ub9ac","button":"","url":"https:\/\/gawoori.net\/wp-login.php?redirect_to=https%3A%2F%2Fgawoori.net%2Fwp-admin%2Fprofile.php%3Fopener%3Ddsq-sso-login","logout":"https:\/\/gawoori.net\/wp-login.php?action=logout&_wpnonce=1a15f693a9","width":"800","height":"700"},"api_key":"SOCK0flsrD3ELflVWugZltunKRzeN17TJFCI8ednzdv1KBxUJHHMoriG1dvGL30t","remote_auth_s3":"W10= ba43c13616b7539713921fe5d4ec96bd86339a36 1711386694"},"disqusIdentifier":"8893 https:\/\/gawoori.net\/html-%ea%b8%b0%ec%b4%88-%ec%9b%b9-%ed%8e%98%ec%9d%b4%ec%a7%80-%ea%b5%ac%ec%84%b1-%ec%8b%9c%ec%9e%91%ed%95%98%ea%b8%b0\/","disqusShortname":"gawoori","disqusTitle":"HTML \uae30\ucd08: \uc6f9 \ud398\uc774\uc9c0 \uad6c\uc131 \uc2dc\uc791\ud558\uae30","disqusUrl":"https:\/\/gawoori.net\/html-%ea%b8%b0%ec%b4%88-%ec%9b%b9-%ed%8e%98%ec%9d%b4%ec%a7%80-%ea%b5%ac%ec%84%b1-%ec%8b%9c%ec%9e%91%ed%95%98%ea%b8%b0\/","postId":"8893"}; /* ]]> */ </script> <script type="text/javascript" src="https://gawoori.net/wp-content/plugins/disqus-comment-system/public/js/comment_embed.js?ver=3.0.24.1" id="disqus_embed-js"></script> <script type="text/javascript" id="salient-social-js-extra"> /* <![CDATA[ */ var nectarLove = {"ajaxurl":"https:\/\/gawoori.net\/wp-admin\/admin-ajax.php","postID":"8893","rooturl":"https:\/\/gawoori.net","loveNonce":"496bc60bd3"}; /* ]]> */ </script> <script type="text/javascript" src="https://gawoori.net/wp-content/plugins/salient-social/js/salient-social.js?ver=1.2.4" id="salient-social-js"></script> <script type="text/javascript" src="https://gawoori.net/wp-content/plugins/simple-code-highlighter/js/pretty.js?ver=6.4.3" id="pretty-js"></script> <script type="text/javascript" src="https://gawoori.net/wp-content/themes/salient/js/build/third-party/jquery.easing.min.js?ver=1.3" id="jquery-easing-js"></script> <script type="text/javascript" src="https://gawoori.net/wp-content/themes/salient/js/build/third-party/jquery.mousewheel.min.js?ver=3.1.13" id="jquery-mousewheel-js"></script> <script type="text/javascript" src="https://gawoori.net/wp-content/themes/salient/js/build/priority.js?ver=16.1.2" id="nectar_priority-js"></script> <script type="text/javascript" src="https://gawoori.net/wp-content/themes/salient/js/build/third-party/transit.min.js?ver=0.9.9" id="nectar-transit-js"></script> <script type="text/javascript" src="https://gawoori.net/wp-content/themes/salient/js/build/third-party/waypoints.js?ver=4.0.2" id="nectar-waypoints-js"></script> <script type="text/javascript" src="https://gawoori.net/wp-content/plugins/salient-portfolio/js/third-party/imagesLoaded.min.js?ver=4.1.4" id="imagesLoaded-js"></script> <script type="text/javascript" src="https://gawoori.net/wp-content/themes/salient/js/build/third-party/hoverintent.min.js?ver=1.9" id="hoverintent-js"></script> <script type="text/javascript" src="https://gawoori.net/wp-content/themes/salient/js/build/third-party/magnific.js?ver=7.0.1" id="magnific-js"></script> <script type="text/javascript" src="https://gawoori.net/wp-content/themes/salient/js/build/third-party/anime.min.js?ver=4.5.1" id="anime-js"></script> <script type="text/javascript" src="https://gawoori.net/wp-content/themes/salient/js/build/third-party/superfish.js?ver=1.5.8" id="superfish-js"></script> <script type="text/javascript" id="nectar-frontend-js-extra"> /* <![CDATA[ */ var nectarLove = {"ajaxurl":"https:\/\/gawoori.net\/wp-admin\/admin-ajax.php","postID":"8893","rooturl":"https:\/\/gawoori.net","disqusComments":"false","loveNonce":"496bc60bd3","mapApiKey":""}; var nectarOptions = {"delay_js":"false","quick_search":"false","react_compat":"disabled","header_entrance":"false","simplify_ocm_mobile":"0","mobile_header_format":"default","ocm_btn_position":"default","left_header_dropdown_func":"default","ajax_add_to_cart":"0","ocm_remove_ext_menu_items":"remove_images","woo_product_filter_toggle":"0","woo_sidebar_toggles":"true","woo_sticky_sidebar":"0","woo_minimal_product_hover":"default","woo_minimal_product_effect":"default","woo_related_upsell_carousel":"false","woo_product_variable_select":"default"}; var nectar_front_i18n = {"menu":"Menu","next":"Next","previous":"Previous","close":"Close"}; /* ]]> */ </script> <script type="text/javascript" src="https://gawoori.net/wp-content/themes/salient/js/build/init.js?ver=16.1.2" id="nectar-frontend-js"></script> <script type="text/javascript" src="https://gawoori.net/wp-content/plugins/salient-core/js/third-party/touchswipe.min.js?ver=1.0" id="touchswipe-js"></script> <script type="text/javascript" src="https://gawoori.net/wp-includes/js/comment-reply.min.js?ver=6.4.3" id="comment-reply-js" async="async" data-wp-strategy="async"></script> <script></script></body> </html> <!-- Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/ Disk: Enhanced 을(를) 사용하는 페이지 캐싱 Disk을(를) 사용하여 0.160 초 내에 2/114 쿼리를 데이터베이스 캐싱 중 Served from: gawoori.net @ 2024-03-26 02:11:34 by W3 Total Cache -->