안녕하세요! 웹 개발에 관심을 가져주셔서 환영합니다. 이번 섹션에서는 웹의 근간이 되는 HTML에 대해 자세히 알아보겠습니다. HTML은 웹 페이지의 구조와 콘텐츠를 정의하는데 사용되는 기본 언어입니다. 이번 강의에서는 HTML의 주요 요소들을 살펴보고, 실제로 간단한 웹 페이지를 만들어 보겠습니다.
HTML이란 무엇인가요?
HTML(하이퍼텍스트 마크업 언어)는 웹 페이지를 만들기 위한 표준 마크업 언어입니다. 여기서 "마크업 언어"란 데이터를 표시하고 구조화하기 위한 태그를 사용하는 언어를 말합니다. HTML은 프로그래밍 언어가 아니며, 웹 페이지의 콘텐츠를 구조화하고 표현하는데 사용됩니다.
왜 HTML이 중요한가요?
- 웹의 기초: HTML은 CSS와 JavaScript와 함께 웹의 3대 핵심 기술 중 하나입니다.
- 구조화된 콘텐츠: HTML을 통해 텍스트, 이미지, 링크, 목록 등을 구조화하여 웹 브라우저가 이해하고 표시할 수 있게 합니다.
- 호환성: 모든 웹 브라우저는 HTML을 해석하여 사용자에게 콘텐츠를 보여줍니다.
HTML 요소의 구성
HTML 문서는 여러 요소(element)로 구성됩니다. 각 요소는 웹 페이지의 특정 부분을 정의하고 표시합니다. 요소는 일반적으로 세 부분으로 이루어집니다:
- 시작 태그: 요소의 시작을 알리는 태그입니다. 예를 들어,
<p>는 단락(paragraph)을 나타내는 시작 태그입니다. - 콘텐츠: 요소 안에 들어가는 내용입니다. 텍스트, 다른 요소, 이미지 등이 될 수 있습니다.
- 종료 태그: 요소의 끝을 알리는 태그입니다. 시작 태그와 비슷하지만 슬래시(
/)가 앞에 붙습니다. 예를 들어,</p>는 단락의 끝을 나타냅니다.
예시: 단락 요소
<p>여기에 단락의 내용이 들어갑니다.</p><p>: 시작 태그여기에 단락의 내용이 들어갑니다.: 콘텐츠</p>: 종료 태그
주요 HTML 요소들
1. 제목(headings)
제목은 <h1>부터 <h6>까지의 태그로 표시됩니다. <h1>이 가장 크고 중요하며, <h6>은 가장 작고 덜 중요합니다.
<h1>이것은 가장 큰 제목입니다</h1>
<h2>이것은 두 번째로 큰 제목입니다</h2>2. 단락(paragraphs)
단락은 <p> 태그를 사용하여 표시합니다.
<p>이것은 단락입니다. 여기에 텍스트를 입력하세요.</p>3. 링크(links)
링크는 <a> 태그를 사용하며, href 속성을 통해 연결할 URL을 지정합니다.
<a href="https://www.example.com">예제 사이트로 이동</a>4. 이미지(images)
이미지는 <img> 태그를 사용하며, src 속성에 이미지의 경로를 지정합니다. 이 태그는 종료 태그가 필요 없는 빈 요소입니다.
<img src="이미지경로.jpg" alt="이미지 설명">5. 목록(lists)
-
순서 있는 목록은
<ol>태그를 사용하고, 각 항목은<li>로 표시됩니다.<ol> <li>첫 번째 항목</li> <li>두 번째 항목</li> </ol> -
순서 없는 목록은
<ul>태그를 사용합니다.<ul> <li>첫 번째 항목</li> <li>두 번째 항목</li> </ul>
HTML 요소의 구조 살펴보기
HTML 요소의 기본 구조를 이해하는 것은 매우 중요합니다. 앞서 설명한 것처럼, 대부분의 HTML 요소는 시작 태그, 콘텐츠, 종료 태그로 이루어져 있습니다. 그러나 몇 가지 예외가 있는데, 이미지 태그 <img>처럼 콘텐츠나 종료 태그가 없는 빈 요소입니다.
빈 요소의 예시: 이미지 태그
<img src="이미지경로.jpg" alt="이미지 설명"><img>태그는 종료 태그가 없으며, 자체적으로 완결됩니다.src속성은 이미지를 불러올 경로를 지정합니다.alt속성은 이미지를 표시할 수 없을 때 대체 텍스트를 제공합니다.
실습: 간단한 웹 페이지 만들기
이제 앞에서 배운 내용을 활용하여 실제로 간단한 웹 페이지를 만들어 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>나의 첫 번째 웹 페이지</title>
</head>
<body>
<h1>안녕하세요, HTML을 배우고 있습니다!</h1>
<p>이것은 단락입니다. HTML은 웹 페이지의 구조를 정의합니다.</p>
<h2>순서 있는 목록 예시</h2>
<ol>
<li>HTML 배우기</li>
<li>CSS 배우기</li>
<li>JavaScript 배우기</li>
</ol>
<h2>순서 없는 목록 예시</h2>
<ul>
<li>사과</li>
<li>바나나</li>
<li>체리</li>
</ul>
<h2>이미지 추가하기</h2>
<img src="이미지경로.jpg" alt="예쁜 풍경">
<h2>링크 추가하기</h2>
<p>
더 많은 정보를 원하시면 <a href="https://www.w3schools.com">W3Schools</a>를 방문하세요.
</p>
</body>
</html>코드 설명
<!DOCTYPE html>: 문서가 HTML5 표준을 따름을 선언합니다.<html lang="ko">: 문서의 언어를 한국어로 설정합니다.<head>: 메타데이터를 포함하는 부분입니다.<meta charset="UTF-8">: 문서의 인코딩을 UTF-8로 설정하여 한글이 제대로 표시되게 합니다.<title>: 브라우저 탭에 표시될 제목입니다.
<body>: 실제로 브라우저에 표시되는 콘텐츠가 들어갑니다.<h1>,<h2>: 제목을 표시합니다.<p>: 단락을 표시합니다.<ol>,<ul>: 목록을 표시합니다.<li>: 목록의 각 항목입니다.
<img>: 이미지를 표시합니다.src속성에 실제 이미지의 경로를 입력해야 합니다.
<a>: 링크를 생성합니다.href속성에 연결할 URL을 입력합니다.
마무리
지금까지 HTML의 기본 개념과 주요 요소들에 대해 알아보았습니다. 실제로 코드를 작성해보니 HTML이 어떻게 구성되고 동작하는지 감이 오시나요? 계속해서 연습하고 다양한 요소들을 활용해보세요.
