HTML이란?
- HTML은 Hyper Text Markup Language(하이퍼텍스트 마크업 언어)의 약자로 웹 페이지를 만들기 위한 표준 마크업언어
- 웹 페이지의 구조를 정의, 브라우저가 콘텐츠를 표시하는 방식을 결정하는 역할
- 문서의 구조에는 텍스트, 이미지, 링크, 동영상 등의 여러 요소가 포함
- HyperText: 문장 중의 어구나 그것에 붙은 표제, 표제를 모은 목차 등이 서로 연결된 문자 데이터 파일
HTML의 기본 구성 요소
<태그> 내용 </태그>- HTML 문서는 여러 개의 HTML 요소로 이루어져 있음
- 시작태그, 내용, 닫는 태그로 이루어짐
- 요소는 브라우저에 콘텐츠를 표시하는 방법을 알려주며, 콘텐츠 레이블(제목, 단락, 링크 등)을 지정
- <br> break. 문장을 끊고 다음 줄로 이동하는 줄 바꿈의 역할을 하는 태그의 경우 닫는 태그(</br>)이 필요가 없는 빈 요소(self-closing tag(빈 요소를 스스로 닫는 문법))임 empty elements(내용이 없는 HTML 요소)라고도 부름.
A Simple HTML Document
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html><!DOCTYPE html>: 이 문서가 HTML5 문서임을 정의 브라우저가 이 문서를 HTML5 표준에 맞게 해석하도록 함
<html>: HTML 페이지의 루트 요소. (웹페이지의 최상위요소) 모든 HTML 코드는 <html> 태그 안에 작
<head>: 문서 정보를 포함. 웹페이지의 설정, 메타데이터, CSS 스타일, JavaScript 파일 등을 포함할 수 있음
<title>Page Title</title>: 웹 브라우저의 탭에 표시되는 제목을 정의 (검색 결과의 제목으로도 표시)
(옆의 아이콘은 Tomcat 아이콘)
</head>
<body>: 화면에 표시되는 부분. 실제 웹페이지에서 사용자가 볼 수 있는 내용(텍스트, 이미지, 링크 등)을 포함
<h1>My First Heading</h1>: Heading, h1 태그는 가장 큰 가장 큰 제목. h1~h6까지 제목 태그가 있음 굵은 글씨+큰 크기
<p>My first paragraph.</p>: Paragraph, 단락태그 <p>태그를 사용하면 문장들이 자동으로 줄바꿈 위 아래의 여백이 추가
</body>
</html>
Web Browsers
- web browser(Chrome, Edge, Firefox, Safari)는 HTML 문서를 읽고 올바르게 display 해야 함
- 브라우저는 HTML 태그들까지 표시하지는 않지만 태그들로 어떻게 문서를 표시할 지 결정
HTML 페이지 구조
<body> section 안의 내용들이 브라우저에 표시됨
<title> 안의 요소들은 브라우저의 페이지 탭의 타이틀 바에서 보여짐
HTML과 CSS, JavaScripy
- HTML: 웹 페이지의 구조를 담당 기본 골격을 정의
- CSS: HTML 요소의 디자인(색상, 크기, 배경 등)을 담당. 스타일링
- JavaScript: HTML 요소의 동적인 기능(애니메이션, 사용자 입력 처리 등)을 담당
(HTML을 사용하면 텍스트, 이미지, 링크 등을 배치할 수 있지만, 클릭하면 색상이 바뀌거나, 버튼을 눌렀을 때 이벤트가 발생하는 등의 동적인 기능은 할 수 없음.
-> HTML은 단독으로 사용되기보다는 CSS, JavaScript와 함께 사용되며, 이를 통해 완전한 웹 페이지로 만들어짐
HTML은 프로그래밍 언어인가?
- X. HTML은 마크업 언어. 프로그래밍 언어는 논리적인 연산, 조건문, 함수, 변수 선언 등을 포함하여 데이터를 처리하고 조작할 수 있어야 하지만, HTML은 이러한 기능이 없음
이미지 출처 및 참고: w3schools.com
'국비 > HTML' 카테고리의 다른 글
| [HTML Tutorial] 4. HTML Styles CSS (0) | 2025.03.04 |
|---|---|
| [HTML Tutorial] 3. HTML 기초 - Text Formatting, 인용 및 출처 표시, 주석 (1) | 2025.03.04 |
| [HTML Tutorial] 2. HTML 기초 - 기본적인 구성과 태그, 속성들 (0) | 2025.03.04 |