HTML 기본 구조와 실습 예시
HTML 기본 구조 이해하기
HTML(HyperText Markup Language)은 웹 페이지를 구현하는 데 사용되는 최초의 언어입니다. 이는 모든 웹사이트의 기초를 이루며, 웹 개발을 시작하고자 할 때 반드시 배우게 되는 언어입니다. 처음 HTML을 접하는 분들은 다소 복잡하게 느껴질 수 있지만, 기본적인 문법과 구조를 이해하면 쉽게 익힐 수 있습니다. 이번 포스트에서는 HTML의 기본 구조부터 실제 웹 페이지를 만드는 과정까지, 간단하게 설명드리겠습니다.
HTML의 기초 개념
HTML은 텍스트와 콘텐츠를 구조적으로 표현하는 마크업 언어입니다. 마크업 언어란, 콘텐츠의 요소들이 어떤 방식으로 배치되고 보여질지를 정의하는 규칙들을 의미합니다. HTML을 통해 텍스트, 이미지, 링크 등 다양한 웹 요소들을 페이지에 배치할 수 있습니다.
HTML 문서의 기본 구성
HTML 문서는 특정한 포맷을 따라야 하며, 일반적으로 다음과 같은 기본 구조를 가집니다:
웹 페이지 제목 첫 번째 웹 페이지
HTML을 배우는 것은 매우 흥미로운 일입니다!
각 태그의 역할
- <!DOCTYPE html>: 이 선언은 문서가 HTML5 표준에 따라 작성되었음을 알립니다.
- <html>: HTML 문서의 시작과 끝을 정의합니다.
- <head>: 메타데이터를 포함하는 구역으로, 페이지 제목과 문자 인코딩을 설정합니다.
- <body>: 사용자에게 실제로 보여지는 콘텐츠를 포함합니다.
HTML 태그의 종류와 예제
HTML에는 다양한 태그가 존재하며, 각각의 태그는 특정한 용도를 가지고 있습니다. 여기서는 초보자가 꼭 알아야 할 주요 태그를 소개하겠습니다.
제목 태그 (<h1> ~ <h6>)
제목 태그는 웹 페이지에서 제목을 설정하는 데 사용됩니다. 가장 중요한 제목은 <h1>으로 시작하며, <h2>부터 <h6>까지 하위 제목을 정의합니다. 예를 들어:
주요 제목
하위 제목
단락 태그 (<p>)
<p> 태그는 텍스트를 단락으로 구분하는 데 사용됩니다. 여러 문단을 작성할 때 필요합니다.
이것은 첫 번째 문단입니다.
HTML을 사용하여 웹 페이지를 쉽게 만들 수 있습니다.
링크 태그 (<a>)
<a> 태그를 통해 다른 페이지나 외부 사이트로 이동할 수 있는 링크를 생성합니다. href 속성을 사용해 링크 주소를 지정합니다:
네이버로 이동
이미지 태그 (<img>)
이미지를 웹 페이지에 삽입할 때는 <img> 태그를 사용합니다. src 속성으로 이미지 파일의 경로를, alt 속성으로 이미지를 설명하는 텍스트를 제공합니다:
목록 태그 (<ul>, <ol>, <li>)
목록은 순서가 없는 목록(<ul>)과 순서가 있는 목록(<ol>)으로 나눌 수 있으며, 각 항목은 <li> 태그로 정의합니다:
순서 없는 목록
- 사과
- 바나나
- 체리
순서 있는 목록
- 첫 번째 항목
- 두 번째 항목
- 세 번째 항목
테이블 태그 (<table>)
표를 만들고자 할 때는 <table> 태그를 사용합니다. tr은 행을, td는 셀을 정의하며, th는 헤더 셀을 나타냅니다:
| 이름 | 나이 |
|---|---|
| 홍길동 | 25 |
HTML 속성의 활용
HTML 태그는 다양한 속성을 가질 수 있으며, 이러한 속성들은 태그의 동작이나 스타일을 조정하는 데 사용됩니다. 예를 들어, 링크를 새 창에서 열고 싶으면 target=”_blank” 속성을 추가합니다:
구글로 이동
간단한 HTML 실습 예제
이제까지 배운 내용을 바탕으로 간단한 웹 페이지를 만들어 보겠습니다. 아래 코드는 기본적인 HTML 웹 페이지의 예입니다:
나의 첫 번째 웹 페이지 나의 첫 번째 웹 페이지
이 페이지는 HTML로 작성된 간단한 웹 페이지입니다.
좋아하는 취미
- 독서
- 여행
- 영화 감상
더 많은 정보를 원하시면 여기를 클릭하시기 바랍니다.
위 코드에서는 다양한 HTML 태그들 사용하여 기본적인 웹 페이지를 구성했습니다. 이 파일을 웹 브라우저에서 열면, 텍스트와 링크, 목록 등이 포함된 페이지가 정상적으로 나타납니다.
마무리하며
HTML은 웹 개발에 있어서 그 기초에 해당하는 언어입니다. 이를 익히는 과정은 웹 페이지를 만드는 첫 걸음을 딛는 것이며, 이후 CSS와 JavaScript를 배우는 데에도 큰 도움이 됩니다. 이 포스트에서 설명한 HTML 문서의 구조와 주요 태그들, 그리고 예제를 통해 어떻게 웹 페이지를 만드는지에 대해 이해할 수 있었기를 바랍니다. 앞으로 다양한 웹 개발 기술을 배워가며, 더 많은 가능성을 펼쳐보시길 바랍니다.
자주 찾는 질문 Q&A
HTML이란 무엇인가요?
HTML은 웹 페이지를 만드는 데 사용되는 기본 마크업 언어로, 콘텐츠의 구조를 정의합니다.
HTML 문서의 기본 구조는 어떤 형태인가요?
HTML 문서는 일반적으로 <html>, <head>, <body>의 구성을 따릅니다.
제목 태그는 어떻게 사용하나요?
웹 페이지의 제목을 설정하기 위해 <h1>부터 <h6>까지의 제목 태그를 활용합니다.
단락을 구분하려면 어떤 태그를 사용하나요?
단락을 나누기 위해 <p> 태그를 이용하여 텍스트를 구분합니다.
웹 페이지에 이미지를 추가하려면 어떻게 해야 하나요?
이미지를 삽입할 때는 <img> 태그를 사용하며, src 속성으로 이미지 경로를 지정합니다.