[HTML] HTML 기초설명

2020. 8. 27. 19:38

HTML이란?

- HTML은 HyperText Markup Language의 약자이며, HTML 문서라도 불립니다.

- HTML은 HTML 태그를 이용하여 웹페이지를 만드는 데에 사용하는 언어이며 매우 쉽게 배울 수 있습니다.

- HTML이 가지고 있는 각각의 태그와 속성들은 이미 다 정의되어있어 우리는 몇 가지의 태그들과 속성만 안다면 간단하게 웹 페이지를 만들 수 있습니다.

HTML5?

- HTML5는 HTML언어의 최신 표준 권고안입니다.

- HTML5는 기존 XML이나 XHTML과는 다르게 문법적으로 매우 유연한 언어입니다.

- HTML5는 오류를 쉽게 처리할 수 있게끔 몇 가지 기본원칙을 바탕으로 설계되어있습니다.

또한 새로운 폼 속성들을 추가하여, 폼 검증과 디자인이 간소화되었습니다.

- HTML5는 플러그인 없이도 비디오나 오디오를 비롯한 미디어 재생이 가능합니다.

HTML 태그?

- HTML 태그는 웹페이지의 디자인이나 기능을 결정하는 데 사용됩니다.

- HTML 태그는 < >로 감싸서 표현합니다.

- HTML태그는 보통 시작 태그와 종료 태그 이렇게 한쌍으로 구분됩니다.

( 종료 태그는 뒤에 /가 붙습니다.)

- 대부분의 태그가 이렇게 한 쌍으로 구분되어 있지만 시작 태그만 있고 종료 태그가 없는 태그들이 존재합니다.

(Ex. <hr> , <img>, <br> 등)

- HTML 태그는 inline 요소와 block 요소로 나누어집니다.

block 태그	inline 태그
자신의 내용으로 한 라인을 독점해서 출력합니다.	구성요소의 역할을 합니다.
모든 인라인태그를 포함 할 수 있습니다.	항상 block 태그 안에 포함되어 있으며, 기본적으로 컨텐츠가 끝나는 지점까지의 넓이를 가지고 있습니다.
가로폭 전체의 넓이를 가지는 직사각형 형태가되며 block태그 다음에는 줄바꿈이 이루어집니다.	다음에는 줄바꿈이 없고 우측에 바로 이어져서 표시가 됩니다. 자식으로 같은 inline 태그를 가질 수 있지만 block 태그를 자식으로 가지지 못합니다.
vertical-align 이나 text-align이 적용되지 않습니다.	width, height값이 적용되지 않습니다.
block요소의 대표적인 태그 <div>	inline요소의 대표적인 태그 <span>

※ 종료 태그가 없더라도 HTML 문서를 제대로 표현해 줄 수도 있습니다.

하지만 종료 태그가 없다면 예상치 못한 오류나 결과가 발생할 수 있으니 빠트리지 않고 작성하는 게 좋습니다.

HTML 요소 구조

- HTML요소는 여러 가지의 속성을 가질 수 있으며 이러한 속성은 해당 요소에 대한 추가적인 정보를 제공합니다.

- HTML요소는 시작 태그 내에서만 존재할 수 있습니다.

- HTML요소는 속성 이름과 속성 값으로 표현됩니다.

<!DOCTYPE html>

<html>

<head>

</head>

<body>

속성을 가진 태그

</p>

</body>

</html>

여기서 class는 속성 이름, attr은 속성 값이 됩니다.

- HTML요소의 속성 값은 항상 큰 따옴표 , 또는 작은 따옴표로 감싸서 사용해야 정확한 값을 저장할 수 있습니다.

속성이름	설명
id	유일한 식별자(id)를 요소에 지정한다. 중복 지정이 불가하다.
class	스타일시트에 정의된 class를 요소에 지정한다. 중복 지정이 가능하다.
hidden	css의 hidden과는 다르게 의미상으로도 브라우저에 노출되지 않게 된다.
style	요소에 스타일을 지정한다.
title	요소에 관한 제목을 지정한다. (툴팁이라 불린다)

