예제 및 동작 원리

약 4분

본문 듣기

HTML 기초

안녕하세요! HTML을 배우기 위해 이 강의에 오신 것을 환영합니다. HTML은 웹 페이지의 뼈대를 구성하는 언어로, 단순한 텍스트 문서로 시작해서 멋진 웹사이트로 발전할 수 있습니다. 이제 기본적인 태그부터 시작해 볼까요?

HTML 문서는 기본적으로 <html>, <head>, <body> 태그로 구성됩니다. 이 태그들을 통해 웹 페이지의 구조를 정의합니다.

코드 html

<!DOCTYPE html>
<html>
<head>
    <title>내 첫 웹 페이지</title>
</head>
<body>
    <h1>안녕하세요, HTML!</h1>
    <p>웹 페이지에 환영합니다.</p>
</body>
</html>

위 코드는 HTML 문서의 기본 구조입니다. <html> 태그는 문서의 시작을 알리고, <head> 태그 안에는 문서에 대한 메타 정보를 포함합니다. <body> 태그는 실제로 사용자에게 보여지는 내용을 담고 있습니다.

텍스트를 표시하기 위한 다양한 태그가 있습니다. 이 중 자주 사용되는 몇 가지를 살펴보겠습니다: <h1>부터 <h6>까지는 제목을 나타내고, <p>는 단락을 나타냅니다.

코드 html

<h1>제목 1</h1>
<h2>제목 2</h2>
<h3>제목 3</h3>
<p>여기는 단락입니다.</p>

여기서 <h1> 태그는 가장 큰 제목을 표시하고, <h2>는 그 다음 크기의 제목입니다. <p> 태그는 일반적인 단락 텍스트를 표시합니다. 각 태그는 텍스트의 중요성과 가독성을 결정하는 데 도움을 줍니다.

이제 여러분이 직접 위 예제를 따라 만들어 보세요. VS Code에서 새 HTML 파일을 만들고, 처음에 배운 기본 구조를 입력한 후, 각 제목과 단락을 추가해 보세요. 실제로 손으로 입력해 보는 것이 중요합니다!

자신의 이름과 취미를 소개하는 단락을 추가해 보세요! <p> 태그를 사용해 보세요.

이번 강의의 마지막으로, 자기소개 페이지를 만들어 볼까요? 자신의 소개, 취미, 관심사에 대해 작성해보세요. 제목과 단락을 적절히 사용하여 구조화된 내용을 만들어 보세요!

직접 만들어 본 결과물은 공유해 보세요. 여러분의 첫 번째 HTML 페이지가 어떻게 생겼는지 다른 사람과 공유하는 것이 큰 동기부여가 될 수 있습니다!