History

localizeflow[bot] cc9b7563f4 chore(i18n): sync translations with latest source changes (chunk 1/1, 291 changes)		7 months ago
..
README.md	chore(i18n): sync translations with latest source changes (chunk 1/1, 291 changes)	7 months ago
assignment.md	chore(i18n): sync translations with latest source changes (chunk 1/1, 291 changes)	7 months ago

README.md

Unescape Escape

Terrarium Project Part 1: Introduction to HTML

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

HTML 또는 하이퍼텍스트 마크업 언어는 여러분이 방문한 모든 웹사이트의 기반입니다. HTML을 웹 페이지에 구조를 부여하는 골격으로 생각해보세요. 어떤 콘텐츠가 어디에 배치되고, 어떻게 조직되며, 각 부분이 무엇을 의미하는지 정의합니다. CSS는 나중에 HTML에 색상과 레이아웃을 입히고, JavaScript는 상호작용을 통해 생명을 불어넣지만, HTML은 모든 것을 가능하게 하는 필수적인 구조를 제공합니다.

이번 수업에서는 가상 테라리움 인터페이스를 위한 HTML 구조를 만들어 봅니다. 이 실습 프로젝트는 시각적으로 흥미로운 것을 만드는 동시에 기본적인 HTML 개념을 배울 수 있게 해줍니다. 시맨틱 요소를 사용해 콘텐츠를 조직하는 방법, 이미지 작업, 그리고 인터랙티브 웹 애플리케이션의 기초를 만드는 법을 배우게 됩니다.

수업이 끝나면 식물 이미지가 정돈된 열에 표시된 작동하는 HTML 페이지가 완성되어 다음 수업에서 스타일링할 준비가 됩니다. 처음에는 단순해 보여도 걱정하지 마세요. CSS가 시각적 다듬기를 하기 전 HTML이 해야 할 역할이 바로 그것입니다.

mindmap
  root((HTML 기본))
    Structure
      DOCTYPE 선언
      HTML 요소
      헤드 섹션
      본문 내용
    Elements
      태그 & 속성
      셀프 클로징 태그
      중첩 요소
      블록 vs 인라인
    Content
      텍스트 요소
      이미지
      컨테이너 (div)
      목록
    Semantics
      의미 있는 태그
      접근성
      스크린 리더
      SEO 이점
    Best Practices
      올바른 중첩
      유효한 마크업
      설명적 대체 텍스트
      체계적인 구조

수업 전 퀴즈

📺 보고 배우기: 도움이 되는 개요 영상 확인하기

프로젝트 설정하기

HTML 코드를 작성하기 전에 테라리움 프로젝트를 위한 적절한 작업 공간을 설정합시다. 처음부터 체계적인 파일 구조를 만드는 것은 웹 개발 여정 내내 큰 도움이 되는 중요한 습관입니다.

과제: 프로젝트 구조 만들기

테라리움 프로젝트 전용 폴더를 만들고 첫 번째 HTML 파일을 추가합니다. 두 가지 방법이 있습니다:

옵션 1: Visual Studio Code 사용하기

Visual Studio Code를 엽니다.
"파일" → "폴더 열기"를 클릭하거나 Ctrl+K, Ctrl+O (Windows/Linux), Cmd+K, Cmd+O (Mac)을 사용합니다.
terrarium이라는 새 폴더를 만들고 선택합니다.
탐색기 창에서 "새 파일" 아이콘을 클릭합니다.
파일명을 index.html로 지정합니다.

옵션 2: 터미널 명령어 사용하기

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 문서는 브라우저가 올바르게 이해하고 표시할 수 있도록 특정 구조를 따릅니다. 이 구조는 정중한 편지처럼 – 특정 순서의 필수 요소들을 가지며, 웹 페이지 내용을 제대로 처리하도록 돕습니다.

flowchart TD
    A["<!DOCTYPE html>"] --> B["<html>"]
    B --> C["<head>"]
    C --> D["<title>"]
    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 파일의 첫 두 줄은 문서를 브라우저에 소개하는 역할을 합니다:

<!DOCTYPE html>
<html></html>

이 코드가 하는 일 설명:

<!DOCTYPE html>을 사용해 문서 타입을 HTML5로 선언합니다.
모든 페이지 내용을 담을 루트 <html> 요소를 만듭니다.
적절한 브라우저 렌더링을 위한 최신 웹 표준을 설정합니다.
다양한 브라우저와 기기에서 일관된 표시를 보장합니다.

