Angular의 레이아웃 파일

사이트 레이아웃은 src/index.html 파일에 위치합니다. 대략 다음과 같이 보일 것입니다:

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>title</title>
	<base href="/">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
	<app-root></app-root>
</body>
</html>

app-root 태그를 제외하고는, 여러분이 HTML을 배웠다면 이 파일의 모든 내용이 이해될 것입니다:

<body>
	<app-root></app-root>
</body>

이 태그는 HTML의 일부가 아닙니다. 이 태그는 Angular 자체가 추가합니다. 이 태그가 작성된 위치에 메인 컴포넌트의 HTML 코드가 삽입될 것입니다. 이에 대해서는 다음 강의에서 더 자세히 이야기하겠습니다.

사이트 레이아웃에서 페이지 제목을 변경하세요.

body 태그 안에 아무 텍스트나 작성해 보세요. 브라우저에 나타나는지 확인하세요.

헤더, 푸터, 사이드바 및 콘텐츠를 추가하세요. app-root 태그가 사이트 콘텐츠 영역에 위치하도록 하세요.