안녕하세요. 오늘은 HTML에 알아볼게요.
HTML이란?
HTML은 HyperText Markup Language의 약어로
웹 페이지를 만들기 위한 표준 마크업 언어예요.
( ※ 주의 ※ HTML은 프로그래밍 언어가 아니에요! )
HyperText는 문서를 서로 '연결'해 주는 링크를 의미하고,
Markup은 문서나 데이터의 텍스트 내에 특정 태그나 코드를 삽입하여
그 형식이나 구조, 스타일을 웹 브라우저에 지정하는 방식을 의미해요.
일반문서와 웹 문서의 차이
| 일반문서(엑셀, 워드 등) | 내용 입력 프로그램 = 입력 내용 확인 프로그램 |
| 웹 문서 | 내용 입력 프로그램 ≠ 입력 내용 확인 프로그램 웹 편집기(web editor)에서 마크업(Markup) 형식으로 작성 >> 웹 브라우저(web browser)에서 인식하여 표시 |
HTML 문서 기본 구조
구조설명에 앞서서
제가 쓰는 VCS(Visual Studio Code)로 설명드릴게요.
VCS의 'Emmet(에밋)'기능으로 웹 문서의 태그를 자동적으로 입력해 주는 플로그인 기능으로
! 입력 후 Tab 버튼 클릭을 해주시면 자동 완성이 돼요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 문서 기본 구조</title>
</head>
<body>
<h1>HTML 문서의 제목 태그</h1>
<hr>
<p>HTML</p>
<p>CSS</p>
<p>JavaScript</p>
</body>
</html>
<! DOCTYPE html>
이 친구는 문서 유형을 지정하는 의미를 두고 있어요.
HTML 문서는 문서유형을 지정하는데 모두 <! DOCTYPE html>으로 시작을 해요.
그리고 현재 문서가 HTML5 언어로 작성한 웹 문서임을 나타내는 태그예요.
HTML에서는 영어 대소문자 구별이 없지만
문서유형을 강조하는 <! DOCTYPE html>는 대문자로 사용을 사용해요.
<html> ~ </html>
이 친구는 HTML의 요소(element)로
웹 문서의 시작과 끝을 나타내는 태그예요.
웹 브라우저가 <html> 태그를 만나면 </head>까지 소스를 읽어 화면에 표시돼요.
+ <html lang="ko">
lang 속성으로 문자에서 사용할 언어를 지정해 주는 친구예요.
현재 표시되어 있는 ko는 korean의 줄임말을 사용하고 있어요.
lang 설정 방법: 설정 > Emmet: Variales 검색 > 항목 추가 항목 lang / 값 ko
<head> ~ </head>
Head 요소로 문서의 메타데이터(metadata)를 포함해요.
웹 브라우저가 웹 문서를 해석하는 데 필요한 정보를 입력하는 태그로
화면에 표시되지 않아요.
<meta> 태그
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 문서 기본 구조</title>
</head>메타 정보: 데이터에 관한 데이터예요.
자동차를 비유로 하자면 자동차의 메타정보는 차종, 가격, 연비가 있어요.
<body> ~</body>
Body 요소로 실제 웹 브라우저 화면에 나타내는 내용을 작성하는 태그예요.
HTML Comments
<!-- HTML 주석은 이렇게 표시합니다. -->HTML도 웹 프로그램처럼 주석이 존재하는데
동일하게 브라우저에 표지 되지 않고, HTML 소스코드를 문서화하는데 도움을 줘요.
사용 단축키는 ctrl + / 에요.
여기까지 HTML에 대해 알아봤는데요.
백엔드만 공부한 저는 프론트엔드를 처음 보니
제가 java를 처음 시작한 날이 생각나서 즐거웠어요.
여러분들은 어떠셨나요?
'Frontend > HTML' 카테고리의 다른 글
| HTML Form (0) | 2025.09.18 |
|---|---|
| HTML - TEXT (1) | 2025.09.15 |
| HTML Element (0) | 2025.09.13 |