HTML 문서 작성하기

약 7분

본문 듣기

HTML 문서 작성하기

안녕하세요! 오늘은 HTML을 사용하여 웹 페이지를 만들어 볼 거예요. HTML은 HyperText Markup Language의 약자로, 웹 페이지의 구조를 정의하는 언어입니다. 마치 건축가가 집을 짓기 전에 설계도를 그리듯, HTML은 웹 페이지의 기초와 뼈대를 이룹니다.

이번 강의에서는 자기소개 페이지를 만드는 실습을 통해 HTML의 기본 구조와 요소를 단계별로 배워볼 거예요. 이 실습은 특히 프로그래밍을 처음 배우는 여러분에게 적합합니다!

1단계: HTML 기본 구조 이해하기

HTML 문서는 기본적으로 다음과 같은 구조를 가지고 있습니다. 세 가지 주요 요소로 구성되어 있는데, 이는 모든 웹 페이지의 시작점입니다.

코드 html

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>자기소개 페이지</title>
</head>
<body>

</body>
</html>

위 코드는 기본적인 HTML 문서 구조입니다.

<!DOCTYPE html>: 이 문서는 HTML5로 작성되었다고 브라우저에 알려줍니다.
<html>: HTML 문서의 시작을 알리는 태그입니다.
<head>: 웹 페이지에 대한 메타 정보를 포함하는 부분입니다.
<meta charset="UTF-8">: 문자 인코딩을 설정합니다. 이는 다양한 언어의 문자를 표현할 수 있게 해줍니다.
<title>: 웹 브라우저의 제목 표시줄에 보여질 문서의 제목입니다.
<body>: 실제 내용이 들어가는 부분입니다.

이제 이 구조를 VS Code에 입력해 보세요. 파일 이름은 index.html로 저장해 주세요.

2단계: 자기소개 페이지의 첫 번째 콘텐츠 추가하기

이제 본격적으로 자기소개 페이지에 필요한 내용을 추가해 봅시다. 먼저 페이지의 제목과 본문 내용을 추가해볼게요.

코드 html

<h1>안녕하세요! 저는 [당신의 이름]입니다.</h1>
<p>저는 [당신의 직업이나 관심사]에 관심이 많습니다.</p>

위의 코드를 <body> 태그 안에 추가해보세요. 내용은 여러분의 이름과 관심사로 바꿔주시면 됩니다.

<h1>: 가장 큰 제목을 정의하는 태그입니다. 여러분의 이름이 여기 표시될 거예요.
<p>: 단락을 정의하는 태그로, 여러분의 직업이나 관심사를 간단히 설명합니다.

이제 웹 브라우저에서 index.html 파일을 열어 보세요. 여러분이 입력한 내용이 잘 보이는지 확인해 봅시다!

3단계: 이미지 추가하기

이제 자기소개 페이지에 사진을 추가해볼 거예요. 이미지가 있으면 더 친근하고 개성 있는 자기소개 페이지가 될 수 있습니다!

코드 html

<img src="[이미지 URL]" alt="자기소개 사진" width="300">

위의 코드를 <body> 태그 안에 추가하세요. [이미지 URL] 부분에는 여러분이 원하는 이미지의 URL을 넣어주세요.

<img>: 이미지를 문서에 삽입할 때 사용하는 태그입니다.
src: 이미지의 경로를 정의합니다.
alt: 이미지가 로드되지 않았을 때 보여줄 대체 텍스트를 설정합니다.

저장한 후 브라우저에서 새로고침을 해보세요! 새로운 이미지가 보일 거예요.

4단계: 링크 추가하기

이제 중요한 정보를 다른 페이지로 연결할 수 있는 링크도 추가해볼 거예요. 여러분이 좋아하는 웹사이트의 링크를 추가할 수 있습니다.

코드 html

<a href="[링크 URL]">저의 블로그</a>

위의 코드를 <body> 태그 안에 추가하세요. [링크 URL] 부분에는 여러분이 좋아하는 블로그나 웹사이트의 주소를 넣어주세요.

<a>: 앵커 태그로, 다른 웹 페이지로 링크를 건다는 의미입니다.
href: 링크가 연결될 대상을 정의합니다.

브라우저에서 링크를 클릭해보세요! 여러분의 페이지에서 새로운 세상으로 나아갈 수 있게 해줄 거예요.

5단계: 페이지 꾸미기

마지막 단계로, 여러분의 자기소개 페이지를 조금 더 예쁘게 꾸며볼까요? CSS를 사용하여 스타일을 추가할 수 있습니다. 생각해보세요, 집을 꾸미는 것과 비슷합니다! 평범한 벽지 대신에 화려한 페인트로 칠하는 것처럼요.

코드 html

<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        text-align: center;
    }
</style>

위의 코드를 <head> 태그 안에 추가하세요.

이제 페이지가 훨씬 매력적으로 보일 거예요!

font-family: 텍스트의 폰트를 설정합니다.
background-color: 페이지 배경색을 변경합니다.
text-align: 페이지의 텍스트 정렬을 설정합니다.

핵심 요약 및 실습 문제

오늘 우리는 HTML 문서 구조와 다양한 요소들, 그리고 자기소개 페이지를 만드는 과정을 배웠습니다. 자, 이제 여러분도 여러분만의 자기소개 페이지를 만들어보세요!

실습 문제:

본인의 이름, 직업, 관심사, 그리고 이미지를 추가하여 페이지를 완성해 보세요.
추가로 좋아하는 웹사이트 링크를 추가해 보세요.
스타일을 변경하여 더 매력적으로 만들어 보세요!

마무리 및 동기 부여

여러분, 오늘의 실습을 통해 HTML의 기초를 배우셨습니다! 웹 페이지를 만드는 것은 매우 재미있고, 실무에서도 많이 활용되는 기술입니다. 앞으로도 자신감을 가지고 계속 도전하세요. 여러분의 창의성이 담긴 웹 페이지를 세상에 보여주세요!

HTML 문서 작성하기