머리 부분에서 사용되는 태그
이 글은 머리 부분에서 사용되는 태그를 설명합니다.
이것은 <link>, <script>, <style>과 같은 head 섹션에서 사용되는 태그를 설명합니다.
YouTube Video
머리 부분에서 사용되는 태그
<title> 태그
1<title>Document Title</title><title>태그는 문서의 제목을 정의합니다. 이 제목은 브라우저의 탭에 표시되며, 북마크와 검색 결과에 사용됩니다.
<link> 태그
<link>태그는 외부 자원을 현재 문서와 연결하는 데 사용됩니다. 주로 외부 CSS 파일을 연결하는 데 사용되지만, 아이콘 및 기타 외부 자원에도 사용할 수 있습니다.
<link> 태그의 rel 속성
rel 속성은 <link> 태그에서 연결되는 자원과 현재 문서 간의 관계를 지정하는 데 사용됩니다. rel 속성에는 많은 종류의 값이 있지만, 여기서는 특히 중요하고 자주 사용되는 것을 설명하겠습니다.
stylesheet
1<link rel="stylesheet" href="styles.css">stylesheet는 외부 스타일 시트를 연결하는 데 사용됩니다.
icon
1<link rel="icon" href="favicon.ico" type="image/x-icon">rel="icon"는 브라우저의 탭이나 북마크에 표시되는 아이콘을 정의합니다. 올바른 파비콘을 지정하면 사이트의 브랜드 및 비주얼 인식이 향상됩니다.
preload
1<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin="anonymous">preload는 페이지 렌더링이 시작되기 전에 자원을 미리 로드하는 데 사용됩니다. 특히 폰트나 큰 이미지처럼 타이밍이 중요한 자원에 유용합니다. 이는 성능을 향상시키고 사용자 경험을 개선합니다.
canonical
1<link rel="canonical" href="https://example.com/page.html">canonical은 페이지의 표준 버전에 대해 검색 엔진에 알리는 데 사용됩니다. 중복 콘텐츠의 경우, 표준 URL을 지정하면 SEO 관점에서 검색 엔진 순위를 통합하는 데 도움이 되며, 콘텐츠가 올바르게 인덱싱되도록 보장합니다.
alternate
1<link rel="alternate" hreflang="en" href="https://example.com/en/">alternate는 검색 엔진과 브라우저에 다른 언어 또는 형식의 페이지를 나타낼 때 사용됩니다. 다국어 사이트에서는hreflang속성을 조합하여 각 언어 버전의 URL을 지정함으로써 사용자가 적절한 언어의 페이지를 볼 수 있도록 할 수 있습니다.
manifest
1<link rel="manifest" href="/manifest.json">manifest는 PWA (Progressive Web App)를 위한 설정 정보를 포함하는 매니페스트 파일을 브라우저에 제공합니다. 이 파일은 앱 아이콘, 테마 색상, 표시 모드와 같은 정보를 포함하며, 모바일 장치에서 PWA를 설치하고 실행하는 데 도움을 줍니다.
dns-prefetch
1<link rel="dns-prefetch" href="//example.com">- 외부 리소스를 참조할 때, 도메인의 DNS 해석을 미리 수행하면 페이지 로딩 속도를 향상시킬 수 있습니다. 이는 외부 리소스가 많은 페이지나 빠른 사용자 경험이 필요한 경우 특히 효과적입니다.
<style> 태그
1<style>
2 body {
3 font-family: Arial, sans-serif;
4 }
5</style><style>태그는 내부 스타일 시트를 정의하는 데 사용됩니다. 페이지의 요소에 CSS 스타일을 적용하는 데 사용되며, 외부 파일을 사용하지 않고 CSS를 작성할 수 있습니다.
<script> 태그
1<script>
2 console.log('Hello, World!');
3</script>
4<script src="script.js"></script><script>태그는 JavaScript 코드를 HTML 문서에 포함시키는 데 사용됩니다. 외부 JavaScript 파일을 연결하여 페이지의 동적 동작을 제어할 수도 있습니다.src속성을 사용하여 스크립트 파일을 지정하십시오.
async 및 defer 속성
<script> 태그는 스크립트 로딩 및 실행 타이밍에 영향을 미치는 async와 defer 두 가지 속성을 지원합니다. 일반적으로 브라우저는 스크립트를 순차적으로 처리하지만, 이러한 속성을 사용하면 페이지 성능 및 로딩 경험을 개선할 수 있습니다.
async 속성
1<script src="script.js" async></script>async속성을 사용하면 스크립트를 비동기적으로 로드할 수 있습니다. 브라우저는 스크립트를 다른 리소스와 병렬로 로드하며 로드가 완료되면 즉시 실행합니다.async는 주로 독립적인 스크립트에 적합하며, 스크립트가 다른 스크립트나 DOM 로딩에 의존하지 않을 때 사용됩니다.
defer 속성
1<script src="script.js" defer></script>defer속성을 사용하면 스크립트를 비동기적으로 로드하지만, HTML 분석이 완료된 후 실행됩니다. 스크립트 실행이 페이지 표시를 차단하지 않으므로 사용자 경험을 향상시킵니다.defer는 스크립트가 DOM이 완전히 로드된 후 실행될 필요가 있을 때 효과적입니다. 예를 들어, 페이지의 전체 레이아웃과 요소가 로드된 후 스크립트를 실행하고자 할 때 적합합니다.
CORS 정책과 crossorigin 속성
외부 스크립트를 로드할 때 동일 출처 정책(Same-Origin Policy)에 따라 보안 제한이 가해질 수 있습니다. 이러한 경우, crossorigin 속성을 사용하여 리소스 공유를 허용할 수 있습니다.
1<script src="https://example.com/script.js" crossorigin="anonymous"></script>crossorigin 속성은 다음 두 가지 값으로 설정할 수 있습니다:.
anonymous: 자격 증명을 포함하지 않고 요청을 전송합니다.use-credentials: 자격 증명을 포함하여 요청을 전송합니다.
type 속성
<script> 태그는 type 속성을 사용하여 스크립트 유형을 지정할 수 있습니다. 기본적으로 JavaScript가 사용되지만, 모듈 타입 JavaScript나 템플릿 언어와 같은 특정 스크립트 유형을 지정할 수도 있습니다.
JavaScript 모듈
1<script type="module" src="module.js"></script>-
ECMAScript 2015 (ES6) 이후로, JavaScript 모듈이 도입되어 코드가 모듈로 분리될 수 있으며 재사용성이 향상되었습니다.
type="module"을 지정하면 스크립트를 모듈로 취급할 수 있습니다. -
모듈은
import및export를 사용하여 다른 모듈로 분리할 수 있습니다.
비 JavaScript 스크립트
1<script type="application/ld+json">
2{
3 "@context": "https://schema.org",
4 "@type": "Organization",
5 "name": "Example Inc.",
6 "url": "https://www.example.com"
7}
8</script>- JavaScript 이외의 스크립트도
<script>태그 내에서 지정할 수 있습니다. 예를 들어, JSON-LD와 같은 구조화된 데이터를 설명할 때type="application/ld+json"을 사용합니다. 여기서 JSON-LD는 웹 페이지의 데이터를 구조화하여 검색 엔진 및 다른 애플리케이션이 데이터를 더 깊이 이해할 수 있도록 하는 형식입니다.
<script> 태그 사용에 관한 주의 사항
- 스크립트 순서: 스크립트가 의존하는 라이브러리는 의존 스크립트보다 먼저 로드되어야 합니다. 예를 들어, jQuery를 사용하는 스크립트는 jQuery가 로드된 후에 로드되어야 합니다.
- 성능 최적화: 페이지 로드 속도에 영향을 주지 않기 위해 필요한 경우에만 스크립트를 로드하고 불필요한 스크립트 실행을 피하세요.
- 보안 조치: 외부 스크립트를 사용할 때 신뢰할 수 있는 출처에서 로드되도록 하여 악성 스크립트 삽입을 방지하세요.
<base> 태그
1<base href="https://example.com/"><base>태그는 문서 내의 모든 상대 URL에 대한 기본 URL을 설정합니다.href속성에 지정된 URL은 링크와 이미지의 상대 경로에 대한 기준이 됩니다. 일반적으로 페이지당 한 번만 사용됩니다.
<noscript> 태그
1<noscript>Your browser does not support JavaScript!</noscript><noscript>태그는 브라우저에서 JavaScript가 비활성화된 경우 표시되는 콘텐츠를 정의합니다. JavaScript가 지원되지 않는 환경에 대체 콘텐츠를 제공하기 위해 사용됩니다.
위의 기사를 보면서 Visual Studio Code를 사용해 우리 유튜브 채널에서 함께 따라할 수 있습니다. 유튜브 채널도 확인해 주세요.