HTML 및 CSS에서 머리 부분의 기초

HTML 문서의 머리 영역은 웹사이트의 구조와 기능에 필수적입니다. 이 튜토리얼에서는 머리 영역에 무엇이 숨겨져 있는지, 그리고 이를 효과적으로 활용하는 방법을 배웁니다. 메타 정보, 제목, 문자 인코딩, 스타일시트 및 스크립트를 링크하는 방법을 다룹니다.

주요 발견 사항

• 머리 영역()은 가시적 콘텐츠가 아닌 메타 정보를 포함합니다.
• Title 태그는 브라우저 주소 표시줄에 표시될 제목을 정의합니다.
• Charset 태그와 같은 메타 태그는 문자 인코딩에 중요합니다.
• 스타일시트와 스크립트는 머리 영역에 링크할 수 있습니다.

단계별 안내

1. 머리 영역 자체

HTML 문서의 머리 영역은 태그로 시작되고 태그로 닫힙니다. 이 영역은 헤더에 속하는 메뉴 바나 로고와 혼동되어서는 안 됩니다. 머리 영역은 문서에 대한 메타 정보를 제공하는 데만 사용됩니다.

2. Title 태그

머리 영역 내에서 <title> 태그로 웹사이트의 제목을 정의합니다. 이 제목은 브라우저 주소 표시줄에 나타나며, 사용자와 검색 엔진에 필수적입니다. 예를 들어 "내 테스트 제목"을 사용할 수 있습니다.</p>

3. 메타 태그

머리 영역의 중심 요소는 이른바 메타 태그입니다. Charset 태그는 특히 중요합니다. 모든 문자가 올바르게 나타나도록 하려면 국제 문자 인코딩에 UTF-8을 지정하십시오.

4. 메타 Charset 태그

메타 Charset 태그는 다음과 같이 작성됩니다: . 이는 국제 문자 세트를 지원하는 일반적인 표준입니다. 다른 태그와는 달리, 메타 태그는 그 사이에 내용이 없기 때문에 닫는 태그가 없습니다.

5. HTML 태그의 속성

HTML에서는 속성도 사용할 수 있습니다. 이는 태그 자체에 지정되며 공백으로 구분됩니다. Charset 태그에는 charset 속성이 있으며, 값은 "UTF-8"이 할당됩니다.

6. 메타 설명

또 다른 중요한 메타 태그는 메타 설명으로 로 정의됩니다. 이 설명은 검색 엔진에서 페이지가 발견될 때 자주 표시되므로 SEO에 중요합니다.

7. 추가 메타 태그

이전 메타 태그 외에도 로봇 태그(검색 엔진에 대한 지침 제공)와 반응형 디자인에 사용되는 뷰포트 태그 등 많은 다른 태그가 있습니다. 하지만 이것들은 추가적인 측면으로 기본을 넘어섭니다.

8. 스타일시트 링크하기

머리 영역에서 스타일시트도 링크할 수 있습니다. 이는 태그를 사용하여 수행됩니다. 이를 통해 외부 CSS 파일이 HTML 문서에 로드되어 일관된 디자인을 만듭니다.

9. 스크립트 링크하기

웹사이트에서 JavaScript를 사용하려면 머리 영역에서 스크립트를 포함할 수 있습니다. 이는 태그를 사용하여 수행됩니다. 이를 통해 사용자 경험을 향상시키는 함수와 로직을 페이지에 추가할 수 있습니다.

10. 머리 영역과 그 기능

결론적으로, 머리 영역은 가시적 콘텐츠가 아닌 메타 정보와 링크의 장소입니다. 웹사이트의 실제 내용은 -태그에 삽입됩니다. 이는 웹사이트의 구조와 성능에 중요합니다.

요약 - HTML, CSS 및 JavaScript의 머리 영역 및 메타 정보

머리 영역은 웹사이트에 대한 기본 정보 및 설정을 정의하는 데 매우 중요합니다. 이 안내서에서 제목, 문자 인코딩, 스타일시트 및 스크립트를 효과적으로 통합하는 방법을 배웠습니다.