HTML(HyperText Markup Language)은 웹 페이지를 만들기 위한 표준 마크업 언어입니다. HTML을 사용하여 텍스트, 이미지, 링크 등을 구조화하고 표시할 수 있습니다. HTML은 다양한 요소(element)로 이루어져 있습니다. 각 요소는 시작 태그와 종료 태그로 구성되며, 그 안에 내용(content)이 들어갑니다.
HTML의 구조
<!DOCTYPE html>
<html>
<head>
<title>나의 첫 HTML 문서</title>
</head>
<body>
<h1>안녕하세요, 세계!</h1>
<p>이것은 간단한 문단입니다.</p>
<a href="https://www.example.com">예시 링크</a>
</body>
</html>
<!DOCTYPE html>: 이 문서가 HTML5로 작성되었음을 선언합니다.
<html>: HTML 문서의 시작을 나타냅니다.
<head>: 문서의 메타 정보를 담고 있습니다. 예를 들어, 제목(title)이나 스타일 시트 등이 여기에 포함될 수 있습니다.
<title>: 웹 페이지의 제목을 정의합니다. 브라우저의 탭에 표시됩니다.
<body>: 실제로 웹 페이지에서 표시되는 내용을 포함합니다.
<h1>, <p>, <a> 등은 각각 제목, 문단, 링크를 나타내는 요소입니다.
많은 다른 HTML 요소들이 있으며, 각각의 역할과 사용법이 다릅니다. 예를 들어, 이미지를 표시하려면 <img> 태그를 사용하고, 리스트를 만들려면 <ul>, <ol>, <li> 등을 사용합니다. HTML은 다른 웹 기술과 함께 사용되어 웹 페이지를 만들고 디자인하는 데 사용됩니다. CSS(Cascading Style Sheets)는 웹 페이지의 스타일과 레이아웃을 제어하며, JavaScript는 웹 페이지의 동적인 기능을 구현하는 데 사용됩니다.
자주 사용하는 태그
<div>: 구역을 나누거나 그룹화하는데 사용됩니다. CSS와 함께 사용하여 스타일링이나 레이아웃을 조절할 때 유용합니다.
<p>: 문단(paragraph)을 나타내며, 텍스트 블록을 만듭니다.
<a>: 링크를 생성하는 태그입니다. 다른 웹 페이지나 리소스로 이동하도록 링크를 설정할 수 있습니다.
<img>: 이미지를 삽입하는 태그입니다. src 속성을 사용하여 이미지 파일의 경로를 지정합니다.
<ul>, <ol>, <li>: 각각은 비순서형(unordered) 리스트, 순서형(ordered) 리스트, 리스트 아이템을 나타냅니다.
<h1>, <h2>, ..., <h6>: 제목을 나타내는 태그로, 숫자가 작을수록 더 큰 제목입니다.
<span>: 인라인 요소를 그룹화하거나 스타일을 적용할 때 사용합니다.
<input>: 사용자로부터 정보를 입력받을 수 있는 입력 필드를 만듭니다. 종류에 따라 텍스트, 비밀번호, 라디오 버튼 등이 있습니다.
<button>: 버튼을 만듭니다. 클릭 가능한 버튼을 만들거나, 양식(form)을 제출하는 용도로 사용됩니다.
<form>: 사용자로부터 정보를 제출하는 양식을 만듭니다. 일반적으로 <input>, <button>, <select>, <textarea> 등과 함께 사용됩니다.
<table>, <tr>, <th>, <td>: 표를 만들 때 사용합니다. 각각 테이블, 행, 헤더 셀, 데이터 셀을 나타냅니다.
<br>: 줄 바꿈을 수행합니다. 블록 요소 내에서 사용되며, 닫는 태그가 없습니다.
<hr>: 수평선을 그립니다. 주로 섹션 구분이나 내용 간의 구분을 위해 사용됩니다.
이 외에도 다양한 HTML 태그가 있으며, 각각의 역할과 사용법을 익히면 웹 페이지를 다양한 방식으로 구조화할 수 있습니다.