로그인 회원가입

핵심 요약 및 복습 문제

약 4분

본문 듣기

핵심 요약 및 복습 문제

핵심 요약

이제 여러분은 HTML의 기본 개념을 익혔습니다. HTML은 웹 페이지의 구조를 만들기 위한 언어로, 마치 건축가가 집의 뼈대를 설계하는 것과 비슷합니다. HTML을 사용하여 제목, 단락, 링크, 이미지 등 다양한 요소를 웹 페이지에 추가할 수 있습니다.

우리가 배운 주요 HTML 태그는 다음과 같습니다:

  • <html>: HTML 문서의 시작과 끝을 나타냅니다.
  • <head>: 문서의 메타데이터, 스타일시트 및 스크립트를 포함합니다.
  • <body>: 페이지에 실제로 보이는 콘텐츠를 포함합니다.
  • <h1>, <h2>, … <h6>: 제목 태그로, 페이지의 계층 구조를 형성합니다.
  • <p>: 단락을 정의합니다.
  • <a>: 하이퍼링크를 생성합니다.
  • <img>: 이미지를 추가합니다.

여기서 배우고 이해한 것들은 여러분이 웹 개발의 첫 걸음을 내딛는 데 큰 도움이 될 것입니다.

복습 문제

  1. HTML 문서의 기본 구조를 설명하고 각 부분의 역할을 서술해 보세요.
  2. 다음과 같은 마크업을 작성해 보세요.
    • 제목은 "나의 첫 번째 웹 페이지"로 하고, 두 번째 제목은 "나의 소개"로 설정
    • 간단한 단락을 추가하고, 자신의 취미를 설명
    • 이미지와 링크를 1개씩 추가

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

이번 과제를 통해 여러분은 자신의 정보를 담은 간단한 자기소개 페이지를 만들어 볼 것입니다.

  1. VS Code에서 새로운 HTML 파일을 생성합니다. (파일 이름: introduce_me.html)
  2. 기본 HTML 구조를 설정합니다.
  3. 본인 이름, 나이, 취미 등을 포함한 단락을 작성합니다.
  4. 자신의 사진을 추가합니다. (사진은 URL을 통해 삽입할 수 있습니다.)
  5. 자신이 좋아하는 웹 사이트로 링크를 만듭니다.

이제 여러분의 자기소개 페이지를 브라우저에서 열어보세요! 완료 후, 코드의 각 부분이 어떻게 작동하는지 이해하고 있다면 정말 멋진 작업입니다!

코드 html 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>나의 첫 번째 웹 페이지</title>
</head>
<body>
    <h1>나의 첫 번째 웹 페이지</h1>
    <h2>나의 소개</h2>
    <p>안녕하세요! 저는 프로그래밍에 관심이 많은 학생입니다. 취미는 독서와 운동입니다.</p>
    <img src="이미지_URL" alt="나의 사진">
    <a href="웹사이트_URL">제가 좋아하는 웹사이트</a>
</body>
</html>
좋아요 0

댓글 0

댓글을 남기려면 로그인하세요.

아직 댓글이 없습니다. 첫 댓글을 남겨보세요.