이 랩에서는 웹 개발을 위한 강력하고 인기 있는 코드 편집기인 WebIDE (VS Code 와 유사) 를 사용하여 첫 번째 HTML 페이지를 만드는 방법을 배우게 됩니다.
이 포괄적인 튜토리얼은 WebIDE 구성, HTML5 보일러플레이트 템플릿 생성, 웹 페이지에 기본 콘텐츠 추가, 웹 브라우저에서 결과 미리 보기와 같은 주요 측면을 다룹니다. 단계별 지침을 따르면 웹 개발 기본 사항에 대한 실질적인 경험을 얻고, 대화형 및 구조화된 웹 페이지를 만드는 데 필요한 탄탄한 기반을 다질 수 있습니다.
LabEx WebIDE 는 코딩 작업을 위한 현대적이고 VS Code 와 유사한 개발 환경을 제공합니다. WebIDE 는 HTML, CSS 및 JavaScript 를 포함한 웹 개발 프로젝트에 적합합니다.
시작하려면 LabEx 인터페이스에서 "WebIDE" 탭을 클릭하여 WebIDE 를 엽니다. WebIDE 는 왼쪽에 파일 탐색기를, 오른쪽에 코드 편집기를 표시합니다. 하단에는 터미널 및 기타 도구도 있습니다.
~/project입니다.~/project입니다.이 단계에서는 WebIDE 에서 새로운 HTML 파일을 만드는 방법을 배우게 됩니다. HTML (HyperText Markup Language) 은 웹 페이지를 만들기 위한 표준 마크업 언어입니다. 모든 웹 페이지는 HTML 파일로 시작합니다.
WebIDE 에서 새 HTML 파일을 만들려면 다음 단계를 따르세요.
index.html 이름으로 저장합니다.
또는, 키보드 단축키 Ctrl+N을 사용하여 새 파일을 만든 다음 index.html로 저장할 수 있습니다.
HTML 파일의 이름을 지정할 때 다음 중요한 규칙을 기억하세요.
.html 파일 확장자를 사용합니다.index.html, about.html 등과 같이 설명적인 이름을 사용합니다.터미널을 통해 파일이 생성되었는지 확인해 보겠습니다.
ls ~/project예시 출력:
index.html이제 다음 단계에서 HTML 콘텐츠를 추가할 준비가 되었습니다. .html 확장자는 웹 브라우저에 이것이 HTML 문서임을 알려줍니다.
터미널에 익숙하다면 다음 명령을 사용하여 파일을 만들 수도 있습니다.
touch ~/project/index2.htmlLinux 명령어에 대해 자세히 알아보세요. 터미널 기술을 향상시킬 수 있습니다.
이 단계에서는 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 은 태그를 사용하여 웹 페이지에서 콘텐츠를 구조화하고 표시합니다.
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 페이지를 미리 보고 렌더링하는 방법을 배우게 됩니다. LabEx VM 은 WebIDE 에 내장된 브라우저 미리보기 기능을 제공합니다.
HTML 파일을 미리 보려면:
이 작업은 자동으로 다음을 수행합니다.
팁: LabEx VM 은 포트 8080 에서 미리보기를 호스팅합니다. 다른 사람과 미리보기 링크를 공유하여 작업을 선보일 수 있습니다. 랩 VM 이 중지되면 미리보기 링크는 더 이상 작동하지 않습니다.
관찰해야 할 주요 사항:
이 랩에서는 새로운 HTML 파일을 생성하고 웹 페이지 생성의 기본적인 구조를 이해하는 데 중점을 두어 HTML 개발의 초기 단계를 안내했습니다. 단계별 지침에 따라 참가자들은 개발 도구로 WebIDE 를 사용하는 실질적인 경험을 얻었으며 HTML5 로 웹 페이지를 구축하는 데 필요한 필수 기술을 습득했습니다.
