Files

Elex 3d30ee3192 2025-01-24T01:44:03

2025-01-24 01:44:03 +09:00

6.4 KiB

Raw Blame History

문서 구조

HTML 문서의 기본적인 뼈대를 이루는 문서 구조 태그에 대해 자세히 알아보겠습니다. 이 태그들은 웹 페이지의 내용을 논리적으로 구분하고, 브라우저에게 문서의 구조를 알려주는 중요한 역할을 합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>HTML 문서 구조 예시</title>
</head>
<body>
  <h1>제목입니다</h1>
  <p>이것은 단락입니다.</p>
</body>
</html>

<!DOCTYPE html>: HTML 문서의 유형을 선언하는 부분으로, 항상 문서의 맨 처음에 위치해야 합니다.

html

HTML 문서 전체를 감싸는 최상위 태그입니다. 문서가 HTML 문서임을 선언하는 역할을 합니다.

<html>
</html>

lang 속성: <html> 태그에 lang 속성을 추가하여 문서의 언어를 지정할 수 있습니다. (예: lang="ko")

head

문서의 메타데이터를 포함하는 부분입니다. 문서의 제목, 스타일 시트 연결, 스크립트 연결 등이 이곳에 들어갑니다. 실제로 보이는 부분은 아니지만, 검색 엔진이나 브라우저에게 중요한 정보를 제공합니다.

<head>
  <title>HTML 문서 예시</title>
  <meta charset="UTF-8">
</head>

title

<head> 태그 안에 위치하며, 브라우저의 탭이나 검색 결과에 표시되는 문서의 제목을 설정합니다.

meta

문서에 대한 추가적인 정보를 제공하는 태그입니다. 문서의 인코딩, 설명, 키워드 등을 설정할 수 있습니다.

<meta charset="UTF-8"> <meta name="description" content="이 문서는 HTML 문서 구조에 대한 설명입니다.">

charset: 문서의 문자 인코딩을 지정합니다. (예: UTF-8)
name: 추가적인 정보를 제공하기 위한 이름을 지정합니다.
content: name 속성에 해당하는 정보의 내용을 지정합니다.
- http-equiv: HTTP 헤더와 동일한 의미를 가지는 메타 태그를 정의합니다.
- X-UA-Compatible: IE 호환 모드 설정
refresh: 페이지 자동 새로 고침
expires: 캐시 유효 기간 설정
viewport: 모바일 기기에서 웹 페이지가 표시되는 방식을 제어합니다.
- width: viewport의 너비를 설정
- initial-scale: 초기 확대 비율 설정
- user-scalable: 사용자가 페이지를 확대/축소할 수 있는지 여부 설정
robots: 검색 엔진 크롤러에게 웹 페이지를 어떻게 처리할지 지시합니다. (index, noindex, follow, nofollow 등)
author: 문서의 저자를 지정합니다.
copyright: 저작권 정보를 지정합니다.
date: 문서의 생성 또는 수정 날짜를 지정합니다.

<!-- 검색 엔진 최적화 (SEO) -->
<meta name="description" content="웹 페이지에 대한 간략한 설명">
<meta name="keywords" content="웹 페이지와 관련된 키워드">
<!-- 소셜 미디어 공유 -->
<meta property="og:title" content="페이스북 공유 시 표시되는 제목">
<meta property="og:description" content="페이스북 공유 시 표시되는 설명">
<meta property="og:image" content="페이스북 공유 시 표시되는 이미지 URL">
<!-- 모바일 웹 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 호환성 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">

base

<base> 태그는 HTML 문서 내에서 모든 상대적인 URL의 기본 경로를 설정하는 데 사용됩니다. 즉, <base> 태그를 이용하면 문서 내의 모든 링크가 지정된 기본 경로를 기준으로 해석됩니다. HTML 문서 내에 <base> 태그는 한 번만 사용해야 하며, 반드시 <head> 태그 안에 위치해야 합니다.

<base href="https://example.com/images/" />

href 속성: 기본 경로를 지정하는 필수 속성입니다. 절대 URL 또는 상대 URL을 사용할 수 있습니다.

link

<link> 태그는 HTML 문서 내에서 현재 문서와 외부 리소스 간의 관계를 정의하는 데 사용됩니다. 즉, 외부 스타일 시트, 아이콘, RSS 피드 등 다양한 종류의 외부 파일을 연결하는 역할을 합니다.

<!-- CSS 파일 연결 -->
<link rel="stylesheet" href="styles.css">
<!-- favicon 연결 -->
<link rel="icon" href="favicon.ico">
<!-- RSS 피드 연결 -->
<link rel="alternate" type="application/rss+xml" title="RSS 피드" href="feed.xml">

rel 속성: 링크의 관계를 나타내는 필수 속성입니다. (예: stylesheet, icon, alternate 등)
href 속성: 연결할 리소스의 URL을 지정하는 필수 속성입니다.
type: 리소스의 MIME 타입을 지정합니다.
media: 특정 미디어에만 적용할 스타일 시트를 지정합니다.
sizes: 아이콘의 크기를 지정합니다.

body

실제로 웹 페이지에 보이는 모든 내용이 들어가는 부분입니다. 텍스트, 이미지, 링크 등 웹 페이지의 모든 콘텐츠는 <body> 태그 안에 위치합니다.

<body>
  <h1>제목입니다</h1>
  <p>이것은 단락입니다.</p>
</body>

style

HTML 문서의 스타일을 정의하는 데 사용되는 태그입니다. CSS(Cascading Style Sheets)를 직접 작성하여 웹 페이지의 디자인을 제어할 수 있습니다.

<style>
  /* CSS 스타일 정의 */
  body {
    background-color: lightblue;
  }
  h1 {
    color: navy;
  }
</style>

<head> 태그 안에 위치하는 것이 일반적입니다. <body> 태그 안에 위치할 수도 있지만, <head> 태그 안에 위치하는 것이 권장됩니다.

script

JavaScript 코드를 포함하여 웹 페이지에 동적인 기능을 추가하는 데 사용되는 태그입니다. 클릭 이벤트, 페이지 로딩 시 실행되는 기능 등 다양한 동작을 구현할 수 있습니다.

<script>
  // JavaScript 코드
  alert("Hello, world!");
</script>

<head> 태그 안 또는 <body> 태그 안에 위치할 수 있습니다. <head> 태그 안에 위치하면 페이지 로딩 시 스크립트가 실행되고, <body> 태그 안에 위치하면 페이지의 다른 콘텐츠가 모두 로드된 후에 스크립트가 실행됩니다.

noscript

자바스크립트를 지원하지 않는 브라우저나 자바스크립트가 비활성화된 경우에 표시될 콘텐츠를 정의하는 태그입니다.

<noscript>
  자바스크립트가 지원되지 않습니다.
</noscript>

<body> 태그 안에 위치하는 것이 일반적입니다.

6.4 KiB Raw Blame History