🤔HTML이란?

1. HTML의 정의

-HTML : Hyper Text Markup Language

우리가 사용하는 웹 브라우저의 웹 페이지의 구조를 설명하는 프로그래밍 언어의 한 종류로

웹 브라우저에서 웹 페이지를 볼 수 있도록 그 웹 페이지의 구조를 만들다 던가 더 나아가

그 웹 페이지를 설명할수 있다.

다른 예로 웹 페이지는 월드 와이드 웹 상에 있는 개개의 문서를 가리키며,

.gif .jpg .hwp 등등 이와 같은 확장자 포맷을 .html 혹은 .htm을 가지고 있다.

그치만 html만 놓고 본다면 이는 단순한 텍스트 파일에 불과하다. 우리는 이를 웹 브라우저를 통해

렌더링 해주게 되고 이를 사용자가 View라고 하는 스크린을 통해 접할수 있다.

2. HTML의 특징

구조가 단순하며 간단한 문법을 지니고 있다.

다른 프로그래밍 언어에 비해 단순한 구조를 가지며 논리적이고 연산적인 요소가 없다.

컴파일이 되지 않은 텍스트 문서이기에 편집이 쉬운편이다.

텍스트 문서를 컴퓨터 언어로 바꾸는 컴파일 작업이 따로 필요가 없어 실행되는 프로그램에 따라

웹 문서 또는 텍스트 문서가 되기 때문에 문서를 편집 수정이 용이하다.

Mark up Language

MarkUp언어는 쉽게 “Mark(마크)”로 둘러쌓인 언어이다. 즉 “Tag(태그)”로 둘러쌓였다고 표현하며,

HTML,XML 등의 마크업 언어들은 문서의 구조를 정의한다. 즉 각 문서의 골격에 해당하는 부분을

작성하는데 사용한다.

또한 마크 삽입만으로 형식을 정의하므로 파일 용량이 매우작아지며(예로 이미지를 각 페이지, 문서에 직접적으로 포함하지 않고 링크식으로 불러옴)

마크업 언어의 중요성으로는 마크업을 얼마나 잘 구성하냐에 따라 뒤에 따라오는 절차의 판도가 바뀐다.

플랫폼에 독립적

HTML문서는 어떤 운영체제라도 웹 브라우저만 있다면 볼수 있다. 웹 브라우저는 HTML을 기준으로 두고 제작된다.

3. HTML 태그(Element, 요소)

HTML은 한 문서안에 다양한 요소(element)로 이루어진다. 이 각각의 요소들은 태그(tag)로 표현되는데 이를 통해 웹 브라우저는 각 페이지를 보고 렌더링해 우리에게 보여준다.

태그의 기본적인 형태

<태그의 이름 속성 = “속성값”> 태그에 적용될 요소(문자열, 문단, img 등등)</태그의 이름>

예제)

여기서 속성(attribute)의 형식은 속성 = “속성값”으로 구성되어있으며 속성은

attribute name = “attribute value” 의 형식으로 구성되어있다.

태그에 대해 몇가지더 정리를 하자면

보통 태그는 <여는태그>…</닫는태그>로 구성되어있다.
이는 각 태그안에 들어갈 콘텐츠를 감싸기 위함이다.(요소가 다른 요소를 감싸기 위해)
</닫는태그>가 없는 태그는 단일 태그라한다.
태그는 속성과 함께 사용되어 태그에 여러 기능을 추가할 수 있다.
모든 태그마다 태그에서 사용할수 있는 속성이 다르다.
각 태그사이에 포함되어있는 text를 inner text라고 부른다.
속성은 순서에 상관 없다.

정도로 정리가 가능하다.

태그의 중첩

태그는 중첩이 가능하다. 그리고 각태그마다 상위 하위 태그로 나뉘는데

이런 구조를 부모-자식구조 또는 트리 구조라고 한다.

상위에 하위 태그를 감싸고 있는 요소를 부모, 하위에 있는 요소를 자식 요소라고 한다.

(요소나 태그나 같은말이다.)

👴→👨→👶 이렇게 부모→자식→손자 처럼 다시 부모가 되고 손자가 다시 자식이 될수있다.

4. HTML 문서의 기본적인 구조

HTML문서의 기본적인 구조는 크게 <html></html>의 여닫 태그로 시작된다.

그전에 <!DOCYPE html>이라는 선언도 있다.

HTML5전에는 딱히 대소문자를 구분하지 않았지만 그 이후에 표준은 대문자이다.

<!DOCTYPE html>

브라우저에게 문서 유형을 알려주는 선언으로 페이지 상단(html태그 위에)에 딱 한번만 사용된다.

<html>~</html>

html문서의 시작과 끝을 알린다.

<html lang =”en”>의 뜻은 language라는 의미를 가진 lang이라는 속성을 이용해 이 문서에서 사용할 언어는 en→english로 지정할 것이다라는 의미 이며, ko(한국어), de(독일어), ja(일본어)등이 있다.

<head>~</head>

웹 브라우저에는 보이지 않지만, 웹 브라우저가 알아야할 정보들이 나열되어있다.

<title>~<title>→웹 브라우저에 표시될 사이트의 제목이 표시된다.

<body>~</body>

실질적인 화면표시의 영역이다. 각 태그를 통해 웹브라우저로 사용자에게 내용을 전달한다.

'HTML&CSS' 카테고리의 다른 글

window (0)	2023.06.30
HTML에서 자주 쓰이는 기본 태그들 (0)	2023.04.19

깊이있게

HTML이란?

🤔HTML이란?

1. HTML의 정의

-HTML : Hyper Text Markup Language

2. HTML의 특징

3. HTML 태그(Element, 요소)

4. HTML 문서의 기본적인 구조

'HTML&CSS' 카테고리의 다른 글

댓글

티스토리툴바

HTML이란?

🤔HTML이란?

1. HTML의 정의

-HTML : Hyper Text Markup Language

2. HTML의 특징

3. HTML 태그(Element, 요소)

4. HTML 문서의 기본적인 구조

'HTML&CSS' 카테고리의 다른 글

관련글

댓글

티스토리툴바