기본 HTML 지식
소개
HTML(HyperText Markup Language)은 웹의 중추입니다. 웹 페이지를 만들고 디자인하는 데 사용되는 표준 언어입니다. HTML을 이해하는 것은 웹 개발이나 디자인을 탐구하려는 모든 사람에게 필수적입니다. 이 기사에서는 HTML, 구조 및 주요 구성 요소에 대한 기본 개요를 제공합니다.
HTML이란 무엇입니까?
HTML은 HyperText Markup Language의 약자입니다. 웹 페이지의 구조를 만드는 데 사용되는 마크업 언어입니다. 논리와 알고리즘을 사용하는 프로그래밍 언어와 달리 HTML은 태그를 사용하여 문서 내의 요소를 정의합니다. 이 태그는 웹 브라우저에 콘텐츠를 표시하는 방법을 알려줍니다.
HTML 문서의 기본 구조
HTML 문서는 웹 브라우저가 내용을 올바르게 해석하고 표시할 수 있도록 특정 방식으로 구성됩니다. 다음은 HTML 문서의 간단한 예입니다.
``html
<!DOCTYPE HTML>
<html>
<머리>
<title>나의 첫 번째 HTML 페이지</title>
</head>
<본문>
<h1>내 웹사이트에 오신 것을 환영합니다</h1>
<p>이것은 내 첫 번째 HTML 페이지에 있는 텍스트 단락입니다.</p>
</body>
</html>
````
구조 설명
1. `<!DOCTYPE html>`: 이 선언은 HTML의 문서 유형과 버전을 정의합니다. 이는 브라우저가 페이지를 올바르게 렌더링하는지 확인합니다.
2. `<html>`: 이 태그는 전체 HTML 문서를 래핑합니다.
3. `<head>`: 이 섹션에는 제목, 스타일시트 링크 등 문서에 대한 메타 정보가 포함되어 있습니다.
4. `<title>`: 이 태그는 브라우저의 제목 표시줄이나 탭에 표시되는 웹페이지의 제목을 설정합니다.
5. `<body>`: 이 섹션에는 텍스트, 이미지, 링크 등 웹페이지의 콘텐츠가 포함됩니다.
일반적인 HTML 태그
HTML은 다양한 태그로 구성되며 각각은 특정 목적을 수행합니다. 가장 일반적으로 사용되는 태그는 다음과 같습니다.
제목
제목은 웹 페이지 내의 제목과 부제목을 정의하는 데 사용됩니다.
HTML은 `<h1>`부터 `<h6>`까지 6가지 수준의 제목을 제공하며, `<h1>`이 가장 중요합니다.
``html
<h1>주제목</h1>
<h2>부제목</h2>
<h3>하위 부제목</h3>
````
단락
`<p>` 태그는 텍스트 단락을 정의하는 데 사용됩니다.
``html
<p>텍스트 단락입니다.</p>
````
연결
`<a>` 태그는 사용자가 한 페이지에서 다른 페이지로 이동할 수 있도록 하는 하이퍼링크를 만드는 데 사용됩니다.
``html
예시 보기
````
이미지
`<img>` 태그는 웹페이지에 이미지를 삽입하는 데 사용됩니다. 이미지 소스를 지정하려면 `src` 속성이 필요하고 대체 텍스트에는 `alt` 속성이 필요합니다.
``html
<img src="image.jpg" alt="이미지 설명">
````
목록
HTML은 정렬된 목록과 정렬되지 않은 목록을 모두 지원합니다. 순서가 있는 목록은 `<ol>` 태그를 사용하고, 순서가 없는 목록은 `<ul>` 태그를 사용합니다. 목록 항목은 `<li>` 태그를 사용하여 정의됩니다.
``html
<ol>
<li>항목 1</li>
<li>항목 2</li>
<li>항목 3</li>
</ol>
<ul>
<li>첫 번째 항목</li>
<li>두 번째 항목</li>
<li>세 번째 항목</li>
</ul>
댓글