💡 VS Code 팁: VS Code에서 HTML 태그 위에 마우스를 올리면 MDN 웹 문서의 유용한 정보, 사용 예시, 브라우저 호환성 등을 확인할 수 있습니다.

📚 더 알아보기: DOCTYPE 선언은 브라우저가 "퀄크 모드"로 들어가는 것을 방지합니다. 퀄크 모드는 매우 오래된 웹사이트를 지원하기 위해 사용되었습니다. 현대 웹 개발은 간단한 <!DOCTYPE html> 선언을 사용하여 표준 준수 렌더링을 보장합니다.

🔄 교육적 점검

잠시 멈추고 생각하기: 계속하기 전에 다음을 이해했는지 확인하세요.

✅ 왜 모든 HTML 문서에 DOCTYPE 선언이 필요한지
✅ <html> 루트 요소가 무엇을 포함하는지
✅ 이 구조가 브라우저가 페이지를 올바르게 렌더링하는 데 어떻게 도움이 되는지

간단한 자기 점검: "표준 준수 렌더링"이 무엇인지 자신의 말로 설명할 수 있나요?

필수 문서 메타데이터 추가하기

HTML 문서의 <head> 섹션은 방문자가 페이지에서 직접 보지 않는, 브라우저와 검색 엔진에 필요한 중요한 정보를 담고 있습니다. 웹페이지가 제대로 작동하고 다양한 기기 및 플랫폼에서 정확히 보일 수 있게 돕는 '무대 뒤' 정보라고 생각하세요.

이 메타데이터는 브라우저에 페이지를 어떻게 표시할지, 어떤 문자 인코딩을 사용할지, 다른 화면 크기를 어떻게 처리할지를 알려줍니다. 이는 전문적이고 접근 가능한 웹 페이지를 만드는 데 꼭 필요합니다.

과제: 문서 헤드 추가하기

여는 <html> 태그와 닫는 </html> 태그 사이에 아래 <head> 섹션을 넣으세요:

<head>
	<title>Welcome to my Virtual Terrarium</title>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>

각 요소가 하는 일을 세분화해서 설명:

브라우저 탭과 검색 결과에 표시되는 페이지 제목을 설정합니다.
전 세계에서 텍스트가 제대로 보이도록 UTF-8 문자 인코딩을 지정합니다.
최신 버전의 인터넷 익스플로러와 호환을 보장합니다.
뷰포트를 기기 너비에 맞춰 반응형 디자인을 설정합니다.
초기 확대 배율을 설정해서 내용을 자연스러운 크기로 표시합니다.

🤔 생각해 보세요: <meta name="viewport" content="width=600">와 같은 뷰포트 메타 태그를 설정하면 무슨 일이 벌어질까요? 페이지가 항상 600픽셀 너비로 고정되어 반응형 디자인이 무너지게 됩니다! 올바른 뷰포트 설정을 더 알아보세요.

문서 본문 구성하기

<body> 요소는 웹페이지에서 사용자가 보고 상호작용할 수 있는 모든 콘텐츠를 담고 있습니다. <head>는 브라우저에 지시를 내리는 역할을 했지만, <body>는 실제 내용인 텍스트, 이미지, 버튼 등 사용자 인터페이스를 구성하는 요소를 포함합니다.

본문 구조를 추가하고 HTML 태그가 어떻게 함께 작동하는지 이해해봅시다.

HTML 태그 구조 이해하기

HTML은 대부분 쌍으로 짝지어진 태그를 사용하여 요소를 정의합니다. 예를 들어, <p>로 열고 </p>로 닫으며 그 사이에 콘텐츠가 들어갑니다: <p>Hello, world!</p>. 이 코드는 "Hello, world!"라는 텍스트를 포함하는 문단 요소를 만듭니다.

과제: Body 요소 추가하기

HTML 파일을 업데이트하여 <body> 요소를 포함하세요:

<!DOCTYPE html>
<html>
	<head>
		<title>Welcome to my Virtual Terrarium</title>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1" />
	</head>
	<body></body>
</html>

완전한 구조가 제공하는 것:

