💡HTML 이란
HTML 이란 웹에서 자유롭게 오갈 수 있는 웹 문서를 만드는 언어 이다.
www(인터넷)에 전송되는 문서 양식.
Hyper Text Markup Language 의 약자이다.
-Hyper Text : 링크
-Markup Language : 문서내용을 표현하는 방식
즉, 웹 페이지에서 다른 페이지로 이동할 수 있도록 하는 기능을 가진 문서를 만드는 언어다.
흔히 말해 웹 페이지를 위한 마크업 언어(Markup Language)라고 할 수 있다.
💡HTML 양식의 흐름과 확장자
- 초창기 html = 논문
- html + 디자인 = 웹페이지
- 요즘 html= 데이터. (디자인은 css로 분리되게 했다)
웹 페이지는 World Wide Web 상에 있는 개개의 문서를 말한다.
.pdf, .jpeg가 있듯이 HTML은 .htm / .html 확장자 포맷을 가지고 있다.
이 html 문서는 단순히 텍스트 파일에 불과하고 웹 브라우저가 해석을 해서 구조를 통해 화면에 렌더링 해주게 되고 사용자는 View라고 하는 스크린을 통해 접하게 되는 것이다.
💡HTML 양식의 표준
w3c (World Wide Web consortium) : 표준 권고안 제시
https://www.w3.org 에서 문서내용을 표현하는 방식을 정한다.
💡웹 표준
웹 표준이란
- 웹 사이트를 만들 때 지켜야 하는 약속들을 정리한 것
- 웹 표준을 지켜 사이트를 제작하면 장소나 브라우저 상관없이 쉽게 웹 사이트를 볼 수 있다.
- html5로 문서를 만드는 것 = 웹 표준을 지킨 문서를 만드는 것
💡HTML과 마크업언어
HTML은 웹사이트 콘텐츠를 설명하는데 사용되는 마크업언어로, 콘텐츠의 의미를 설명하는데 유일한 목적을 가지고 있다.
CSS가 Visual Design이라면 HTML은 Structure Design 이라 할 수 있다.
Markup Language 는 태그( < > )라는 것을 중심으로 문서의 내용을 표시한다.
💡HTML의 기본 문서 구조 - 문서 객체 모델(DOM)
문서 객체 모델 (DOM, Document Object Model)
= HTML 문서 객체 구조를 말한다.
HTML 문서의 기본 객체구조는 순서대로 <html>, <head>, <body> 가 있다.
크게 head 영역과 body 영역으로 구성되며,
문서의 title 은 웹페이지의 제목으로, 브라우저 탭에 표시가 된다.
<body> 태그는 문단 태그, 테이블 태그, 폼 태그 등을 포함할 수 있다.
이때, 문서 객체 모델에서는 모든 태그를 '객체' 라고 부르며, 태그에는 기능과 속성이 포함되어 있다.
ex) <img> 태그는 이미지를 출력하는 기능이 있고, src, alt, width, height와 같은 속성들을 함께 사용할 수 있다. (이미지의 크기, 너비 등이 속성 설정)
<!DOCTYPE html>
<html>
<head>
문서를 정의하는 데이터가 들어감
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>브라우저 제목</title>
</head>
<body>
문서에 표시되는 컨텐츠가 들어감
<img alt="잠봉뵈르 사진" src="https://postfiles.pstatic.net/MjAyMjA5MjhfNiAg/MDAxNjY0MzU5MjAyOTQ3.3lLMVkm8cdVdcX9Iro0k5DTJbmfUmvclUyrXZmCdoeIg.P6r927__FDAsNvtAvZWWzPteFm_eURv09s3OouMjQyEg.JPEG.anna04143/20220923%EF%BC%BF153249.jpg?type=w773" />
<br />
</body>
</html>⭐ 참고로 맨 앞에 있는 <!DOCTYPE html> 은, html 문서에서 <html> 태그가 나오기 전에 정의되는 것으로, 현재 문서가 HTML5 언어로 작성된 웹 문서라는 뜻이다. (HTML 버전 알려줌)
