13 KiB

Raw Permalink Blame History

테라리움 프로젝트 1부: HTML 소개

스케치노트: Tomomi Imura

강의 전 퀴즈

비디오를 확인하세요

소개

HTML(HyperText Markup Language)은 웹의 '뼈대'입니다. CSS가 HTML을 '꾸미고', JavaScript가 생명을 불어넣는다면, HTML은 웹 애플리케이션의 몸체입니다. HTML의 문법은 이러한 아이디어를 반영하며, "head", "body", "footer" 태그를 포함합니다.

이번 강의에서는 HTML을 사용하여 가상 테라리움 인터페이스의 '뼈대'를 구성할 것입니다. 인터페이스에는 제목과 세 개의 열이 포함됩니다: 드래그 가능한 식물이 있는 왼쪽과 오른쪽 열, 그리고 실제 유리처럼 보이는 테라리움이 될 중앙 영역입니다. 강의를 마치면 열에 식물이 표시되지만 인터페이스가 조금 이상해 보일 수 있습니다. 걱정하지 마세요, 다음 섹션에서 CSS 스타일을 추가하여 인터페이스를 더 보기 좋게 만들 것입니다.

과제

컴퓨터에서 'terrarium'이라는 폴더를 만들고 그 안에 'index.html'이라는 파일을 생성하세요. Visual Studio Code에서 테라리움 폴더를 만든 후 새 VS Code 창을 열고 '폴더 열기'를 클릭하여 새 폴더로 이동합니다. 탐색기 창에서 작은 '파일' 버튼을 클릭하여 새 파일을 만드세요:

또는

Git Bash에서 다음 명령을 사용하세요:

mkdir terrarium
cd terrarium
touch index.html
code index.html 또는 nano index.html

index.html 파일은 브라우저에 폴더의 기본 파일임을 나타냅니다. 예를 들어, https://anysite.com/test와 같은 URL은 test라는 폴더와 그 안에 있는 index.html 파일을 포함하는 폴더 구조를 기반으로 할 수 있습니다. URL에 index.html이 표시되지 않아도 됩니다.

DocType과 html 태그

HTML 파일의 첫 번째 줄은 doctype입니다. 파일 맨 위에 이 줄을 추가해야 한다는 점이 다소 놀라울 수 있지만, 이는 오래된 브라우저에 현재 HTML 사양을 따라 페이지를 표준 모드로 렌더링해야 한다고 알려줍니다.

팁: VS Code에서 태그 위에 마우스를 올리면 MDN 참조 가이드에서 해당 태그의 사용에 대한 정보를 얻을 수 있습니다.

두 번째 줄은 <html> 태그의 시작 태그와 지금은 닫는 태그 </html>로 구성되어야 합니다. 이 태그들은 인터페이스의 루트 요소입니다.

과제

index.html 파일 맨 위에 다음 줄을 추가하세요:

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

✅ DocType을 쿼리 문자열로 설정하여 결정할 수 있는 몇 가지 다른 모드가 있습니다: Quirks Mode와 Standards Mode. 이러한 모드는 현재는 거의 사용되지 않는 오래된 브라우저(예: Netscape Navigator 4 및 Internet Explorer 5)를 지원하기 위해 존재합니다. 표준 doctype 선언을 사용하는 것이 좋습니다.

문서의 'head'

HTML 문서의 'head' 영역에는 웹 페이지에 대한 중요한 정보, 즉 메타데이터가 포함됩니다. 우리의 경우, 이 페이지가 렌더링될 웹 서버에 다음 네 가지를 전달합니다:

페이지 제목
페이지 메타데이터, 포함:
- 페이지에서 사용되는 문자 인코딩을 나타내는 'character set'
- 브라우저 정보, x-ua-compatible을 포함하여 IE=edge 브라우저가 지원됨을 나타냄
- 페이지가 로드될 때 뷰포트가 어떻게 동작해야 하는지에 대한 정보. 뷰포트를 초기 스케일 1로 설정하면 페이지가 처음 로드될 때의 줌 수준을 제어합니다.

과제

열고 닫는 <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>

✅ <meta name="viewport" content="width=600">와 같이 뷰포트 메타 태그를 설정하면 어떤 일이 발생할까요? 뷰포트에 대해 더 읽어보세요.

문서의 `body`

HTML 태그

HTML에서는 .html 파일에 태그를 추가하여 웹 페이지의 요소를 만듭니다. 각 태그는 일반적으로 <p>hello</p>와 같이 열고 닫는 태그를 가집니다. <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>

이제 페이지를 구성하기 시작할 수 있습니다. 일반적으로 <div> 태그를 사용하여 페이지의 개별 요소를 만듭니다. 우리는 이미지를 포함할 <div> 요소를 여러 개 생성할 것입니다.

이미지

닫는 태그가 필요 없는 HTML 태그 중 하나는 <img> 태그입니다. 이 태그는 src 요소를 포함하여 페이지가 항목을 렌더링하는 데 필요한 모든 정보를 제공합니다.

