로그인 회원가입

메타 정보 설정

약 4분

본문 듣기

메타 정보 설정

안녕하세요, 여러분! 오늘은 HTML 문서에서 메타 정보를 설정하는 방법에 대해 알아보겠습니다. 메타 정보란 웹 페이지에 대한 정보를 담고 있는 데이터로, 사용자는 직접 보지 않지만 검색 엔진이나 브라우저가 이 정보를 활용합니다.

코드 html 
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="이 페이지는 HTML 메타 태그에 대한 예제입니다.">
    <title>메타 정보 예제</title>
</head>
<body>
    <h1>메타 정보 설정하기</h1>
    <p>HTML 메타 태그에 대해 배워봅시다!</p>
</body>
</html>

위 코드에서 각 메타 태그의 기능을 살펴볼까요?

  1. <meta charset="UTF-8">: 이 태그는 페이지의 문자 인코딩을 설정합니다. UTF-8은 대부분의 언어를 지원하므로, 우리는 이 설정을 사용합니다.

  2. <meta name="viewport" content="width=device-width, initial-scale=1.0">: 이 태그는 반응형 웹 디자인을 위해 브라우저의 뷰포트를 설정합니다. 즉, 다양한 장치에서 잘 보이도록 합니다.

  3. <meta name="description" content="...">: 이 태그는 페이지에 대한 간단한 설명을 추가합니다. 검색 엔진 결과에 표시될 수 있습니다.

이제 여러분의 VS Code에서 위 코드를 입력해 보세요!

실습: 웹 페이지 메타 정보 설정하기

  1. VS Code를 엽니다.
  2. 새 HTML 파일을 만듭니다. (예: index.html)
  3. 위에서 설명한 코드를 복사하여 붙여넣습니다.
  4. 파일을 저장하고, 웹 브라우저에서 열어 보세요.

변경된 내용을 쉽게 확인하려면 브라우저의 개발자 도구(F12)를 열어 'Elements' 탭에서 확인할 수 있습니다.

핵심 요약

  • 메타 정보는 웹 페이지에 대한 중요한 정보를 담고 있습니다.
  • 다양한 메타 태그를 사용하여 페이지의 특성을 정의할 수 있습니다.

실습 문제

  • 여러분이 만든 HTML 문서에 다음 메타 태그를 추가해 보세요:
    1. 키워드를 설정하는 메타 태그
    2. 저작권 정보를 담은 메타 태그

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

이제 여러분의 자기소개 페이지를 만들어 볼 차례입니다.

  1. 위에서 배운 메타 태그들을 모두 포함시키고, 여러분의 이름과 취미를 소개하는 내용을 작성해 보세요.
  2. 페이지에 원하는 스타일을 추가하여 여러분만의 멋진 페이지를 만들어 보세요.

여러분의 창의력을 발휘해 보세요! 웹 개발의 세계는 여러분을 기다리고 있습니다.

여러분, HTML의 기본을 배워가고 있네요! 메타 정보를 설정하는 것이 웹 페이지의 첫 걸음이라는 것을 잊지 마세요. 추가적인 질문이 있다면 언제든지 문의해 주세요!

좋아요 0

댓글 0

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

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