[HTML] HTML 기초 - HTML, 웹(Web), 요소(Element), 속성(Attribute)

WHAT’s HTML?

Hyper Text Markup Language의 약자

2014년 이전에는 수많은 경쟁 업체들이 각자 다른 웹 규격을 사용했고,

그로 인해 소비자가 어떤 브라우저를 사용하느냐에 따라
결과나 보이는 결과가 달라서 혼선을 빚었습니다.

그러나 W3C(World Wide Web Consortium)에서 어떤 브라우저를 사용하더라도

사용자가 같은 웹 문서를 볼 수 있게 하도록 웹 표준인 HTML5를 만들었고,

이것이 오늘까지 이어지고 있습니다.

웹 서핑을 한다는 것은….

우리가 웹 서핑을 한다는 것은 그것을 가능하게 하는 데 필요한 수많은 과정을 축약한 채 말하는 것입니다.
클라이언트, 일반적으로 사용자(User)라고 부르는 사람이 웹브라우저를 통해 특정 주소로 이동을 한다는 것은
클라이언트가 서버에게 해당 주소에 있는 웹 문서(document)를 달라고 요청하는 행위라고 말 할 수 있습니다.

일반 사용자들은 그저 웹브라우저 상에 주소를 입력하게 되고,

입력한 주소대로 원하는 페이지를 보는 것이 전부이나,

그 뒤에서는 클라이언트로부터 발생한 요청에 대해 처리하고 그에 맞는 결과를 응답하는 숨겨지는 과정이 있습니다.

따라서 실제 클라이언트(일반사용자)가 실제로 마주하는

여러 화면상의 요소인 UI를 중점적으로 다루는 분야를 프론트엔드(Front-End, FE),

고객이 요청하면 그에 따라 가공된 데이터를 돌려주거나,

로그인 시 회원 정보가 일치하는지 등을 검사하는 것과 같이 보여지지 않지만

필요한 기능에 대해 중점적으로 다루는 분야를 백엔드(Back-End, BE)라고 부릅니다.

HTML의 구조 (HTML’s Structure)

`HTML`의 기본적인 구조는 아래와 같습니다.

<!DOCTYPE html>                                   <!-- 문서정의(DTD), 꼭 필수는 아니나 권장 -->
<html lang="en">
<head>                                            <!-- 문서 머리글, 제목, 검색 엔진에서 사용할 키워드 등 -->
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body> <!-- 문서의 본체 (Body), 대부분의 html tag와 내용이 들어가는 부분이자 실제 웹브라우저에 보이는 영역-->
    
</body>
</html>

HTML의 TAG

`HTML` 은 `XML`과 다르게 사용할 수 있는 태그가 정해져 있습니다.

해당 태그를 사용하지 않는다고 프로그래밍 언어처럼 오류가 나거나 실행 자체가 종료되진 않으나,

원하는 결과대로 화면이 보여지지 않는 일종의 런타임 에러 같은 형태로 오류가 발생합니다.

하지만 오류가 발생하더라도, 화면의 출력은 정상적으로 됩니다.

아래의 테이블은 이러한 HTML 문서에서 사용할 수 있는 TAG들 입니다.

TAG	설명(Description)
<!--...-->	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
<audio>	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의 GLOBAL 속성

HTML TAG에는 `<div class=`class`></div>` 와 같이 태그 앞부분에 추가로 속성값을 설정할 수 있습니다.

이 속성은 태그의 종류에 따라 서로 조금씩 다르나,

다음의 다섯 가지 속성은 태그 종류에 무방하게 모두 사용할 수 있는 속성들입니다.

글로벌 속성	설명
class	tag에 적용할 클래스의 이름을 지정(주로 css에서 선택자로 찾을 때 사용)
dir	텍스트 내용의 방향 정렬을 지정, 오른쪽(기본, ltr), 왼쪽(rtl)
id	tag에 유일한 ID를 지정함. 주로 자바스크립트에서 사용 가능한데, ID가 겹친다고 해도 스크립트 파일 상에서 오류를 잡아내진 못하고 실행해도 정상적으로 출력이 됨. 그러나 자바스크립트를 이용해 이벤트 리스너를 정해주거나 CSS 옵션을 추가할 때 원하는 데로 변하거나 조작되지 않는 일종의 런타임 오류가 발생함.
style	html 문서에서 태그에 곧바로 css를 적용하기 위한 속성 !important 다음으로 우선순위를 가진다.
title	tag에 추가 정보를 지정하고, tag에 마우스 포인터를 위치 시키면 title의 값을 표시함.

