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="34745"><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="13958"><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="12423"><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="10990"><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="10273"><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.1.1" id="disqus_count-js"></script>
<script type="text/javascript" id="disqus_embed-js-extra">
/* <![CDATA[ */
var embedVars = {"disqusConfig":{"integration":"wordpress 3.1.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=61b4ac36aa","width":"800","height":"700"},"api_key":"SOCK0flsrD3ELflVWugZltunKRzeN17TJFCI8ednzdv1KBxUJHHMoriG1dvGL30t","remote_auth_s3":"W10= bc02ab42cdf5d87e97dd9859cff997eb83441031 1722068297"},"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.1.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":"18d7cd9b87"};
/* ]]> */
</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.5.5" 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":"18d7cd9b87","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.5.5" 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{w3tc_pagecache_reject_reason}을(를) 사용하는 페이지 캐싱
Served from: gawoori.net @ 2024-07-27 17:18:17 by W3 Total Cache
-->