기본 HTML5 문서 틀을 만듭니다.
올바른 브라우저 렌더링을 위한 필수 메타데이터를 포함합니다.
보이는 콘텐츠를 위한 빈 본문을 생성합니다.
현대 웹 개발 우수 사례를 따릅니다.

이제 테라리움에 보이는 요소를 추가할 준비가 됐습니다. <div> 요소를 컨테이너로 사용해 콘텐츠의 여러 섹션을 조직하고, <img> 요소로 식물 이미지를 표시할 것입니다.

이미지와 레이아웃 컨테이너 다루기

HTML에서 이미지는 특별하게 “셀프 클로징(self-closing)” 태그를 사용합니다. 콘텐츠를 감싸는 <p></p> 같은 태그와 달리 <img> 태그는 이미지 파일 경로를 지정하는 src 속성과 접근성을 위한 alt 속성 등 필요한 정보를 태그 내에 모두 포함합니다.

HTML에 이미지를 추가하기 전에 프로젝트 파일을 적절히 정리해야 합니다. images 폴더를 만들고 식물 그래픽을 추가합시다.

먼저 이미지 준비하기:

테라리움 프로젝트 폴더 안에 images라는 폴더를 만듭니다.
솔루션 폴더에서 식물 이미지를 모두 다운로드합니다 (총 14개 식물 이미지).
모든 식물 이미지를 새로 만든 images 폴더에 복사합니다.

과제: 식물 표시 레이아웃 만들기

이제 <body></body> 태그 사이에 두 개의 열로 구성된 식물 이미지들을 추가하세요:

<div id="page">
	<div id="left-container" class="container">
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant1" src="../../../../translated_images/ko/plant1.d87946a2ca70cc43.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant2" src="../../../../translated_images/ko/plant2.8daa1606c9c1ad89.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant3" src="../../../../translated_images/ko/plant3.8b0d484381a2a2a7.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant4" src="../../../../translated_images/ko/plant4.656e16ae1df37be2.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant5" src="../../../../translated_images/ko/plant5.2b41b9355f11ebcc.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant6" src="../../../../translated_images/ko/plant6.3d1827d03b656994.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant7" src="../../../../translated_images/ko/plant7.8152c302ac97f621.png" />
		</div>
	</div>
	<div id="right-container" class="container">
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant8" src="../../../../translated_images/ko/plant8.38d6428174ffa850.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant9" src="../../../../translated_images/ko/plant9.f0e38d3327c37fc2.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant10" src="../../../../translated_images/ko/plant10.b159d6d6e985595f.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant11" src="../../../../translated_images/ko/plant11.2a03a1c2ec8ea84e.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant12" src="../../../../translated_images/ko/plant12.60e9b53e538fbaf3.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant13" src="../../../../translated_images/ko/plant13.07a51543c820bcf5.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant14" src="../../../../translated_images/ko/plant14.6e486371ba7d36ba.png" />
		</div>
	</div>
</div>

이 코드에서 단계별로 일어나는 일:

모든 콘텐츠를 담는 메인 페이지 컨테이너 id="page"를 만듭니다.
왼쪽과 오른쪽 두 개의 열 컨테이너 left-container와 right-container를 설정합니다.
왼쪽 열에 7개, 오른쪽 열에 7개의 식물을 배치합니다.
각 식물 이미지를 개별 위치 지정을 위한 plant-holder div로 감쌉니다.
다음 수업에서 CSS 스타일링을 위한 일관된 클래스 이름을 적용합니다.
나중에 JavaScript 상호작용을 위해 각 식물 이미지에 고유 ID를 부여합니다.
이미지 폴더를 가리키는 올바른 파일 경로를 포함합니다.

🤔 생각해 보세요: 현재 모든 이미지가 같은 alt 텍스트 "plant"를 가지고 있는데, 접근성 측면에서 이상적이지 않습니다. 화면 읽기 사용자는 14번 "plant"라는 단어를 듣고 어떤 식물을 가리키는지 알 수 없습니다. 각 이미지에 대해 더 나은, 구체적인 alt 텍스트는 무엇일까요?

📝 HTML 요소 유형: <div> 요소는 ‘블록 레벨’로서 전체 너비를 차지하며, <span> 요소는 ‘인라인’으로 필요한 너비만 차지합니다. 만약 이 모든 <div>를 <span>으로 바꾼다면 어떤 일이 발생할까요?

