html(HyperText Markup Language)는 웹을 이루는 가장 기초적인 구성 요소이다.
html은 markup language로 pragramming language가 아니다.
자세한 웹의 구조와 배경은 다음의 "웹 개발 Intro"를 참조하라.
웹개발 인트로 (개념, 구조, 공부방향)
왜 웹 개발을 해야 하나? 진정으로 univeral(디바이스에 비종속적인)한 UX(사용자 경험) 제공 가능. 자신의 아이디어를 서비스로 빠르게 개발하고 배포할 수 있다. 사업/창업에 적합. 웹 개발자에 대
amkorousagi-money.tistory.com
HTML 구성 요소
정말 단순 명료하다.
- 태그(tag) : 여는 태그 = "<"+"태그 이름"(+"속성")+">", 닫는 태그="<"+"/"+"태그 이름"+">"
- 속성(attribute) = "속성 이름"+"="+"속성 값(value)"
- 내용(content) = 그냥 text
- 요소(element) = 여는 태그 + 내용 + 닫는 태그
단, attribute는 다음을 항상 지켜야 된다.
- 요소 이름 또는 이전 attribute와 한 칸의 공백(space)
- attribute name 뒤 "="
- attribute value는 인용부호 ""로 감싸기
중첩 요소(Nesting elements)
json, xml과 같은 다른 언어들도 이러한 중첩 구조를 통해 정보를 표현한다.
elements를 다른 elements에 넣을 수 있다.
또, 중첩 시 여는 태그 닫는 태그의 순서는 "선입 후출"이다.
(먼저 연 태그를 제일 나중에 닫고, 나중에 연 태그를 먼저 닫기)
<p>My cat is <strong>very</strong> grumpy.</p>위 코드는 올바른 선입 후출의 예이다.
<p>My cat is <strong>very grumpy.</p></strong>위 코드는 잘못된 예이다. 나중에 연 <strong>을 <p>보다 먼저 닫아야 한다.
비어있는 요소
어떤 elements는 content가 없다. 이들을 empty elements라고 부른다.
content가 없으니 닫는 태그도 없다. <img> 같은 text가 content로 필요 없는 요소들이 대부분 이 경우이다.
<img src="images/firefox-icon.png" alt="My test image">위 코드는 empty elements의 예이다. 이미지를 HTML 페이지에 박는(embed) 게 목적이라 text가 content로 필요 없다.
HTML document의 구성요소
html 요소들이 모여 html 문서가 된다. 이 문서의 기본 형식을 표현하는 특정 요소들이 있다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My test page</title>
</head>
<body>
<img src="images/firefox-icon.png" alt="My test image">
</body>
</html>- <!DOCTYPE html> : 이 문서는 html로 쓰여졌다.
- <html>...</html> : root element라고도 불리는 전체 페이지의 모든 content를 감싸는 element
- <head>...</head> : page's viewer에게 보이고 싶지 않은 모든 걸 넣는 container, seo(검색엔진 최적화)에서 중요한 역할을 함. meta-data(데이터를 설명하는 데이터), description, keywords, CSS, character set 등을 이 안에 넣음.
- <meta charset="utf-8'> : 문자 인코딩 정보를 표현
- <title>...</title> : 브라우저 탭에서 보이는 페이지의 제목
- <body>...</body> : page's veiwer에게 보이고 싶은 모든 걸 넣는 container.
그 외 자세한 태그를 알고 싶다면
w3school을 참고하라.
TagDescription
| <!--...--> | Defines a comment |
| <!DOCTYPE> | Defines the document type |
| <a> | Defines a hyperlink |
| <abbr> | Defines an abbreviation or an acronym |
| <acronym> | Not supported in HTML5. Use <abbr> instead. Defines an acronym |
| <address> | Defines contact information for the author/owner of a document |
| <applet> | Not supported in HTML5. Use <embed> or <object> instead. Defines an embedded applet |
| <area> | Defines an area inside an image map |
| <article> | Defines an article |
| <aside> | Defines content aside from the page content |
| Defines embedded sound content | |
| <b> | Defines bold text |
| <base> | Specifies the base URL/target for all relative URLs in a document |
| <basefont> | Not supported in HTML5. Use CSS instead. Specifies a default color, size, and font for all text in a document |
| <bdi> | Isolates a part of text that might be formatted in a different direction from other text outside it |
| <bdo> | Overrides the current text direction |
| <big> | Not supported in HTML5. Use CSS instead. Defines big text |
| <blockquote> | Defines a section that is quoted from another source |
| <body> | Defines the document's body |
| <br> | Defines a single line break |
| <button> | Defines a clickable button |
| <canvas> | Used to draw graphics, on the fly, via scripting (usually JavaScript) |
| <caption> | Defines a table caption |
| <center> | Not supported in HTML5. Use CSS instead. Defines centered text |
| <cite> | Defines the title of a work |
| <code> | Defines a piece of computer code |
| <col> | Specifies column properties for each column within a <colgroup> element |
| <colgroup> | Specifies a group of one or more columns in a table for formatting |
| <data> | Adds a machine-readable translation of a given content |
| <datalist> | Specifies a list of pre-defined options for input controls |
| <dd> | Defines a description/value of a term in a description list |
| <del> | Defines text that has been deleted from a document |
| <details> | Defines additional details that the user can view or hide |
| <dfn> | Specifies a term that is going to be defined within the content |
| <dialog> | Defines a dialog box or window |
| <dir> | Not supported in HTML5. Use <ul> instead. Defines a directory list |
| <div> | Defines a section in a document |
| <dl> | Defines a description list |
| <dt> | Defines a term/name in a description list |
| <em> | Defines emphasized text |
| <embed> | Defines a container for an external application |
| <fieldset> | Groups related elements in a form |
| <figcaption> | Defines a caption for a <figure> element |
| <figure> | Specifies self-contained content |
| <font> | Not supported in HTML5. Use CSS instead. Defines font, color, and size for text |
| <footer> | Defines a footer for a document or section |
| <form> | Defines an HTML form for user input |
| <frame> | Not supported in HTML5. Defines a window (a frame) in a frameset |
| <frameset> | Not supported in HTML5. Defines a set of frames |
| <h1> to <h6> | Defines HTML headings |
| <head> | Contains metadata/information for the document |
| <header> | Defines a header for a document or section |
| <hr> | Defines a thematic change in the content |
| <html> | Defines the root of an HTML document |
| <i> | Defines a part of text in an alternate voice or mood |
| <iframe> | Defines an inline frame |
| <img> | Defines an image |
| <input> | Defines an input control |
| <ins> | Defines a text that has been inserted into a document |
| <kbd> | Defines keyboard input |
| <label> | Defines a label for an <input> element |
| <legend> | Defines a caption for a <fieldset> element |
| <li> | Defines a list item |
| <link> | Defines the relationship between a document and an external resource (most used to link to style sheets) |
| <main> | Specifies the main content of a document |
| <map> | Defines an image map |
| <mark> | Defines marked/highlighted text |
| <meta> | Defines metadata about an HTML document |
| <meter> | Defines a scalar measurement within a known range (a gauge) |
| <nav> | Defines navigation links |
| <noframes> | Not supported in HTML5. Defines an alternate content for users that do not support frames |
| <noscript> | Defines an alternate content for users that do not support client-side scripts |
| <object> | Defines a container for an external application |
| <ol> | Defines an ordered list |
| <optgroup> | Defines a group of related options in a drop-down list |
| <option> | Defines an option in a drop-down list |
| <output> | Defines the result of a calculation |
| <p> | Defines a paragraph |
| <param> | Defines a parameter for an object |
| <picture> | Defines a container for multiple image resources |
| <pre> | Defines preformatted text |
| <progress> | Represents the progress of a task |
| <q> | Defines a short quotation |
| <rp> | Defines what to show in browsers that do not support ruby annotations |
| <rt> | Defines an explanation/pronunciation of characters (for East Asian typography) |
| <ruby> | Defines a ruby annotation (for East Asian typography) |
| <s> | Defines text that is no longer correct |
| <samp> | Defines sample output from a computer program |
| <script> | Defines a client-side script |
| <section> | Defines a section in a document |
| <select> | Defines a drop-down list |
| <small> | Defines smaller text |
| <source> | Defines multiple media resources for media elements (<video> and <audio>) |
| <span> | Defines a section in a document |
| <strike> | Not supported in HTML5. Use <del> or <s> instead. Defines strikethrough text |
| <strong> | Defines important text |
| <style> | Defines style information for a document |
| <sub> | Defines subscripted text |
| <summary> | Defines a visible heading for a <details> element |
| <sup> | Defines superscripted text |
| <svg> | Defines a container for SVG graphics |
| <table> | Defines a table |
| <tbody> | Groups the body content in a table |
| <td> | Defines a cell in a table |
| <template> | Defines a container for content that should be hidden when the page loads |
| <textarea> | Defines a multiline input control (text area) |
| <tfoot> | Groups the footer content in a table |
| <th> | Defines a header cell in a table |
| <thead> | Groups the header content in a table |
| <time> | Defines a specific time (or datetime) |
| <title> | Defines a title for the document |
| <tr> | Defines a row in a table |
| <track> | Defines text tracks for media elements (<video> and <audio>) |
| <tt> | Not supported in HTML5. Use CSS instead. Defines teletype text |
| <u> | Defines some text that is unarticulated and styled differently from normal text |
| <ul> | Defines an unordered list |
| <var> | Defines a variable |
| <video> | Defines embedded video content |
| <wbr> | Defines a possible line-break |
HTML Reference
w3schools.com --> THE WORLD'S LARGEST WEB DEVELOPER SITE
www.w3schools.com
파이어폭스 웹브라우저 개발자 공식문서 mozila의 내용을 참고하여 포스팅하였다.
HTML: Hypertext Markup Language | MDN
와 요소를 통해 외부 프로그램 없이 오디오와 비디오 미디어를 재생할 수 있습니다. HTML 요소는 공통 특성을 공유하는 요소끼리 묶는 콘텐츠 카테고리 한 가지 이상에 속할 수 있습니다. 콘텐츠
developer.mozilla.org
'개발 > Web' 카테고리의 다른 글
| DOM 은 무엇인가? (0) | 2021.02.28 |
|---|---|
| 웹팩과 바벨 개념과 역할 (0) | 2021.02.28 |
| 웹개발 인트로 (개념, 구조, 공부방향) (0) | 2021.02.23 |
| JavaScript 기본 문법 정리 (0) | 2021.02.21 |
| CSS 기본 문법 정리 (0) | 2021.02.20 |
댓글