HTML의 기본 구조

HTML의 기본 구조는 HTML 태그 사이에 헤드, 바디로 나누어집니다.
<HEAD> 태그 사이에는 META, TITLE, SCRIPT, STYLE, LINK 등의 태그들로 이루어져 있습니다.
이러한 태그들은 메타데이터라고 표현하며, 메타데이터는 웹 상에 직접적으로 표현되지 않는 정보들을 의미합니다.

META 태그

메타태그는 웹 서버와 웹 브라우저간에 상호 교환되는 정보를 정의하는 데 사용됩니다.
HTML 문서 내에 디자인에는 전혀 영향을 미치지 않고 문서가 어떠한 내용을 담고 있는지,
누가 언제 만들었는지 등의 특성을 담고 있습니다.

LINK 태그

링크 태그는 문서간 연결하거나 외부 리소스 연결시 사용됩니다.

TITLE 태그

웹 페이지의 제목을 나타내는 데에 사용됩니다. 웹페이지 본문에서는 보이지 않고 브라우저의 탭에서 확인할 수 있습니다.

SCRIPT 태그

스크립트 태그는 자바스크립트와 같이 클라이언트 사이드 스크립트를 정의하는 데에 사용됩니다.
스크립트 태그 내부에 직접적으로 코드를 작성하거나 src 속성을 사용하여 외부 스크립트 파일을 참조할 수 있습니s다.

STYLE 태그

CSS를 담는 태그입니다.

<BODY> 태그 사이에는 본격적인 내용들이 존재하게 됩니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>제목</title>
</head>
<body>
    <h1>제목을 나타내는 태그 h1</h1>
    <div>
        <p>
            단락을 나타내는 태그 p 와 
            그리고 inline 태그를 감싸주는 가장 많이 쓰이는 태그 div
        </p>
    </div>
</body>
</html>

BODY영역의 구조

HTML5의 BODY영역안에는 위 사진과 같이 화면을 나누기 위해 시맨틱 태그를 이용합니다.

※ 시맨틱 태그란?

시맨틱은 '의미의', '의미론적인'이라는 뜻입니다.
즉 HTML5에 도입된 시맨틱 태그는 개발자와 브라우저에게 의미 있는 태그를 제공합니다.
일반적인 <div> 태그만 보고는 이 태그 안에 들어갈 내용의 의미를 알 수 없는데 이런 태그를 non-semantic 태그라고 합니다.
반면, <header>나 <footer> 태그를 보면 이 태그 안에 들어갈 내용을 유추할 수 있습니다.
예를 들면 <nav> 태그 안에는 컨텐츠를 담고 있는 문서를 서로 간에 연결할 링크들이 담겨있을 것이고 <aside>는 컨텐츠와는 별개의 내용 또는 광고가 들어갈 것이라는 것을 유추할 수 있습니다.

HTML5 이전에는 <header>가 아닌 <div id="header"><div id="head"><div id="hd"> 이런 식으로 개발자가 직접 정의할 수 있었기 때문에 여러 가지 방법들로 표현이 가능했지만 HTML5에서는 시맨틱 태그를 제공하여 HTML 태그의 의미를 명확하게 할 수 있다는 것입니다.

HEADER

header는 주로 사이트의 가장 상단부분에 있으며 웹사이트 이름, 내비게이션, 헤드라인 그리고 검색등으로 구성된다.
header안에는 address태그나, footer태그, 또다른 header 태그는 둘 수 없습니다.

NAV

목적지로 이동할 수 있는 링크들을 모아놓은 영역입니다.
ul, li, a 등의 태그들을 여전히 사용해야 합니다.

SECTION