🔄 교육적 점검

구조 이해하기: HTML 구조를 잠시 검토하세요:

✅ 레이아웃의 주요 컨테이너를 확인할 수 있나요?
✅ 각 이미지에 고유 ID가 있는 이유를 이해하나요?
✅ plant-holder div의 목적을 어떻게 설명하겠나요?

시각 검사: HTML 파일을 브라우저에서 열어보세요. 다음이 보여야 합니다:

기본 식물 이미지 목록
두 열로 정돈된 이미지들
단순하고 스타일링되지 않은 레이아웃

기억하세요: 이런 평범한 모습이 CSS 스타일링 전 HTML이 보여야 할 정확한 모습입니다!

이 마크업이 추가되면 식물이 화면에 나타나지만 아직 다듬어진 모습은 아닙니다 – 그 역할은 다음 수업의 CSS가 담당합니다! 지금은 콘텐츠를 적절히 조직하고 접근성 모범 사례를 따른 견고한 HTML 기초가 마련된 상태입니다.

접근성을 위한 시맨틱 HTML 사용

시맨틱 HTML은 외형뿐 아니라 의미와 목적에 따라 HTML 요소를 선택하는 것입니다. 시맨틱 마크업을 사용하면 웹 브라우저, 검색 엔진, 그리고 스크린 리더 같은 보조 기술에 콘텐츠의 구조와 의미를 전달하게 됩니다.

flowchart TD
    A[콘텐츠를 추가해야 하나요?] --> B{어떤 유형인가요?}
    B -->|메인 제목| C["<h1>"]
    B -->|부제목| D["<h2>, <h3>, 등"]
    B -->|단락| E["<p>"]
    B -->|목록| F["<ul>, <ol>"]
    B -->|내비게이션| G["<nav>"]
    B -->|기사| H["<article>"]
    B -->|섹션| I["<section>"]
    B -->|일반 컨테이너| J["<div>"]
    
    C --> K[스크린 리더가 메인 제목으로 안내]
    D --> L[적절한 제목 계층 구조 생성]
    E --> M[적절한 텍스트 간격 제공]
    F --> N[목록 내비게이션 바로가기 활성화]
    G --> O[내비게이션 랜드마크 식별]
    H --> P[독립형 콘텐츠 표시]
    I --> Q[관련 콘텐츠 그룹화]
    J --> R[의미론적 태그가 없을 때만 사용]
    
    style C fill:#4caf50
    style D fill:#4caf50
    style E fill:#4caf50
    style F fill:#4caf50
    style G fill:#2196f3
    style H fill:#2196f3
    style I fill:#2196f3
    style J fill:#ff9800

이 방법은 장애가 있는 사용자에게 웹사이트 접근성을 높이고, 검색 엔진이 콘텐츠를 더 잘 이해하도록 돕습니다. 현대 웹 개발의 근간이 되는 원칙이며 모두에게 더 나은 경험을 만듭니다.

시맨틱 페이지 제목 추가하기

테라리움 페이지에 적절한 제목을 넣어 봅시다. 여는 <body> 태그 바로 다음 줄에 다음 코드를 삽입하세요:

<h1>My Terrarium</h1>

시맨틱 마크업이 중요한 이유:

스크린 리더가 페이지 구조를 쉽게 탐색하고 이해하게 돕습니다.
콘텐츠 계층을 명확히 하여 검색 엔진 최적화(SEO)를 향상시킵니다.
시각 장애인이나 인지 기능 차이가 있는 사용자도 접근성을 높입니다.
모든 기기와 플랫폼 전반에 걸쳐 더 좋은 사용자 경험을 제공합니다.
전문적인 개발을 위한 웹 표준과 최선의 실천법을 따릅니다.

시맨틱 vs 비시맨틱 선택 예시:

목적	✅ 시맨틱 선택	❌ 비시맨틱 선택
주요 제목	`<h1>Title</h1>`	`<div class="big-text">Title</div>`
내비게이션	`<nav><ul><li></li></ul></nav>`	`<div class="menu"><div></div></div>`
버튼	`<button>Click me</button>`	`<span onclick="...">Click me</span>`
기사 내용	`<article><p></p></article>`	`<div class="content"><div></div></div>`

