1.HTML 이란?
하이퍼 텍스트 마크업 언어(Hyper Text Markup Language)는 웹 페이지 표시를 위해 개발된 지배적인 마크업 언어이다. HTML은 제목, 단락, 목록, 링크 및 인용 등의 구조적 문서를 생성할 수 있는 방법을 제공한다.
HTML은 웹 페이지 콘텐츠 안의 꺽쇠 괄호로 감싸여진 "태그"로 구성되는 HTML 요소 형태로 작성되며, HTML 처리 장치에 영향을 주는 자바스크립트와 본문의 디자인에 영향을 주는 CSS 등을 포함할 수 있다.
※ 참조 : https://ko.wikipedia.org/wiki/HTML
위키 기반의 위의 설명으로는 "저게 무슨 소리인가?" 싶다. 자바스크립트(javascript)와 CSS는 뒷편으로 넘기고, 일단 마크업 언어가 무엇인지 알 수 없었다.
1-1.마크업 언어란?
마크업 언어는, "태그" 등을 이용하여 문서나 데이터의 구조를 명기하는 언어의 한 가지이다. 텍스트 문서에 삽입된 일련의 기호로 구성된 텍스트 인코딩 시스템을 말하며, 텍스트 문서의 구조 및 형식 관계를 제어한다.
※ 참조 : https://en.wikipedia.org/wiki/Markup_language
※ 명기? 명시? 둘 다 유사한 뜻으로, 문맥적으로 다르게 사용될 수 있다고 한다. (TMI)
숙제가 늘어났다. HTML에서도 마크업 언어에서도 "태그"라는 부분이 나온다.
1-2.태그란?
태그는, 정보 시스템에서 인터넷 북마크, 멀티미디어, 데이터베이스 레코드, 컴퓨터 파일 등의 정보에 할당된 키워드 또는 용어이다. 이런 메타데이터는 항목을 설명하거나 검색하는데 도움을 주는 역할을 한다.
SNS에서 자주 이용되는, 해시태그(#)와 같은 역할을 수행한다. SNS에서 #IT 검색 시, IT와 관련된 글들이 표시되는 것처럼 태그를 이용하여 특정 데이터를 표시할 수 있게 해준다.
※ 참조 : https://en.wikipedia.org/wiki/Tag_(metadata)
※ 메타 데이터 : 어떤 목적을 가지고 만들어진 데이터로써, 여기에서는 분류를 위한 핵심 단어(키워드)로써 생성된 메타 데이터라고 인지할 수 있다.
1-3.결론적으로.
결론적으로, HTML은 분류를 위한 핵심 단어인 태그를 사용하여 제목, 단락, 목록, 링크 등을 구분하여 작성된 문서라고 볼 수 있다.
2.HTML 문서 구조
앞서 HTML 문서인, 웹 페이지는 head 영역과 body 영역으로 구성된다.
| 설명 | |
| head 영역 | html 문서 (웹 페이지) 내 설정 정보들을 명기하는 영역 - HTML 문서 제목은 무엇인지, 인코딩 형태, 콘텐츠 타입, 디자인 등 |
| body 영역 | html 문서 (웹페이지) 내 표시되는 데이터를 명기하는 영역 - 웹 페이지 화면 상 표시되는 데이터 (문자열) |
위의 그림만으로는 실제 웹 페이지가 어떻게 구성되는지 이해하기 어렵기에, 브라우저 개발자 도구를 통해 확인해보았다.
body 영역에 명기된 데이터는, 모니터 등의 영상 표시 장치를 통해 웹 페이지에서 확인할 수 있는 문자열, 그림 등이다.
위의 예시 그림에서는 "Google"이라는 문자열과, 검색을 위한 입력란의 "Google"의 다지인이 다른 점을 확인할 수 있다. 이는, head 영역에 선언된 디자인 기능을 이용하기 때문이다. 이를 통해 웹 브라우저의 body 영역에는 head 영역에 명기된 데이터를 포함하여 표시해준다는 점을 알 수 있다.
3.HTML 용어
각, head 영역과 body 영역은 태그를 통한 엘리먼트(element)라는 요소로 데이터가 입력된다. 보통 태그는 꺽쇠 괄호(<, >)를 통해 표현된다.
※ 참조 1 : https://html.spec.whatwg.org/multipage/
※ 참조 2 : HTML 태그 및 자바스크립트 등의 표준 기술서 중 하나이다. 과거에 w3c에서 표준을 작성했다면, 현재는 주요 브라우저 엔진 개발사들이 포함된 단체(WHATWG)에서 작성한다.
3-1.엘리먼트 (Element) = 요소
HTML 문서(웹 페이지)는 구조화된 엘리먼트(Element)의 집합이다. 엘리먼트(Element)는 여는 태그와 닫는 태그까지를 의미한다.
3-2.여는 태그 / 닫는 태그
여는 태그와 닫는 태그는, 콘텐츠의 영역을 구분하기 위한 목적으로 사용된다.
※ 참조 : 제목 강조 표시 태그 h1와, 문자열 기울기 태그 i를 사용해보았다.
| 닫힘 태그를 명기한 경우 | 닫힘 태그를 명기하지 않는 경우 |
| <!DOCTYPE html> <html> <head></head> <body> <h1> Hello, World </h1> <i> Hello, World </i> </body> </html> |
<!DOCTYPE html> <html> <head></head> <body> <h1> Hello, World <i> Hello, World </body> </html> |
 |
 |
닫힘 태그를 명기 시, 첫 번째 "Hello, World" 문자열만 제목 강조 표시가 적용되었으며 두번 째는 기울기만 적용되었다.
닫힘 태그를 명기하지 않을 시, 첫 번째 "Hello, World" 문자열은 제목 강조 표시가 적용되었으며 두번 째는 제목 강조 표시와 함께 기울기가 적용됨을 확인할 수 있다.
※ 참조 : 닫는 태그가 필요 없는 경우도 있다.
3-3.속성(Attribute)과 값(Value)
속성(Attribute)은 엘리먼트(Element)의 동작을 제어하기 위해 사용되며, 값(Value)로 제어 수치를 설정한다.
라고 적어둔다면, 무슨 소리일까?
엘리먼트 <b> 강조된 Hello, World </b>를 예를 들어보자.
들여쓰기로 인해 HTML 문서에서는 가운데에 위치하지만, 웹 페이지에서는 기본 정렬(좌측 정렬)로 되어 있다.
| HTML 문서에 입력된 엘리먼트 | 웹 페이지에 표시된 엘리먼트 |
 |
 |
그렇다면, 입력된 엘리먼트의 정렬을 어떻게 수행할까? 이 때, 작성된 엘리먼트를 제어(수정)하여 가운데 정렬할 때 이용되는 점이 바로 "속성"이다.
"속성 style"는 엘리먼트의 디자인을, "text-align:"은 정렬을 의미한다.
| 엘리먼트 제어 (엘리먼트의 정렬을 제어) | 실행 결과 | |
| 1 | <b style="text-align:left"> 강조된 Hello, World </b> | 강조된 Hello, World |
| 2 | <b style="text-align:center"> 강조된 Hello, World </b> | 강조된 Hello, World |
| 3 | <b style="text-align:right"> 강조된 Hello, World </b> | 강조된 Hello, World |
※ 참조 : 티스토리 기본 표는 입력된 구문이 아닌, 들여쓰기를 의미하는 값으로 정렬하여, 실행결과에 차이가 발생한다.
엘리먼트 <b style="text-align:"> 강조된 Hello, World </b>는, 웹 페이지에 문자열 "강조된 Hello, World"를 정렬한다는 것을 의미한다.
다양한 속성(Attribute)에 따른 값(Value)가 존재함으로, 개발 시 원하는 엘리먼트의 제어를 위해서는 다양한 표준 및 기술서의 참고해야 한다. 보통 속성(Attribute)은 여는 태그에 포함되어 작성되며, 값(Value)와 쌍을 이루어 작성된다. 즉, 속성=값으로 구성된다.
※ 참조 : https://developer.mozilla.org/ko/docs/Web/HTML/Attributes
이처럼, 다양한 엘리먼트(Element)들이 하나의 HTML 문서(웹 페이지)를 구성하게 된다. 브라우저에서 지원하는 개발자 도구를 통해 다양한 태그 및 속성들도 구성된 엘리먼트(Element)를 확인해볼 수 있다.
4.HTML 문서 타입 선언
HTML 문서 타입의 선언은, HTML 문서의 구성 요소에 포함되진 않는다. HTML 문서를 작성하기 위한 표준안에 따른 적용이다.
※ 문서 타입 (DTD) : DOCTYPE 또는 Document type Definition
HTML 문서 타입의 버전에 따라, 지원되는 태그가 다르기에 작성된 HTML 문서가 원활하게 동작하기 위해서는 어떤 버전을 이용했는지에 대한 선언을 포함해야 한다.
글을 작성하는 시점을 기준으로 각 브라우저들은 HTML5을 기준으로 HTML 문서를 표현하고, 별도의 선언이 없는 경우에도 HTML 5 기준으로 인지한다.
HTML 문서 타입의 버전 별 정보는 위키에 잘 정리되어 있으므로, 링크를 첨부한다.
※ 참조 : https://en.wikipedia.org/wiki/Document_type_declaration
또한, HTML5으로 모든 웹 페이지들이 통일되면 좋겠지만 과거에 구현된 웹 페이지들을 이전 버전으로 작성되었기에 HTML 5으로 강제 표시할 경우 각 종 문제가 발생할 수 있다. 그렇기에 아직까지는 이전 버전에 대한 호환성을 지원한다.
'기초 공부 > 웹' 카테고리의 다른 글
| [WEB] HTML / CSS / Javascript 란 ? _ 3편 Javascript (0) | 2022.11.03 |
|---|---|
| [WEB] HTML / CSS / Javascript 란 ? _ 2편 CSS (0) | 2022.11.01 |
| [WEB] 쿠키와 세션 (Cookie &Session) (0) | 2022.10.06 |
| [WEB] 웹 브라우저란? (0) | 2022.09.30 |
| [WEB] HTTP Method 및 HTTP Status Code (0) | 2022.09.28 |