내용적 흐름과 구조를 만들기 위해 내용을 나누는 용도입니다. (관련있는 내용들끼리 묶어줍니다)
같은 성격의 내용들은 section태그에 묶어서 표시합니다.
섹션은 독립적인 영역이라 섹션 내에서 header, footer 사용이 가능합니다. 이는 섹션마다 제목을 가질 수 있다는 것을 의미하며 섹션마다 h1태그를 사용할 수 있습니다.

ARTICLE

게시판의 게시물, 블로그 포스트, 댓글에 담긴 콘텐츠등이 article에 해당합니다.
section태그가 관련있는 내용들끼리 묶어주는 역할이라면 article은 관련있는 내용들 중에서 독립적으로 구성된 글을 묶어주는 역할입니다.
article도 section과 마찬가지로 header와 footer를 가질 수 있습니다.

FOOTER

일반적으로 footer태그는 한 문서내에서 한번만 사용되지만, section이나 article태그내에서는 별도로 사용이 가능합니다.

HTML은 HyperText Markup Language의 약자입니다.

그리고 이는 누구나 알 것입니다.

그런데 그럼 과연 HyperText Markup Language가 무슨말인지 아시나요?

오늘 포스팅 할 내용은 HyperText Markup Language가 어떠한 의미를 가지고 있는지에 대하여 말씀드리려고합니다.

만약 이 내용이 필요가 없으시거나 이미 알고 계시는 내용이라면 제 블로그의 다른 글들을 봐주시면 감사하겠습니다.

일단 HyperText Markup Language에서 Language는 모두가 알고 있듯이 '언어' 입니다.

그리고 남은 글자인 HyperText Markup은 HyperText와 Markup으로 나눌 수 있습니다.

1. HyperText

HyperText가 어떤 말 일까요?

Hyper은 말그대로 초월의 라는 뜻을 가지고 있습니다.

그렇다면 HyperText는 초월한문서가 되겠네요.

이것을 우리는 HTML과 관련해서 생각해 본다면,

기존의 문서가 순차적이면서 서열형 구조라면, 하이퍼텍스트는 링크에 따라 그 차례가 바뀌는 임의적이면서 나열형인 구조를 가진다. 즉, 출판된 책처럼 작가의 의도대로 사용자가 따라가는 것이 아닌, 하이퍼링크로 연결된 문서들을 어떠한 행위(클릭)에 따라 자유롭게 이동할 수 있다.

쉽게 얘기하면 HyperText는 다른 text로 이동할 수 있는 링크를 가진 text가 됩니다.

2. Markup

마크업이란 어딘가에 mark, 즉 표시해둔다는 의미입니다.

어떠한 문서가 있다면 그 문서의 제목이 어디에있는지, 내용은 어디에 있으며, 작성자는 어디에 적혀있는지

등의 문서의 많은 것들을 구조적으로 표현할 수 있습니다.

결국 markup은 문서를 구조적으로 표시하기 위한 것이 마크업의 개념입니다.

3. HTML

위 내용들로 우리는 HyperText가 어떠한 의미를 가지고 있는지,

그리고 Markup이 어떠한 개념인지를 알게되었습니다.

그럼 이것들을 합쳐 HTML은 무엇이 될까요?

결국 HTML은 제목, 내용, 연락처 등 본문의 구조적 의미를 나타내는 것 뿐만 아니라,

하이퍼링크로 연결된 구조적문서를 클릭에 따라 자유롭게 이동할수 있는것을 제공하는 언어입니다.

'Language' 카테고리의 다른 글

[Java] 자바를 이용한 구구단 게임 만들기 (0)	2020.08.27
알아두면 좋은 CSS 선택자 (0)	2020.08.27
[CSS] CSS 기초설명, Cascading 이란? (0)	2020.08.27
[자바스크립트] 클로저( Closure )함수 쉽게 이해시켜드립니다 (0)	2020.08.27
[자바스크립트]Virtual Dom이란? (0)	2020.08.27

런코딩