meta Tag

문서에 작성자, 날짜 등 본문에 보이지 않는 추가정보를 기술하는 태그

<meta name="" content="" http-equiv="" charset="">

name : 설명, 키워드, 저자 등의 정보 등을 기입
content : 저자 이름, 검색 키워드 등
http-equiv : refresh(문서를 자동으로 업데이트), 인코딩 설정 (contentype="")등을 갱신.
charset : 인코딩 설정 ( utf -8 등 )

Section Tag

문단의 제목을 지정할 때 사용하고, h1 ~ h6까지 있습니다.
이 태그는 `<section></section>` 태그로 묶을 수 있으며 하나의 태그로 관리할 수 있습니다.

<section>
    <h1>제목 1</h1>
    <h2>제목 2</h2>
    <h3>제목 3</h3>
    <h4>제목 4</h4>
    <h5>제목 5</h5>
    <h6>제목 6</h6>
</section>

HTML 의 특수문자

HTML에서는 `<>`와 같은 특수 문자는 별도의 기호로 사용해야 하며, 특히 공백이나 TAB의 경우

1개는 인식하나 그 이상은 아무리 HTML 문서상에서 여러 번 작성한다고 해도 1개만 반영됩니다.

따라서, HTML에서 특수문자는 아래의 HTML 태그(TAG)를 통해 여러 번 작성할 수 있습니다.

기호	화면출력
	공백
<	>
>	<
&	&
"	“
©	ⓒ
&reg	®

포멧팅 요소

HTML 문서에 여러 가지 효과를 줄 수 있는 태그들입니다.

태그	설명
<abbr>	생략된 약어 표시
<address>	연락처 정보
<blockquote>	들여쓰기
<q>	짧은 인용 문구
<cite>	참고내용 표시
<pre>	공백, 줄바꿈 등 입력된 그대로 표시
<code>	소스코드
<mark>	문자열 강조, 하이라이팅
<hr>	구분선
<b>	굵은 글씨
<strong>	진한 글씨
<i>	이탤릭체
<em>	기울임체
<big>	큰글자
<big>	작은글자
<sup>, <sub>	위첨자
<sub>	아래첨자
<s>	취소선
<u>	밑줄

'프론트엔드(Front-End) > HTML&CSS&JavaScript' 카테고리의 다른 글

[CSS] CSS 기초 - CSS의 속성과 플렉스 박스(Flex box) (0)	2024.04.22
[CSS] CSS 기초 - CSS와 선택자(Selector) (1)	2024.04.19
[HTML] HTML 기초 - HTML의 다양한 요소(Element)와 공간 분할 요소 (1)	2024.04.18

희희낙락

[HTML] HTML 기초 - HTML, 웹(Web), 요소(Element), 속성(Attribute)

WHAT’s HTML?

웹 서핑을 한다는 것은….

HTML의 구조 (HTML’s Structure)

HTML의 TAG

HTML의 GLOBAL 속성

meta Tag

Section Tag

HTML 의 특수문자

포멧팅 요소

'프론트엔드(Front-End) > HTML&CSS&JavaScript' 카테고리의 다른 글

티스토리툴바

[HTML] HTML 기초 - HTML, 웹(Web), 요소(Element), 속성(Attribute)

WHAT’s HTML?

웹 서핑을 한다는 것은….

HTML의 구조 (HTML’s Structure)

HTML의 TAG

HTML의 GLOBAL 속성

meta Tag

Section Tag

HTML 의 특수문자

포멧팅 요소

'프론트엔드(Front-End) > HTML&CSS&JavaScript' 카테고리의 다른 글

'프론트엔드(Front-End)/HTML&CSS&JavaScript' Related Articles

티스토리툴바