개인 소개 페이지 완성하기

약 5분

본문 듣기

개인 소개 페이지 완성하기

안녕하세요! 오늘은 HTML을 사용하여 여러분의 멋진 개인 소개 페이지를 만들어 보겠습니다. HTML은 웹페이지의 구조를 만드는 데 사용되는 언어입니다. 비유하자면, HTML은 집을 짓기 위한 기초와 같은 존재입니다.

이번 실습에서는 여러분이 자신의 정보를 담은 페이지를 생성할 것입니다. 이를 통해 HTML의 기본 개념을 익히고, 실무에서 활용할 수 있는 스킬을 키울 수 있습니다. 자, 그럼 시작해 볼까요?

1단계: 기본 HTML 구조 만들기

먼저, 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>
    <h1>나의 소개</h1>
</body>
</html>

위 코드는 HTML 문서의 기본 틀을 보여줍니다. 각 요소의 역할은 다음과 같습니다:

<!DOCTYPE html>: HTML5 문서임을 선언합니다.
<html lang="ko">: HTML 문서의 언어가 한국어임을 나타냅니다.
<head>: 문서의 메타 정보를 포함하는 부분으로, 제목과 문자 인코딩 설정이 있습니다.
<body>: 실제 웹페이지에 보여지는 내용을 포함합니다.

2단계: 개인 정보 추가하기

이제 여러분의 소개 내용을 추가해 보겠습니다. 예를 들어, 이름, 나이, 취미 등을 포함할 수 있습니다. 아래 코드를 추가해 보세요.

코드 html

<h2>이름: 홍길동</h2>
<p>나이: 25세</p>
<p>취미: 코딩, 독서, 여행</p>

위 코드를 <body> 안에 넣어주세요. 각 태그의 역할은 다음과 같습니다:

<h2>: 두 번째 수준의 제목을 나타냅니다.
<p>: 단락을 나타내며, 여기서는 정보들을 나열하는 데 사용합니다.

3단계: 스타일 추가하기

이제 여러분의 페이지를 조금 더 멋지게 만들어 보겠습니다. CSS를 사용하여 스타일을 추가해보세요. 예를 들어, 폰트를 변경하거나 배경색을 추가할 수 있습니다.

코드 html

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

위 코드는 페이지의 배경색과 폰트를 설정하는 CSS 코드입니다. <style> 태그 안에 CSS 코드를 넣으면 됩니다.

핵심 요약

오늘은 HTML 기본 구조를 이해하고, 개인 정보를 추가하는 방법을 배웠습니다. 스타일을 적용하여 나만의 페이지를 만들며, HTML과 CSS의 기초를 익히는 좋은 경험이 되었길 바랍니다.

실습 문제

다양한 정보를 추가해 보세요. 예를 들어, 좋아하는 음식이나 여행 경험 등을 넣어보세요.
CSS를 사용하여 페이지 디자인을 더욱 다채롭게 꾸며보세요.

최종 프로젝트: 자기소개 페이지 완성하기

이제 여러분의 개인 소개 페이지를 최종적으로 꾸며보세요. 위에서 배운 내용을 바탕으로 자신만의 스타일과 정보를 담아 멋진 페이지를 만들어 보세요. HTML의 기초를 익혔으니, 앞으로도 계속해서 다양한 웹 페이지를 만들어보며 스킬을 키워나가길 바랍니다!

개인 소개 페이지 완성하기