앱에 images라는 폴더를 만들고 그 안에 소스 코드 폴더에 있는 모든 이미지를 추가하세요. (식물 이미지 14개가 있습니다.)

과제

<body></body> 태그 사이에 두 열로 식물 이미지를 추가하세요:

<div id="page">
	<div id="left-container" class="container">
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
		</div>
	</div>
	<div id="right-container" class="container">
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
		</div>
		<div class="plant-holder">
			<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
		</div>
	</div>
</div>

참고: Spans vs. Divs. Divs는 '블록' 요소로 간주되고 Spans는 '인라인' 요소입니다. 이 div를 span으로 변환하면 어떻게 될까요?

이 마크업으로 식물이 화면에 표시됩니다. 아직 CSS로 스타일링되지 않았기 때문에 보기 좋지 않지만, 다음 강의에서 스타일을 추가할 것입니다.

각 이미지에는 이미지가 보이지 않거나 렌더링되지 않을 경우에도 나타나는 alt 텍스트가 있습니다. 이는 접근성을 위해 포함해야 하는 중요한 속성입니다. 접근성에 대해 더 배우려면 이후 강의를 참고하세요. 지금은 alt 속성이 느린 연결, src 속성의 오류, 또는 화면 판독기를 사용하는 경우와 같은 이유로 사용자가 이미지를 볼 수 없을 때 대체 정보를 제공한다는 점을 기억하세요.

✅ 각 이미지에 동일한 alt 태그가 있다는 것을 눈치챘나요? 이것이 좋은 관행일까요? 왜 그렇지 않을까요? 이 코드를 개선할 수 있을까요?

의미론적 마크업

일반적으로 HTML을 작성할 때 의미 있는 '의미론'을 사용하는 것이 좋습니다. 이것이 무엇을 의미할까요? 이는 데이터 또는 상호작용 유형을 나타내도록 설계된 HTML 태그를 사용하는 것을 의미합니다. 예를 들어, 페이지의 주요 제목 텍스트는 <h1> 태그를 사용해야 합니다.

열리는 <body> 태그 바로 아래에 다음 줄을 추가하세요:

<h1>My Terrarium</h1>

헤더를 <h1>로, 순서 없는 목록을 <ul>로 렌더링하는 것과 같은 의미론적 마크업을 사용하면 화면 판독기가 페이지를 탐색하는 데 도움이 됩니다. 일반적으로 버튼은 <button>으로 작성되어야 하고 목록은 <li>로 작성되어야 합니다. 클릭 핸들러가 있는 특별히 스타일링된 <span> 요소를 사용하여 버튼을 모방하는 것이 _가능_하지만, 비활성 사용자가 페이지에서 버튼이 어디에 있는지 확인하고 상호작용할 수 있도록 기술을 사용하는 것이 더 좋습니다. 이러한 이유로 가능한 한 의미론적 마크업을 사용하도록 노력하세요.

✅ 화면 판독기가 웹 페이지와 상호작용하는 방식을 살펴보세요. 의미론적 마크업이 없으면 사용자가 왜 좌절할 수 있는지 알 수 있나요?

테라리움

인터페이스의 마지막 부분은 스타일링되어 테라리움을 생성할 마크업을 추가하는 것입니다.

과제:

마지막 </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>

✅ 화면에 이 마크업을 추가했지만 아무것도 렌더링되지 않는 이유는 무엇일까요?

🚀도전

HTML에는 여전히 재미있게 사용할 수 있는 '오래된' 태그들이 있지만, 이 태그들과 같은 사용 중단된 태그는 마크업에서 사용하지 않는 것이 좋습니다. 그래도 <marquee> 태그를 사용하여 h1 제목을 수평으로 스크롤하도록 만들 수 있나요? (만약 사용했다면 나중에 제거하는 것을 잊지 마세요)

강의 후 퀴즈

복습 및 자기 학습

HTML은 웹을 오늘날의 모습으로 발전시킨 '검증된' 빌딩 블록 시스템입니다. 오래된 태그와 새로운 태그를 공부하며 그 역사를 조금 배워보세요. 어떤 태그가 사용 중단되었고 어떤 태그가 추가되었는지 알아낼 수 있나요? 미래에는 어떤 태그가 도입될까요?

웹 및 모바일 장치를 위한 사이트 구축에 대해 더 알아보세요: Microsoft Learn.

과제

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

면책 조항:
이 문서는 AI 번역 서비스 Co-op Translator를 사용하여 번역되었습니다. 정확성을 위해 최선을 다하고 있으나, 자동 번역에는 오류나 부정확성이 포함될 수 있습니다. 원본 문서의 원어 버전을 신뢰할 수 있는 권위 있는 자료로 간주해야 합니다. 중요한 정보의 경우, 전문적인 인간 번역을 권장합니다. 이 번역 사용으로 인해 발생하는 오해나 잘못된 해석에 대해 책임을 지지 않습니다.

13 KiB Raw Permalink Blame History