메타데이터

이 태그들은 모두 <head> 안에 배치되며, 문서의 메타데이터나 리소스 연결을 담당합니다.

title

title 태그는 일반적으로 속성을 사용하지 않으며, 단순히 텍스트 콘텐츠만 포함합니다.

<head>
  <title>My Awesome Website</title>
</head>

설명: 브라우저 탭에 "My Awesome Website"라는 제목이 표시됩니다.

meta

속성	설명
`charset`	문서의 문자 인코딩을 지정합니다. (예: `UTF-8`)
`name`	메타데이터의 이름을 정의합니다. (예: `description`, `keywords`)
`content`	`name` 또는 `http-equiv`에 대한 값을 지정합니다.
`http-equiv`	HTTP 헤더와 유사한 동작을 정의합니다. (예: `refresh`, `content-type`)

meta의 viewport 설정은 모바일 웹에서 필수적이며, link는 CSS와 파비콘 연결에 자주 사용됩니다.

<head>
  <meta charset="UTF-8">
  <meta name="description" content="This is a sample website.">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="refresh" content="5;url=https://example.com">
</head>

설명:
- charset="UTF-8": 문자 인코딩을 UTF-8로 설정.
- name="description": 검색 엔진에 표시될 문서 설명.
- name="viewport": 모바일 친화적 뷰포트 설정.
- http-equiv="refresh": 5초 후 다른 페이지로 리디렉션.

link

속성	설명
`rel`	연결된 리소스와 문서의 관계를 지정합니다. (예: `stylesheet`, `icon`)
`href`	연결할 리소스의 URL을 지정합니다.
`type`	리소스의 MIME 타입을 지정합니다. (예: `text/css`)
`media`	리소스가 적용될 미디어 유형을 지정합니다. (예: `screen`, `print`)

<head>
  <link rel="stylesheet" href="styles.css" type="text/css" media="screen">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
</head>

설명:
- rel="stylesheet": 외부 CSS 파일 연결.
- rel="icon": 브라우저 탭에 표시될 파비콘 연결.

style

속성	설명
`type`	스타일시트의 MIME 타입을 지정합니다. (기본값: `text/css`)
`media`	스타일이 적용될 미디어 유형을 지정합니다. (예: `screen`, `all`)
`scoped`	스타일을 특정 요소에만 적용하도록 제한합니다. (HTML5에서 실험적, 비추천)

<head>
  <style type="text/css" media="screen">
    body {
      background-color: lightblue;
      font-family: Arial, sans-serif;
    }
  </style>
</head>

설명: <style> 태그 내에 CSS를 직접 작성하여 페이지 스타일을 정의.

base

속성	설명
`href`	모든 상대 URL의 기준이 되는 절대 URL을 지정합니다.
`target`	링크의 기본 열기 방식을 지정합니다. (예: `_blank`, `_self`)

base는 한 문서에 하나만 사용할 수 있으며, 모든 상대 URL에 영향을 미칩니다.

<head>
  <base href="https://example.com/resources/" target="_blank">
</head>
<body>
  <a href="page1.html">Page 1</a>
  <img src="image.jpg" alt="Sample Image">
</body>

설명:
- href: 모든 상대 URL의 기준 경로를 "https://example.com/resources/"로 설정.
- target="_blank": 링크가 새 탭에서 열리도록 기본 설정.

3.4 KiB Raw Blame History

메타데이터

title

meta

link

style

base

3.4 KiB

Raw Blame History