반응형
HTML이란 무엇인가?
HTML(하이퍼텍스트 마크업 언어)은 웹 페이지를 작성하는 데 사용되는 마크업 언어입니다. 웹 페이지의 구조를 정의하고 콘텐츠를 표시하는 데 사용됩니다. HTML은 태그를 사용하여 문서의 각 부분을 나타냅니다.
HTML의 역사
- 1991년: 팀 버너스 리(Tim Berners-Lee)가 처음으로 HTML을 제안하고 개발
- 1995년: HTML 2.0 표준이 발표됨
- 1997년: HTML 3.2 및 HTML 4.0 표준이 발표됨
- 2014년: HTML5 표준이 발표되어 현재까지 사용됨
기본 문서 구조
HTML 문서는 기본적으로 다음과 같은 구조를 가집니다:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple HTML document.</p>
</body>
</html><!DOCTYPE html>: 문서 타입 선언으로, HTML5 문서임을 나타냅니다.<html>: HTML 문서의 루트 요소입니다.<head>: 메타데이터를 포함하는 섹션입니다. 제목, 문자 인코딩, 뷰포트 설정 등을 포함합니다.<title>: 문서의 제목을 정의합니다. 브라우저 탭에 표시됩니다.<body>: 실제 콘텐츠가 포함되는 섹션입니다.
HTML 요소와 속성
- 요소(Element): HTML 문서의 각 부분을 나타내는 태그입니다.
<h1>: 시작 태그Hello, World!: 콘텐츠</h1>: 종료 태그
<h1>Hello, World!</h1>- 속성(Attribute): 요소에 추가 정보를 제공하며, 시작 태그에 포함됩니다.
href: 속성 이름"https://www.example.com": 속성 값
<a href="https://www.example.com">Visit Example</a>
실습: 기본 HTML 문서 작성
다음의 예제를 통해 기본 HTML 문서를 작성해 봅시다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First HTML Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first HTML page. I'm learning web design!</p>
</body>
</html>- HTML 기본 구조 작성
<!DOCTYPE html>선언<html>요소<head>요소와 내부의<meta>,<title>태그<body>요소와 내부의<h1>,<p>태그
- 내용 추가 및 수정
<h1>태그: 웹 페이지의 주요 제목<p>태그: 웹 페이지의 단락
결론
HTML은 웹 디자인의 기초입니다. HTML을 통해 웹 페이지의 구조를 정의하고 콘텐츠를 표시할 수 있습니다. 이번 글에서는 HTML의 역사, 기본 문서 구조, 요소와 속성에 대해 배웠습니다. 기본적인 HTML 문서를 작성해 보면서 HTML의 기본 개념을 이해할 수 있었습니다.
다음 글에서는 텍스트 관련 요소에 대해 알아보겠습니다.
다음 글에서 만나요!
반응형
'웹 디자인' 카테고리의 다른 글
| [웹 디자인] 5일차: HTML 폼과 입력 요소 (0) | 2024.08.05 |
|---|---|
| [웹 디자인] 4일차: HTML 링크와 이미지 (0) | 2024.08.04 |
| [웹 디자인] 3일차: HTML 리스트와 테이블 (0) | 2024.08.03 |
| [웹 디자인] 2일차: HTML 텍스트 관련 요소 (0) | 2024.08.02 |
| [웹디자인] 목차 (0) | 2024.06.21 |