HTML 학습의 기초: 태그와 구조 이해하기
안녕하세요, mj입니다. 오늘은 HTML 학습의 첫 번째 주제로 'HTML 기초 개념'을 다루어 보겠습니다. HTML의 기본 구조와 태그, HTML 문서의 기본 구성 요소를 이해하고, 간단한 HTML 페이지를 작성해 보겠습니다.
1일차: HTML 기초 개념
학습 내용
HTML (HyperText Markup Language)은 웹 페이지를 작성하는 데 사용되는 표준 마크업 언어입니다. HTML 문서는 기본적으로 태그로 구성되며, 태그는 웹 브라우저에 콘텐츠를 표시하는 방법을 지정합니다. HTML 문서의 기본 구성 요소는 다음과 같습니다:
- DOCTYPE 선언: 문서의 형식을 지정합니다. HTML5 문서의 경우
<!DOCTYPE html>을 사용합니다. - html 태그: HTML 문서의 루트 요소입니다. 모든 HTML 요소는 이 태그 내에 포함됩니다.
- head 태그: 문서의 메타데이터를 포함합니다. 제목, 문자 인코딩, 외부 스타일시트 및 스크립트 링크가 여기에 포함됩니다.
- body 태그: 문서의 실제 콘텐츠를 포함합니다. 텍스트, 이미지, 링크, 목록, 테이블 및 기타 요소가 이 태그 내에 포함됩니다.
실습 과제
이제 간단한 HTML 페이지를 작성해 보겠습니다. 다음 예시를 참고하여 "Hello, World!" 페이지를 만들어 보세요:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello, World!</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>이것은 간단한 HTML 예제입니다.</p>
</body>
</html>
예시 및 출력 결과
아래는 다양한 HTML 태그를 사용한 예시와 그 출력 결과입니다. 이 예시들을 통해 HTML의 기본 개념을 더욱 명확히 이해할 수 있습니다.
예시 1: 텍스트 요소
<p>이것은 단락을 나타내는 <strong>텍스트 요소</strong>입니다.</p>
<h2>제목 요소</h2>
<ul>
<li>목록 항목 1</li>
<li>목록 항목 2</li>
<li>목록 항목 3</li>
</ul>
출력 결과:
이것은 단락을 나타내는 텍스트 요소입니다. 제목 요소 - 목록 항목 1 - 목록 항목 2 - 목록 항목 3
예시 2: 이미지 삽입
<img src="example.jpg" alt="예제 이미지" width="300">
출력 결과:
예시 3: 링크 생성
<a href="https://www.example.com">예제 링크</a>
출력 결과:
예제 링크
예시 4: 테이블 생성
<table border="1">
<tr>
<th>헤더 1</th>
<th>헤더 2</th>
</tr>
<tr>
<td>데이터 1</td>
<td>데이터 2</td>
</tr>
</table>
출력 결과:
| 헤더 1 | 헤더 2 |
|---|---|
| 데이터 1 | 데이터 2 |
학습 팁
효과적인 학습을 위해 다음 팁을 활용해 보세요:
- 반복 복습: 배운 내용을 반복해서 복습하세요.
- 실습: 실제로 코딩을 해보는 것이 중요합니다.
- 질문하기: 궁금한 점이 있으면 질문을 주저하지 마세요.
댓글
댓글 쓰기