반응형
HTML이란 무엇인가요?
HTML은 HyperText Markup Language의 약자로, 웹 페이지를 만들기 위한 가장 기본적인 마크업 언어입니다. 웹 페이지의 구조와 내용을 정의하는 데 사용됩니다. HTML은 웹 브라우저에게 문서의 구조를 표시하는 방법을 알려주며, 사용자에게 보여지는 웹 페이지의 모습을 결정합니다. HTML은 웹 개발에서 가장 기본이 되는 기술 중 하나입니다.
HTML 형식
HTML 문서는 여는 태그와 닫는 태그로 이루어진 요소(element)들의 집합으로 구성됩니다. 각 요소는 태그(tag)라고 불리는 특정한 형식을 가지고 있습니다. 아래는 간단한 HTML 문서의 예시입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML 문서 예시</title>
</head>
<body>
<header>
<h1>나의 웹 페이지</h1>
<nav>
<ul>
<li><a href="#home">홈</a></li>
<li><a href="#about">소개</a></li>
<li><a href="#contact">연락처</a></li>
</ul>
</nav>
</header>
<section id="home">
<h2>홈 페이지</h2>
<p>이곳은 홈 페이지입니다. 환영합니다!</p>
</section>
<section id="about">
<h2>소개 페이지</h2>
<p>이곳은 저의 소개 페이지입니다. 저에 대해 좀 더 알아보세요.</p>
</section>
<section id="contact">
<h2>연락처 페이지</h2>
<p>문의사항이 있으시면 언제든지 연락해주세요.</p>
</section>
<footer>
<p>2024 나의 웹 페이지. 모든 권리 보유.</p>
</footer>
</body>
</html>
HTML tag 정리 (1)
1. <!DOCTYPE> 태그
- <!DOCTYPE> 태그는 문서 형식을 정의하는데 사용됩니다. HTML5에서는 <!DOCTYPE html>로 선언합니다.
- 이 태그는 웹 브라우저에게 문서가 어떤 버전의 HTML로 작성되었는지 알려줍니다.
- 올바른 문서 형식 선언은 웹 브라우저에게 문서를 올바르게 해석할 수 있도록 도와줍니다.
2. <html> 태그
- <html> 태그는 HTML 문서의 루트 요소를 정의합니다.
- 모든 HTML 요소는 <html> 태그 안에 포함되어야 합니다.
- 이 태그는 웹 페이지의 시작과 끝을 나타내며, 모든 다른 요소들은 이 태그 안에 위치합니다.
3. <head> 태그
- 이 태그 안에는 문서 제목(<title>), 문자 인코딩(<meta charset>), 뷰포트 설정(<meta name="viewport">) 등의 정보를 포함할 수 있습니다.
- 웹 페이지의 스타일 시트와 스크립트 파일을 연결하는 링크(<link>) 태그나 스크립트(<script>) 태그도 이 태그 안에 위치할 수 있습니다.
4. <title> 태그
- <title> 태그는 문서의 제목을 정의합니다.
- 이 태그 안에 작성된 텍스트는 브라우저의 제목 표시줄이나 탭에 표시됩니다.
- 검색 엔진이 웹 페이지를 색인할 때 이 제목이 사용되기도 합니다. 적절한 키워드를 사용하여 제목을 작성하는 것이 중요합니다.
5. <body> 태그
- <body> 태그는 실제 내용을 포함하는 부분을 정의합니다.
- 웹 페이지의 텍스트, 이미지, 링크, 테이블 등의 내용은 이 태그 안에 작성됩니다.
- 사용자에게 보여지는 모든 내용은 <body> 태그 안에 있어야 합니다.
6. <header> 태그
- 웹 페이지의 머리말을 정의하는 태그입니다. ( 웹 페이지의 상단 )
- 보통 로고, 제목, 내비게이션 메뉴 등의 요소를 포함합니다.
- HTML5에서는 header 요소를 사용하여 페이지의 머리말을 구분하고 의미를 부여합니다.
7. <section> 태그
- 웹 페이지에서 콘텐츠의 섹션을 정의하는 태그입니다.
- 주제나 콘텐츠의 논리적인 구획을 만들 때 사용됩니다.
8. <footer> 태그
- 웹 페이지의 바닥글을 정의하는 태그입니다.
- 보통은 저작권 정보, 연락처 정보, 사이트 링크 등을 포함합니다.
반응형
'Web' 카테고리의 다른 글
| HTML tag 정리 (2) (0) | 2024.03.20 |
|---|
