> For the complete documentation index, see [llms.txt](https://freeseamew.gitbook.io/svelte/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://freeseamew.gitbook.io/svelte/3./component.md).

# 컴포넌트 기본 : 레이아웃 샘플 구성(여러 component 연동)

컴포넌트에 대해서 설명드리도록 하겠습니다.

svelte에서 컴포넌트는 기본적으로 .svelte로 끝나는 파입니다.

이 컴포넌트는 다음 3가지 영역을 가질 수 있습니다.

* script
* style
* html

#### : 컴포넌트 구조

```
<script>
	export let name;
</script>

<main>
	<h1>Hello {name}!</h1>
	<p>Visit the <a href="<https://svelte.dev/tutorial>">Svelte tutorial</a> to learn how to build Svelte apps.</p>
</main>

<style>
	main {
		text-align: center;
		padding: 1em;
		max-width: 240px;
		margin: 0 auto;
	}

	h1 {
		color: #ff3e00;
		text-transform: uppercase;
		font-size: 4em;
		font-weight: 100;
	}

	@media (min-width: 640px) {
		main {
			max-width: none;
		}
	}
</style>
```

svelte를 포함한 대부분의 ui 프레임워크들은 컴포넌트라는 작은 단위의 영역을 만들고 그것을 필요에 따라 결합하는 식으로 결과물을 만들어 갑니다. 각각의 컴포넌트는 한번만 사용될 수 도 있고, 여러번 중복해서 사용되기도 합니다. 이것은 마치 블록 조립과 비슷하다고 생각하시면 됩니다.

* App.svelte

```
<script>
	import Header from './components/header.svelte'
	import Content from './components/content.svelte'
	import Bottom from './components/bottom.svelte'
</script>

<Header />
<Content />
<Bottom />
```

* header.svelte

```
<h1>Header Space</h1>
```

* content.svelte

```
<script>
import SubContent from './subContent.svelte'
</script>

<p>Content Space</p>
<SubContent /> 
<SubContent /> 
<SubContent /> 
```

* subContent.svelte

```
<span> sub content </span>
```

* bottom.svelte

```
<h2>Bottom Space</h2>
```

[\[만들면서 배우는 Svelte\]](https://www.inflearn.com/course/%EB%A7%8C%EB%93%A4%EB%A9%B4%EC%84%9C-%EB%B0%B0%EC%9A%B0%EB%8A%94-%EC%8A%A4%EB%B2%A8%ED%8A%B8)

<div align="left"><img src="https://2456181503-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MFoRG7N_kopXKHrUIam%2F-MGqndftNeXvP53tyaae%2F-MGqwZuQK1aEaE5Bp21i%2F%E1%84%86%E1%85%A1%E1%86%AB%E1%84%83%E1%85%B3%E1%86%AF%E1%84%86%E1%85%A7%E1%86%AB%E1%84%89%E1%85%A5%20%E1%84%87%E1%85%A2%E1%84%8B%E1%85%AE%E1%84%82%E1%85%B3%E1%86%AB%20svelte%20small.png?alt=media&amp;token=e769cba7-bb5e-40a9-89c6-2879e60242bf" alt="만들면서 배우는 svelte"></div>