Head 태그
Coddy HTML 여정의 Styling with CSS 섹션에 포함된 레슨 — 76개 중 4번째.
HTML에서 head 태그는 HTML 문서에 대한 메타데이터를 위한 컨테이너입니다. 메타데이터는 문서를 설명하는 데이터이지만 페이지 자체에는 표시되지 않습니다. head 요소는 <html> 태그와 <body> 태그 사이에 위치합니다.
head 태그는 다음과 같은 다양한 요소를 포함할 수 있습니다:
<title>: HTML 문서의 제목을 지정하며, 이는 브라우저의 제목 표시줄이나 탭에 표시됩니다.
<style>: 문서의 내부 CSS 스타일을 포함합니다.<link>: CSS 파일과 같은 외부 리소스에 연결합니다.
<meta>: 문서에 대한 메타데이터(예: 문자 집합, 설명, 키워드 등)를 제공합니다.<script>: JavaScript와 같은 클라이언트 측 스크립트를 포함합니다.
다음은 HTML 문서에서 head 태그가 어떻게 사용되는지에 대한 예시입니다:
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
<style>
body {
background-color: lightblue;
}
</style>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is a paragraph of text.</p>
</body>
</html>이 예제에서 head 태그는 페이지의 title과 일부 내부 CSS 스타일을 포함합니다. "My Web Page"라는 제목은 브라우저의 제목 표시줄에 표시되며, body의 배경색은 연한 파란색으로 설정됩니다.
챌린지
쉬움<head> 태그가 포함된 HTML 문서가 주어집니다. 그 안에 <style>를 추가하고, 그 내부에 다음 CSS 코드를 추가하세요:
body {
background-color: lightgreen;
}직접 해보기
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>Welcome!</h1>
</body>
</html>
실력 점검이 레슨에는 짧은 퀴즈가 포함되어 있습니다. 레슨을 시작해 문제를 풀고 진행 상황을 기록하세요.