🎥 실제 예제 보기: 웹 페이지에서 스크린 리더가 어떻게 작동하는지 영상을 시청하여 시맨틱 마크업이 접근성에 왜 중요한지 이해하세요. 적절한 HTML 구조가 사용자를 효율적으로 안내하는 방법을 확인할 수 있습니다.

테라리움 컨테이너 만들기

이제 테라리움 자체 – 식물을 담을 유리 용기 – 의 HTML 구조를 추가해 봅시다. 이 섹션은 중요한 개념을 보여줍니다: HTML은 구조를 제공하지만 CSS 스타일링 없이는 이 요소들이 눈에 보이지 않습니다.

테라리움 마크업은 다음 수업에서 CSS 스타일링을 직관적이고 유지보수 쉽게 만들기 위해 설명적인 클래스 이름을 사용합니다.

과제: 테라리움 구조 추가하기

마지막 </div> 태그 위(페이지 컨테이너 닫는 태그 바로 전에) 이 마크업을 삽입하세요:

<div id="terrarium">
	<div class="jar-top"></div>
	<div class="jar-walls">
		<div class="jar-glossy-long"></div>
		<div class="jar-glossy-short"></div>
	</div>
	<div class="dirt"></div>
	<div class="jar-bottom"></div>
</div>

이 테라리움 구조가 하는 일:

고유 ID를 가진 메인 테라리움 컨테이너를 생성합니다.
각 시각적 구성 요소(상단, 벽, 흙, 하단)에 대해 별도의 요소를 정의합니다
유리 반사 효과(광택 요소)를 위한 중첩 요소를 포함합니다
각 요소의 용도를 명확히 나타내는 설명적인 클래스 이름을 사용합니다
유리 테라리움 외관을 만들어낼 CSS 스타일링 구조를 준비합니다

🤔 뭔가 눈치채셨나요?: 이 마크업을 추가했는데 페이지에 새로 보이는 것은 없죠! 이것은 HTML이 구조를 제공하는 반면 CSS가 외관을 제공한다는 점을 완벽하게 보여줍니다. 이 <div> 요소들은 존재하지만 아직 시각적 스타일링이 없으며 – 다음 수업에서 스타일이 적용될 것입니다!

flowchart TD
    A[HTML 문서] --> B[문서 머리말]
    A --> C[문서 본문]
    B --> D[제목 요소]
    B --> E[메타 문자셋]
    B --> F[메타 뷰포트]
    C --> G[주요 제목]
    C --> H[페이지 컨테이너]
    H --> I[7개의 식물이 있는 왼쪽 컨테이너]
    H --> J[7개의 식물이 있는 오른쪽 컨테이너]
    H --> K[테라리움 구조]
    
    style A fill:#e1f5fe
    style B fill:#fff3e0
    style C fill:#e8f5e8
    style H fill:#f3e5f5

🔄 교육 점검

HTML 구조 숙달: 다음을 할 수 있는지 확인하세요:

✅ HTML 구조와 시각적 외관의 차이 설명하기
✅ 시맨틱과 비시맨틱 HTML 요소 구분하기
✅ 적절한 마크업이 접근성에 어떻게 도움이 되는지 설명하기
✅ 완전한 문서 트리 구조 인식하기

이해도 테스트: 자바스크립트가 비활성화되고 CSS가 제거된 상태로 브라우저에서 HTML 파일을 열어 보세요. 이것이 당신이 만든 순수 시맨틱 구조임을 보여줍니다!

GitHub Copilot 에이전트 챌린지

에이전트 모드를 사용하여 다음 챌린지를 완료하세요:

설명: 테라리움 프로젝트에 추가할 수 있는 식물 관리 가이드 섹션에 대한 시맨틱 HTML 구조를 만드세요.

요구 사항: "Plant Care Guide"라는 주요 제목과 각각 "Watering", "Light Requirements", "Soil Care"라는 부제목을 가진 세 개의 하위 섹션을 포함하는 시맨틱 HTML 섹션을 만드세요. 각 섹션에는 식물 관리 정보가 담긴 단락이 포함되어야 합니다. <section>, <h2>, <h3>, <p> 같은 적절한 시맨틱 HTML 태그를 사용해 내용을 구조화하세요.

여기에서 에이전트 모드에 대해 더 알아보세요.

HTML 역사 탐구 챌린지

웹 진화를 배우기

