# Terrarium Project Part 1: Introduction to HTML
```mermaid
journey
title 당신의 HTML 학습 여정
section 기초
Create HTML file: 3: Student
Add DOCTYPE: 4: Student
Structure document: 5: Student
section 콘텐츠
Add metadata: 4: Student
Include images: 5: Student
Organize layout: 5: Student
section 의미론
Use proper tags: 4: Student
Enhance accessibility: 5: Student
Build terrarium: 5: Student
```
> 스케치노트 작성자 [Tomomi Imura](https://twitter.com/girlie_mac)
HTML 또는 하이퍼텍스트 마크업 언어는 여러분이 방문한 모든 웹사이트의 기반입니다. HTML을 웹 페이지에 구조를 부여하는 골격으로 생각해보세요. 어떤 콘텐츠가 어디에 배치되고, 어떻게 조직되며, 각 부분이 무엇을 의미하는지 정의합니다. CSS는 나중에 HTML에 색상과 레이아웃을 입히고, JavaScript는 상호작용을 통해 생명을 불어넣지만, HTML은 모든 것을 가능하게 하는 필수적인 구조를 제공합니다.
이번 수업에서는 가상 테라리움 인터페이스를 위한 HTML 구조를 만들어 봅니다. 이 실습 프로젝트는 시각적으로 흥미로운 것을 만드는 동시에 기본적인 HTML 개념을 배울 수 있게 해줍니다. 시맨틱 요소를 사용해 콘텐츠를 조직하는 방법, 이미지 작업, 그리고 인터랙티브 웹 애플리케이션의 기초를 만드는 법을 배우게 됩니다.
수업이 끝나면 식물 이미지가 정돈된 열에 표시된 작동하는 HTML 페이지가 완성되어 다음 수업에서 스타일링할 준비가 됩니다. 처음에는 단순해 보여도 걱정하지 마세요. CSS가 시각적 다듬기를 하기 전 HTML이 해야 할 역할이 바로 그것입니다.
```mermaid
mindmap
root((HTML 기본))
Structure
DOCTYPE 선언
HTML 요소
헤드 섹션
본문 내용
Elements
태그 & 속성
셀프 클로징 태그
중첩 요소
블록 vs 인라인
Content
텍스트 요소
이미지
컨테이너 (div)
목록
Semantics
의미 있는 태그
접근성
스크린 리더
SEO 이점
Best Practices
올바른 중첩
유효한 마크업
설명적 대체 텍스트
체계적인 구조
```
## 수업 전 퀴즈
[수업 전 퀴즈](https://ff-quizzes.netlify.app/web/quiz/15)
> 📺 **보고 배우기**: 도움이 되는 개요 영상 확인하기
>
> [](https://www.youtube.com/watch?v=1TvxJKBzhyQ)
## 프로젝트 설정하기
HTML 코드를 작성하기 전에 테라리움 프로젝트를 위한 적절한 작업 공간을 설정합시다. 처음부터 체계적인 파일 구조를 만드는 것은 웹 개발 여정 내내 큰 도움이 되는 중요한 습관입니다.
### 과제: 프로젝트 구조 만들기
테라리움 프로젝트 전용 폴더를 만들고 첫 번째 HTML 파일을 추가합니다. 두 가지 방법이 있습니다:
**옵션 1: Visual Studio Code 사용하기**
1. Visual Studio Code를 엽니다.
2. "파일" → "폴더 열기"를 클릭하거나 `Ctrl+K, Ctrl+O` (Windows/Linux), `Cmd+K, Cmd+O` (Mac)을 사용합니다.
3. `terrarium`이라는 새 폴더를 만들고 선택합니다.
4. 탐색기 창에서 "새 파일" 아이콘을 클릭합니다.
5. 파일명을 `index.html`로 지정합니다.
**옵션 2: 터미널 명령어 사용하기**
```bash
mkdir terrarium
cd terrarium
touch index.html
code index.html
```
**이 명령어들이 하는 일:**
- **`terrarium`** 이라는 새 디렉토리를 생성합니다.
- terrarium 디렉토리로 이동합니다.
- 빈 `index.html` 파일을 생성합니다.
- Visual Studio Code에서 파일을 열어 편집합니다.
> 💡 **전문가 팁**: `index.html` 파일명은 웹 개발에서 특별한 의미가 있습니다. 누군가 웹사이트를 방문하면 브라우저는 기본 페이지로 자동으로 `index.html` 파일을 찾습니다. 따라서 `https://mysite.com/projects/` 같은 URL에서는 파일명을 명시하지 않아도 `projects` 폴더 내 `index.html` 파일을 불러옵니다.
## HTML 문서 구조 이해하기
모든 HTML 문서는 브라우저가 올바르게 이해하고 표시할 수 있도록 특정 구조를 따릅니다. 이 구조는 정중한 편지처럼 – 특정 순서의 필수 요소들을 가지며, 웹 페이지 내용을 제대로 처리하도록 돕습니다.
```mermaid
flowchart TD
A[""] --> B[""]
B --> C[""]
C --> D[""]
C --> E["<meta charset>"]
C --> F["<meta viewport>"]
B --> G["<body>"]
G --> H["<h1> 제목"]
G --> I["<div> 컨테이너"]
G --> J["<img> 이미지"]
style A fill:#e1f5fe
style B fill:#f3e5f5
style C fill:#fff3e0
style G fill:#e8f5e8
```
먼저 모든 HTML 문서가 필요로 하는 기본 뼈대를 추가합시다.
### DOCTYPE 선언과 루트 요소
모든 HTML 파일의 첫 두 줄은 문서를 브라우저에 소개하는 역할을 합니다:
```html
<!DOCTYPE html>
<html></html>
```
**이 코드가 하는 일 설명:**
- `<!DOCTYPE html>`을 사용해 문서 타입을 HTML5로 선언합니다.
- 모든 페이지 내용을 담을 루트 `<html>` 요소를 만듭니다.
- 적절한 브라우저 렌더링을 위한 최신 웹 표준을 설정합니다.
- 다양한 브라우저와 기기에서 일관된 표시를 보장합니다.
> 💡 **VS Code 팁**: VS Code에서 HTML 태그 위에 마우스를 올리면 MDN 웹 문서의 유용한 정보, 사용 예시, 브라우저 호환성 등을 확인할 수 있습니다.
> 📚 **더 알아보기**: DOCTYPE 선언은 브라우저가 "퀄크 모드"로 들어가는 것을 방지합니다. 퀄크 모드는 매우 오래된 웹사이트를 지원하기 위해 사용되었습니다. 현대 웹 개발은 간단한 `<!DOCTYPE html>` 선언을 사용하여 [표준 준수 렌더링](https://developer.mozilla.org/docs/Web/HTML/Quirks_Mode_and_Standards_Mode)을 보장합니다.
### 🔄 **교육적 점검**
**잠시 멈추고 생각하기**: 계속하기 전에 다음을 이해했는지 확인하세요.
- ✅ 왜 모든 HTML 문서에 DOCTYPE 선언이 필요한지
- ✅ `<html>` 루트 요소가 무엇을 포함하는지
- ✅ 이 구조가 브라우저가 페이지를 올바르게 렌더링하는 데 어떻게 도움이 되는지
**간단한 자기 점검**: "표준 준수 렌더링"이 무엇인지 자신의 말로 설명할 수 있나요?
## 필수 문서 메타데이터 추가하기
HTML 문서의 `<head>` 섹션은 방문자가 페이지에서 직접 보지 않는, 브라우저와 검색 엔진에 필요한 중요한 정보를 담고 있습니다. 웹페이지가 제대로 작동하고 다양한 기기 및 플랫폼에서 정확히 보일 수 있게 돕는 '무대 뒤' 정보라고 생각하세요.
이 메타데이터는 브라우저에 페이지를 어떻게 표시할지, 어떤 문자 인코딩을 사용할지, 다른 화면 크기를 어떻게 처리할지를 알려줍니다. 이는 전문적이고 접근 가능한 웹 페이지를 만드는 데 꼭 필요합니다.
### 과제: 문서 헤드 추가하기
여는 `<html>` 태그와 닫는 `</html>` 태그 사이에 아래 `<head>` 섹션을 넣으세요:
```html
<head>
<title>Welcome to my Virtual Terrarium
```
**각 요소가 하는 일을 세분화해서 설명:**
- 브라우저 탭과 검색 결과에 표시되는 페이지 제목을 설정합니다.
- 전 세계에서 텍스트가 제대로 보이도록 UTF-8 문자 인코딩을 지정합니다.
- 최신 버전의 인터넷 익스플로러와 호환을 보장합니다.
- 뷰포트를 기기 너비에 맞춰 반응형 디자인을 설정합니다.
- 초기 확대 배율을 설정해서 내용을 자연스러운 크기로 표시합니다.
> 🤔 **생각해 보세요**: ``와 같은 뷰포트 메타 태그를 설정하면 무슨 일이 벌어질까요? 페이지가 항상 600픽셀 너비로 고정되어 반응형 디자인이 무너지게 됩니다! [올바른 뷰포트 설정](https://developer.mozilla.org/docs/Web/HTML/Viewport_meta_tag)을 더 알아보세요.
## 문서 본문 구성하기
`` 요소는 웹페이지에서 사용자가 보고 상호작용할 수 있는 모든 콘텐츠를 담고 있습니다. ``는 브라우저에 지시를 내리는 역할을 했지만, ``는 실제 내용인 텍스트, 이미지, 버튼 등 사용자 인터페이스를 구성하는 요소를 포함합니다.
본문 구조를 추가하고 HTML 태그가 어떻게 함께 작동하는지 이해해봅시다.
### HTML 태그 구조 이해하기
HTML은 대부분 쌍으로 짝지어진 태그를 사용하여 요소를 정의합니다. 예를 들어, `
`로 열고 `
`로 닫으며 그 사이에 콘텐츠가 들어갑니다: `
Hello, world!
`. 이 코드는 "Hello, world!"라는 텍스트를 포함하는 문단 요소를 만듭니다.
### 과제: Body 요소 추가하기
HTML 파일을 업데이트하여 `` 요소를 포함하세요:
```html
Welcome to my Virtual Terrarium
```
**완전한 구조가 제공하는 것:**
- 기본 HTML5 문서 틀을 만듭니다.
- 올바른 브라우저 렌더링을 위한 필수 메타데이터를 포함합니다.
- 보이는 콘텐츠를 위한 빈 본문을 생성합니다.
- 현대 웹 개발 우수 사례를 따릅니다.
이제 테라리움에 보이는 요소를 추가할 준비가 됐습니다. `
` 요소를 컨테이너로 사용해 콘텐츠의 여러 섹션을 조직하고, `` 요소로 식물 이미지를 표시할 것입니다.
### 이미지와 레이아웃 컨테이너 다루기
HTML에서 이미지는 특별하게 “셀프 클로징(self-closing)” 태그를 사용합니다. 콘텐츠를 감싸는 `` 같은 태그와 달리 `` 태그는 이미지 파일 경로를 지정하는 `src` 속성과 접근성을 위한 `alt` 속성 등 필요한 정보를 태그 내에 모두 포함합니다.
HTML에 이미지를 추가하기 전에 프로젝트 파일을 적절히 정리해야 합니다. images 폴더를 만들고 식물 그래픽을 추가합시다.
**먼저 이미지 준비하기:**
1. 테라리움 프로젝트 폴더 안에 `images`라는 폴더를 만듭니다.
2. [솔루션 폴더](../../../../3-terrarium/solution/images)에서 식물 이미지를 모두 다운로드합니다 (총 14개 식물 이미지).
3. 모든 식물 이미지를 새로 만든 `images` 폴더에 복사합니다.
### 과제: 식물 표시 레이아웃 만들기
이제 `` 태그 사이에 두 개의 열로 구성된 식물 이미지들을 추가하세요:
```html
```
**이 코드에서 단계별로 일어나는 일:**
- 모든 콘텐츠를 담는 메인 페이지 컨테이너 `id="page"`를 만듭니다.
- 왼쪽과 오른쪽 두 개의 열 컨테이너 `left-container`와 `right-container`를 설정합니다.
- 왼쪽 열에 7개, 오른쪽 열에 7개의 식물을 배치합니다.
- 각 식물 이미지를 개별 위치 지정을 위한 `plant-holder` div로 감쌉니다.
- 다음 수업에서 CSS 스타일링을 위한 일관된 클래스 이름을 적용합니다.
- 나중에 JavaScript 상호작용을 위해 각 식물 이미지에 고유 ID를 부여합니다.
- 이미지 폴더를 가리키는 올바른 파일 경로를 포함합니다.
> 🤔 **생각해 보세요**: 현재 모든 이미지가 같은 alt 텍스트 "plant"를 가지고 있는데, 접근성 측면에서 이상적이지 않습니다. 화면 읽기 사용자는 14번 "plant"라는 단어를 듣고 어떤 식물을 가리키는지 알 수 없습니다. 각 이미지에 대해 더 나은, 구체적인 alt 텍스트는 무엇일까요?
> 📝 **HTML 요소 유형**: `
` 요소는 ‘블록 레벨’로서 전체 너비를 차지하며, `` 요소는 ‘인라인’으로 필요한 너비만 차지합니다. 만약 이 모든 `
`를 ``으로 바꾼다면 어떤 일이 발생할까요?
### 🔄 **교육적 점검**
**구조 이해하기**: HTML 구조를 잠시 검토하세요:
- ✅ 레이아웃의 주요 컨테이너를 확인할 수 있나요?
- ✅ 각 이미지에 고유 ID가 있는 이유를 이해하나요?
- ✅ `plant-holder` div의 목적을 어떻게 설명하겠나요?
**시각 검사**: HTML 파일을 브라우저에서 열어보세요. 다음이 보여야 합니다:
- 기본 식물 이미지 목록
- 두 열로 정돈된 이미지들
- 단순하고 스타일링되지 않은 레이아웃
**기억하세요**: 이런 평범한 모습이 CSS 스타일링 전 HTML이 보여야 할 정확한 모습입니다!
이 마크업이 추가되면 식물이 화면에 나타나지만 아직 다듬어진 모습은 아닙니다 – 그 역할은 다음 수업의 CSS가 담당합니다! 지금은 콘텐츠를 적절히 조직하고 접근성 모범 사례를 따른 견고한 HTML 기초가 마련된 상태입니다.
## 접근성을 위한 시맨틱 HTML 사용
시맨틱 HTML은 외형뿐 아니라 의미와 목적에 따라 HTML 요소를 선택하는 것입니다. 시맨틱 마크업을 사용하면 웹 브라우저, 검색 엔진, 그리고 스크린 리더 같은 보조 기술에 콘텐츠의 구조와 의미를 전달하게 됩니다.
```mermaid
flowchart TD
A[콘텐츠를 추가해야 하나요?] --> B{어떤 유형인가요?}
B -->|메인 제목| C["
