맺음말

약 4분

본문 듣기

맺음말 (실습 중심 학습)

HTML을 처음 배우는 여정을 마치게 된 여러분을 진심으로 축하드립니다! 이 과정에서 여러분은 웹 페이지를 만드는 기본적인 기술을 익혔습니다.

이제 여러분은 단순한 텍스트를 포함한 웹 페이지에서 시작하여, 이미지, 링크, 리스트 등 다양한 요소를 추가하여 더 풍부한 웹 콘텐츠를 만들 수 있게 되었습니다.

이제 정말 실습 시간입니다! 여러분이 직접 만들어 본 웹 페이지를 통해 학습한 내용을 정리해 보세요. 이 과정은 여러분의 기술이 얼마나 발전했는지를 느끼게 해줄 것입니다.

프로젝트: 자기소개 페이지 만들기

이번 프로젝트에서는 여러분의 개인적인 정보를 담은 자기소개 페이지를 만들어 보겠습니다. 이 페이지는 여러분이 배운 HTML 태그들을 활용할 수 있는 좋은 기회입니다.

아래 단계별로 진행하시면 됩니다.

VS Code에서 새 HTML 파일을 만드세요.

코드 html

<!DOCTYPE html>
<html>
<head>
    <title>나의 소개 페이지</title>
</head>
<body>
    <h1>안녕하세요, 저는 [이름]입니다!</h1>
    <p>저는 [간단한 자기소개]입니다.</p>
</body>
</html>

위 코드는 기본적인 HTML 구조를 가지고 있습니다. <h1> 태그는 제목을 나타내고, <p> 태그는 단락을 나타내죠. 이제 여러분의 이름과 자기소개를 추가해 보세요.

나의 취미나 좋아하는 것들을 리스트로 만들어 보세요.

코드 html

<ul>
    <li>취미 1</li>
    <li>취미 2</li>
    <li>취미 3</li>
</ul>

위 코드는 비순서 리스트를 생성합니다. 여러분이 좋아하는 취미를 추가해 보세요!

연락처 정보를 추가해 보세요. 웹 페이지에 링크를 추가하여 자신의 SNS를 연결할 수 있습니다.

코드 html

<a href='https://instagram.com/your_profile'>내 인스타그램</a>

여기서 <a> 태그는 링크를 생성하는 데 사용됩니다. 여러분의 SNS 링크를 추가해 주세요!

이제 모든 요소를 조합하여 여러분의 개인적인 페이지를 완성해 주세요. 완성된 페이지를 친구나 가족과 공유하고 피드백을 받아보세요!

핵심 요약

우리는 HTML을 사용하여 구조화된 웹 페이지를 만드는 법을 배웠습니다. 웹 페이지의 기본 구조, 텍스트, 이미지, 링크 추가 방법 등을 학습했습니다.

실습 문제

자기소개 페이지에 다른 요소를 추가해 보세요. 예를 들어, 내가 좋아하는 음악이나 영화에 대한 단락을 추가할 수 있습니다.
CSS를 사용하여 스타일링을 추가해보세요. 글꼴 크기, 색상 등을 변경할 수 있습니다.

HTML 학습 여정을 통해 자신감을 얻으셨기를 바랍니다. 앞으로도 웹 기술에 대한 흥미를 가지고 계속 탐구해나가세요!

맺음말

맺음말 (실습 중심 학습)

프로젝트: 자기소개 페이지 만들기

핵심 요약

실습 문제

댓글 0