HTML은 1990년 팀 버너스리(Tim Berners-Lee)가 CERN에서 최초 웹 브라우저를 만든 이후 크게 발전해 왔습니다. <marquee> 같은 일부 오래된 태그는 접근성 기준이나 반응형 디자인과 잘 맞지 않아 현재는 더 이상 권장되지 않습니다.

실험해 보세요:

<h1> 제목을 일시적으로 <marquee> 태그로 감싸 보세요: <marquee><h1>My Terrarium</h1></marquee>
브라우저에서 페이지를 열어 스크롤 효과를 관찰하세요
이 태그가 왜 비권장되었는지 생각해 보세요 (힌트: 사용자 경험과 접근성을 고려하세요)
<marquee> 태그를 제거하고 시맨틱 마크업으로 복원하세요

반성 질문:

스크롤 제목이 시각 장애나 동작 민감성을 가진 사용자에게 어떤 영향을 미칠까요?
비슷한 시각 효과를 더 접근성 있게 구현할 수 있는 현대 CSS 기법은 무엇일까요?
왜 현재 웹 표준을 사용하고 비권장 요소를 피하는 것이 중요할까요?

여기에서 폐기되고 비권장된 HTML 요소에 대해 더 알아보고 웹 표준이 어떻게 사용자 경험 향상을 목표로 진화하는지 이해하세요.

강의 후 퀴즈

복습 및 자기주도 학습

HTML 지식 심화하기

HTML은 30년 넘게 웹의 기반이 되어 왔으며, 단순 문서 마크업 언어에서 상호작용 애플리케이션을 구축하는 정교한 플랫폼으로 발전했습니다. 이 진화를 이해하면 현대 웹 표준을 더욱 잘 이해하고 개발 결정을 더 효과적으로 내릴 수 있습니다.

추천 학습 경로:

HTML 역사와 진화
- HTML 1.0부터 HTML5까지의 타임라인 조사하기
- 특정 태그가 폐기된 이유 탐구(접근성, 모바일 친화성, 유지보수성)
- 새로운 HTML 기능과 제안 조사하기
시맨틱 HTML 심층 학습
- HTML5 시맨틱 요소 전체 목록 공부하기
- <article>, <section>, <aside>, <main>의 사용 시기 파악하기
- 접근성 향상을 위한 ARIA 속성 학습하기
현대 웹 개발
- Microsoft Learn에서 반응형 웹사이트 구축 배우기
- HTML, CSS, 자바스크립트 통합 방법 이해하기
- 웹 성능 및 SEO 최적화 방법 익히기

반성 질문:

어떤 폐기 태그를 발견했고, 왜 삭제되었나요?
앞으로 제안되고 있는 새 HTML 기능은 무엇인가요?
시맨틱 HTML이 웹 접근성과 SEO에 어떻게 기여하나요?

⚡ 다음 5분 내 할 수 있는 일

개발자 도구(F12) 열어 좋아하는 웹사이트의 HTML 구조 검사하기
기본 태그 <h1>, <p>, <img>를 사용한 간단한 HTML 파일 만들기
온라인 W3C HTML Validator로 HTML 검증하기
HTML에  사용해 주석 추가해보기

🎯 이번 시간에 할 수 있는 목표

강의 후 퀴즈 완료 및 시맨틱 HTML 개념 복습하기
적절한 HTML 구조를 사용해 나 자신에 관한 간단한 웹페이지 만들기
다양한 제목 레벨과 텍스트 서식 태그 실험하기
이미지와 링크 추가로 멀티미디어 통합 연습하기
아직 시도하지 않은 HTML5 기능 조사하기

📅 한 주간 HTML 여정

시맨틱 마크업을 활용해 테라리움 프로젝트 과제 완료하기
ARIA 레이블과 역할을 사용해 접근성 좋은 웹페이지 만들기
다양한 입력 유형을 활용한 폼 생성 연습하기
localStorage 또는 Geolocation 같은 HTML5 API 탐색하기
반응형 HTML 패턴과 모바일 퍼스트 디자인 공부하기
다른 개발자의 HTML 코드 검토하며 최선 사례 배우기

🌟 한 달간 웹 기본기 다지기

HTML 실력을 보여줄 포트폴리오 웹사이트 제작하기
Handlebars 같은 프레임워크로 HTML 템플릿 학습하기
HTML 문서화 개선으로 오픈소스 프로젝트에 기여하기
커스텀 요소 등 고급 HTML 개념 마스터하기
CSS 프레임워크 및 자바스크립트 라이브러리와 통합하기
HTML 기본기를 배우는 이들을 멘토링하기

