[HTML] 기본구조

HTML

[HTML] 기본구조

wwxs 2024. 7. 26. 17:37

HTML (HyperText Markup Language)

= 웹 페이지를 만들기 위한 표준 마크업 언어

태그 <>: 웹 브라우저가 각 부분을 구별하여 인식하기 위해 붙이는 꼬리

HTML 기본 구조

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

<!DOCTYPE html> : 문서 유형을 지정 (html로 사용하겠다라는 의미)

<html> ~ <html> : HTML 요소

<html lang= "ko"> : lang 속성으로 문자에서 사용할 언어를 지정

<head> ~ </head> : Head 요소

문서의 메타데이터(metadata)를 포함

화면에 표시되지 않는다

<body> ~ </body> : Body 요소

실제로 웹 브라우저 화면에 나타나는 내용

HTML 요소의 구조

열린태그 내용 닫힌태그

요소(블록 레벨 요소, 인라인 레벨 요소)

블록 레벨 요소 (Block-level elements)

: 웹 페이지 상에 블록(Block)을 만드는 요소 -> 앞뒤 요소 사이에 새로운 줄(Line) 생성

HTML의 블록 레벨 요소

<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr> <li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot> <ul> <video>

인라인 레벨 요소 (Inline-level elements)

: 항상 블록 레벨 요소 내에 포함되는 요소 -> 인라인 요소는 새로운 줄(Line) 생성하지 않음

HTML의 인라인 레벨 요소

<a> <abbr> <acronym> <b> <bdo> <big> <br> <button> <cite> <code> <dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <output> <q> <samp> <script> <select> <small> <span> <strong> <sub> <sup> <textarea> <time> <tt> <var>