소개
이 랩에서는 웹 개발을 위한 강력하고 인기 있는 코드 편집기인 WebIDE (VS Code 와 유사) 를 사용하여 첫 번째 HTML 페이지를 만드는 방법을 배우게 됩니다.
이 포괄적인 튜토리얼은 WebIDE 구성, HTML5 보일러플레이트 템플릿 생성, 웹 페이지에 기본 콘텐츠 추가, 웹 브라우저에서 결과 미리 보기와 같은 주요 측면을 다룹니다. 단계별 지침을 따르면 웹 개발 기본 사항에 대한 실질적인 경험을 얻고, 대화형 및 구조화된 웹 페이지를 만드는 데 필요한 탄탄한 기반을 다질 수 있습니다.
새 HTML 파일 생성
LabEx WebIDE 는 코딩 작업을 위한 현대적이고 VS Code 와 유사한 개발 환경을 제공합니다. WebIDE 는 HTML, CSS 및 JavaScript 를 포함한 웹 개발 프로젝트에 적합합니다.
시작하려면 LabEx 인터페이스에서 "WebIDE" 탭을 클릭하여 WebIDE 를 엽니다. WebIDE 는 왼쪽에 파일 탐색기를, 오른쪽에 코드 편집기를 표시합니다. 하단에는 터미널 및 기타 도구도 있습니다.
- 파일 탐색기 (File Explorer): 파일을 생성, 편집 및 관리할 수 있는 프로젝트 디렉토리 구조를 표시합니다. 기본 작업 디렉토리는
~/project입니다. - 코드 편집기 (Code Editor): 코드를 작성하고 편집하기 위한 텍스트 편집기를 제공합니다. 새 파일을 생성하고, 기존 파일을 열고, 코드 변경 사항을 볼 수 있습니다.
- 터미널 (Terminal): 셸 명령 실행, 패키지 설치 및 파일 관리를 위한 명령줄 인터페이스를 제공합니다. 터미널에서 직접 명령을 실행할 수 있습니다. 기본 작업 디렉토리는
~/project입니다.
이 단계에서는 WebIDE 에서 새로운 HTML 파일을 만드는 방법을 배우게 됩니다. HTML (HyperText Markup Language) 은 웹 페이지를 만들기 위한 표준 마크업 언어입니다. 모든 웹 페이지는 HTML 파일로 시작합니다.
WebIDE 에서 새 HTML 파일을 만들려면 다음 단계를 따르세요.
- "File" 메뉴를 클릭합니다.
- "New File"을 선택합니다.
- 파일을
index.html이름으로 저장합니다.
또는, 키보드 단축키 Ctrl+N을 사용하여 새 파일을 만든 다음 index.html로 저장할 수 있습니다.
HTML 파일의 이름을 지정할 때 다음 중요한 규칙을 기억하세요.
- 소문자를 사용합니다.
.html파일 확장자를 사용합니다.- 파일 이름에 공백을 사용하지 마세요.
index.html,about.html등과 같이 설명적인 이름을 사용합니다.
터미널을 통해 파일이 생성되었는지 확인해 보겠습니다.
ls ~/project
예시 출력:
index.html
이제 다음 단계에서 HTML 콘텐츠를 추가할 준비가 되었습니다. .html 확장자는 웹 브라우저에 이것이 HTML 문서임을 알려줍니다.
터미널에 익숙하다면 다음 명령을 사용하여 파일을 만들 수도 있습니다.
touch ~/project/index2.html
Linux 명령어에 대해 자세히 알아보세요. 터미널 기술을 향상시킬 수 있습니다.
HTML5 보일러플레이트 템플릿 생성
이 단계에서는 WebIDE 에서 표준 HTML5 보일러플레이트 템플릿을 생성하는 방법을 배우게 됩니다. 보일러플레이트는 HTML 문서의 기본 구조를 제공하는 표준 템플릿입니다.
WebIDE 에서는 내장된 단축키를 사용하여 HTML5 템플릿을 빠르게 생성할 수 있습니다. 다음 단계를 따르세요.
index.html파일을 엽니다.!(느낌표) 를 입력합니다.Tab키를 누릅니다.
그러면 모든 필수 요소가 포함된 완전한 HTML5 템플릿이 자동으로 생성됩니다.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body></body>
</html>
팁: 단축키가 작동하지 않으면 템플릿 코드를
index.html파일에 복사하여 붙여넣을 수 있습니다.
이 HTML5 템플릿의 주요 구성 요소를 살펴보겠습니다.
<!DOCTYPE html>은 이것이 HTML5 문서임을 선언합니다.<html lang="en">은 언어 사양이 있는 루트 요소입니다.<head>는 문서에 대한 메타데이터를 포함합니다.<meta charset="UTF-8">는 문자 인코딩을 지정합니다.<meta name="viewport">는 모바일 장치에서 적절한 렌더링을 보장합니다.<title>은 브라우저 탭에 표시되는 페이지 제목을 설정합니다.<body>는 페이지 콘텐츠가 추가될 위치입니다.
<title>을 수정하여 페이지에 의미 있는 이름을 지정할 수 있습니다.
HTML 페이지에 기본 콘텐츠 추가
이 단계에서는 다양한 HTML 요소를 사용하여 HTML 페이지에 기본 콘텐츠를 추가하는 방법을 배우게 됩니다. HTML 은 태그를 사용하여 웹 페이지에서 콘텐츠를 구조화하고 표시합니다.
WebIDE 에서 index.html 파일을 열고 빈 <body> 섹션을 다음 내용으로 바꿉니다.
팁: 콘텐츠를 추가하려면 코드 조각을
index.html파일에 복사하여 붙여넣으세요. 기존<body></body>콘텐츠를 바꾸세요. 다음 랩에서 HTML 요소에 대해 자세히 알아보겠습니다.
<body>
<h1>Welcome to My First Web Page</h1>
<p>
This is a paragraph of text. HTML allows you to create different types of
content easily.
</p>
<h2>My Favorite Hobbies</h2>
<ul>
<li>Coding</li>
<li>Reading</li>
<li>Traveling</li>
</ul>
<h2>Quick Links</h2>
<a href="https://www.example.com">Visit Example Website</a>
</body>
사용된 HTML 요소를 살펴보겠습니다.
<h1>및<h2>는 제목 태그입니다 (h1 은 주요 제목, h2 는 부제목).<p>는 텍스트 단락에 사용됩니다.<ul>은 순서가 없는 (글머리 기호) 목록을 만듭니다.<li>는 목록 항목을 나타냅니다.<a>는 다른 웹 페이지로의 하이퍼링크를 만듭니다.
이러한 기본 요소는 웹 페이지에서 콘텐츠를 구조화하고 표시하는 데 도움이 됩니다. 다양한 태그를 사용하여 콘텐츠의 모양과 레이아웃이 어떻게 변경되는지 실험해 보세요.
초보자를 위한 몇 가지 추가 팁:
- 항상 HTML 태그를 닫으세요.
- 의미 있고 설명적인 콘텐츠를 사용하세요.
- 가독성을 위해 코드를 들여쓰기하세요.
브라우저에서 HTML 미리보기 및 렌더링
이 단계에서는 웹 브라우저에서 HTML 페이지를 미리 보고 렌더링하는 방법을 배우게 됩니다. LabEx VM 은 WebIDE 에 내장된 브라우저 미리보기 기능을 제공합니다.
HTML 파일을 미리 보려면:
- WebIDE 에서 오른쪽 하단 모서리에 있는 "Go Live" 버튼을 클릭합니다.
- HTML 페이지가 렌더링된 새 브라우저 탭이 열립니다.
- 또는 "Web 8080" 탭을 클릭하여 미리보기를 열 수 있습니다.
이 작업은 자동으로 다음을 수행합니다.
- 웹 서버 시작
- 미리보기 창에서 HTML 페이지 열기
- 코드를 수정할 때 실시간 업데이트 제공
팁: LabEx VM 은 포트 8080 에서 미리보기를 호스팅합니다. 다른 사람과 미리보기 링크를 공유하여 작업을 선보일 수 있습니다. 랩 VM 이 중지되면 미리보기 링크는 더 이상 작동하지 않습니다.
관찰해야 할 주요 사항:
- 페이지는 서로 다른 제목 크기로 렌더링됩니다.
- 목록은 글머리 기호로 표시됩니다.
- 링크를 클릭할 수 있습니다.
- 페이지 제목이 브라우저 탭에 나타납니다.
요약
이 랩에서는 새로운 HTML 파일을 생성하고 웹 페이지 생성의 기본적인 구조를 이해하는 데 중점을 두어 HTML 개발의 초기 단계를 안내했습니다. 단계별 지침에 따라 참가자들은 개발 도구로 WebIDE 를 사용하는 실질적인 경험을 얻었으며 HTML5 로 웹 페이지를 구축하는 데 필요한 필수 기술을 습득했습니다.