🎯 당신의 HTML 숙련도 일정

timeline
    title HTML 학습 진행
    
    section 기초 (5분)
        문서 구조: DOCTYPE 선언
                 : HTML 최상위 요소
                 : Head와 Body 이해
        
    section 메타데이터 (10분)
        필수 메타 태그: 문자 인코딩
                       : 뷰포트 설정
                       : 브라우저 호환성
        
    section 콘텐츠 생성 (15분)
        이미지 통합: 올바른 파일 경로
                   : 대체 텍스트 중요성
                   : 셀프 클로징 태그
        
    section 레이아웃 구성 (20분)
        컨테이너 전략: 구조를 위한 Div 요소
                      : 클래스 및 ID 명명
                      : 중첩 요소 계층
        
    section 의미론 마스터 (30분)
        의미 있는 마크업: 제목 계층 구조
                         : 스크린 리더 내비게이션
                         : 접근성 모범 사례
        
    section 고급 개념 (1시간)
        HTML5 기능: 최신 의미론적 요소
                   : ARIA 속성
                   : 성능 고려사항
        
    section 전문 기술 (1주)
        코드 구성: 파일 구조 패턴
                 : 유지보수 가능한 마크업
                 : 팀 협업
        
    section 전문가 수준 (1개월)
        최신 웹 표준: 점진적 향상
                    : 크로스 브라우저 호환성
                    : HTML 사양 업데이트

🛠️ 당신의 HTML 도구 요약

이번 수업을 마치면 다음을 갖게 됩니다:

문서 구조: 적절한 DOCTYPE을 갖춘 완전한 HTML5 기반
시맨틱 마크업: 접근성과 SEO를 강화하는 의미 있는 태그
이미지 통합: 올바른 파일 구성 및 대체 텍스트 관행
레이아웃 컨테이너: 설명적인 클래스 이름을 가진 전략적 div 활용
접근성 인식: 스크린 리더 내비게이션 이해
현대 표준: 최신 HTML5 관행과 비권장 태그 지식
프로젝트 기반: CSS 스타일링과 JavaScript 상호작용 기초 탄탄하게 마련

다음 단계: 당신의 HTML 구조는 CSS 스타일링을 위한 준비가 완료되었습니다! 구축한 시맨틱 기초 덕분에 다음 수업을 훨씬 쉽게 이해할 수 있을 것입니다.

과제

HTML 연습하기: 블로그 목업 만들기

면책 조항:
이 문서는 AI 번역 서비스 Co-op Translator를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있으나, 자동 번역에는 오류나 부정확한 부분이 있을 수 있음을 양지해 주시기 바랍니다. 원문 문서는 권위 있는 출처로 간주되어야 합니다. 중요한 정보의 경우 전문 인력에 의한 번역을 권장합니다. 이 번역의 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 당사는 책임을 지지 않습니다.

README.md Unescape Escape

Terrarium Project Part 1: Introduction to HTML

수업 전 퀴즈

프로젝트 설정하기

과제: 프로젝트 구조 만들기

HTML 문서 구조 이해하기

DOCTYPE 선언과 루트 요소

🔄 교육적 점검

필수 문서 메타데이터 추가하기

과제: 문서 헤드 추가하기

문서 본문 구성하기

HTML 태그 구조 이해하기

과제: Body 요소 추가하기

이미지와 레이아웃 컨테이너 다루기

과제: 식물 표시 레이아웃 만들기

🔄 교육적 점검

접근성을 위한 시맨틱 HTML 사용

시맨틱 페이지 제목 추가하기

테라리움 컨테이너 만들기

과제: 테라리움 구조 추가하기

🔄 교육 점검

GitHub Copilot 에이전트 챌린지

HTML 역사 탐구 챌린지

강의 후 퀴즈

복습 및 자기주도 학습

⚡ 다음 5분 내 할 수 있는 일

🎯 이번 시간에 할 수 있는 목표

📅 한 주간 HTML 여정

🌟 한 달간 웹 기본기 다지기

🎯 당신의 HTML 숙련도 일정

🛠️ 당신의 HTML 도구 요약

과제

README.md

Unescape Escape