이번 시간에는 아주 간단한 웹페이지를 만들어 보겠습니다. 단계별로 자세하게 설명해 드릴 테니, 처음 시작하시는 분들도 쉽게 따라오실 수 있을 거예요. 마지막에는 실제로 작동하는 전체 코드를 제공해 드리니 실습해 보세요!
1. VS 코드로 이동하기
먼저, Visual Studio Code(VS 코드)를 실행합니다. VS 코드는 프로그래밍을 할 때 많이 사용하는 편리한 코드 편집기입니다.
2. 프로젝트 폴더 생성하기
VS 코드는 항상 프로젝트 폴더 안에서 작업합니다. 프로젝트 폴더는 우리가 만드는 웹사이트나 애플리케이션의 모든 파일을 담는 곳입니다.
- 데스크톱(바탕화면)으로 이동합니다.
- 새 폴더를 생성하고 이름을
01_test라고 지어봅시다.- 폴더 이름은 자유롭게 지으셔도 되지만, 의미 있게 지으면 나중에 찾기 편해요.
- 이 폴더가 우리의 프로젝트 폴더가 될 것입니다.
3. VS 코드에서 프로젝트 폴더 열기
- VS 코드에서 상단 메뉴의
파일>폴더 열기...를 선택합니다. - 방금 만든
01_test폴더를 찾아 선택합니다. - 이제 VS 코드의 왼쪽 사이드바에 폴더 구조가 나타날 거예요.
4. 새 파일 생성하기
프로젝트에 첫 번째 파일을 추가해 봅시다.
- 왼쪽 사이드바에서 새 파일 아이콘(+)을 클릭합니다.
- 또는 상단 메뉴의
파일>새 파일을 선택할 수 있어요.
- 또는 상단 메뉴의
- 파일 이름을
index.html로 지정하고 저장합니다.index.html은 웹사이트의 첫 페이지를 나타내는 이름으로, 대부분의 웹 프로젝트에서 기본적으로 사용합니다.
5. 기본 HTML 구조 작성하기
HTML 파일을 만들었으니, 이제 기본 구조를 작성해 봅시다.
- 빈 파일에서
!느낌표를 입력합니다. - 그리고 키보드의
탭(Tab)키를 누릅니다.- 그러면 VS 코드가 자동으로 기본적인 HTML 구조를 생성해 줍니다.
- 생성된 코드는 다음과 같이 생겼을 거예요:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>6. 웹페이지 제목 수정하기
<title> 태그는 웹페이지의 제목을 지정합니다. 이 제목은 브라우저 탭에 표시됩니다.
<title>태그 안의Document를 지우고나의 첫 웹페이지로 바꿉니다.
<title>나의 첫 웹페이지</title>7. 본문 내용 추가하기
이제 실제로 브라우저에 표시될 내용을 작성해 봅시다.
-
<body>태그 안에 코드를 추가합니다. -
큰 제목(H1) 추가하기
<h1>태그를 사용하여 큰 제목을 작성합니다.<h1>은 HTML에서 가장 큰 헤딩(제목)입니다.
<h1>Hello World</h1>-
단락(P) 추가하기
<p>태그를 사용하여 단락을 작성합니다.- 본인의 이름과 간단한 인사말을 적어 봅시다.
<p>안녕하세요, 제 이름은 [여러분의 이름]입니다. 이것은 저의 첫 번째 웹페이지입니다.</p>8. 작성한 코드 저장하기
- 키보드에서
Ctrl + S(Windows) 또는Command + S(Mac)를 눌러 저장합니다. - 또는 상단 메뉴에서
파일>저장을 선택합니다. - VS 코드에서 자동 저장 기능을 활성화할 수도 있어요.
- 오른쪽 하단의
자동 저장을 클릭하여 활성화합니다.
- 오른쪽 하단의
9. 코드 포맷팅 확인하기
만약 Prettier와 같은 코드 포맷터 확장을 설치했다면, 저장할 때 코드의 형식이 자동으로 정렬됩니다.
- 코드를 깔끔하게 유지해 주어 가독성을 높여줍니다.
- 만약 코드의 모양이 저장할 때마다 바뀐다면, 포맷터가 작동하고 있는 것입니다.
10. 웹페이지 열어보기
작성한 웹페이지를 브라우저에서 확인해 봅시다.
- 파일 탐색기에서
01_test폴더로 이동합니다. index.html파일을 찾습니다.- 해당 파일을 더블 클릭하거나, 마우스 오른쪽 버튼을 클릭하여
연결 프로그램>Google Chrome을 선택합니다.- 다른 브라우저를 사용해도 되지만, 이 강의에서는 Google Chrome을 사용합니다.
11. 웹페이지 내용 확인하기
브라우저에서 웹페이지가 열리면 다음과 같은 내용을 볼 수 있습니다:
- 큰 글씨로
Hello World가 표시됩니다. - 그 아래에
안녕하세요, 제 이름은 [여러분의 이름]입니다. 이것은 저의 첫 번째 웹페이지입니다.라는 문장이 나타납니다. - 브라우저 탭에는
나의 첫 웹페이지라는 제목이 표시됩니다.
12. 실시간으로 수정 사항 반영하기
코드를 수정하고 저장한 후, 브라우저에서 새로고침(F5)을 하면 변경된 내용이 반영됩니다.
- VS 코드와 브라우저를 나란히 배치하면 실시간으로 변경 사항을 확인하기 편리합니다.
- 왼쪽에는 코드를, 오른쪽에는 브라우저를 두고 작업해 보세요.
13. 추가 팁
- Google Chrome을 사용하여 웹페이지를 테스트하면 이 강의와 동일한 결과를 얻을 수 있습니다.
- VS 코드의 사이드바를 숨기려면 왼쪽 상단의 아이콘을 클릭하세요. 그러면 코드 편집 영역이 더 넓어집니다.
- 앞으로 더 많은 HTML 태그와 CSS를 배워서 웹페이지를 더욱 멋지게 꾸며보세요.
전체 실습 코드
마지막으로, 완성된 index.html 파일의 전체 코드를 제공해 드리겠습니다:
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>나의 첫 웹페이지</title>
</head>
<body>
<h1>Hello World</h1>
<p>안녕하세요, 제 이름은 [여러분의 이름]입니다. 이것은 저의 첫 번째 웹페이지입니다.</p>
</body>
</html>축하합니다!
첫 번째 웹페이지를 성공적으로 만들었습니다! 🎉 이 과정을 통해 간단한 웹페이지를 만드는 방법을 배웠습니다. 앞으로 더 복잡한 웹사이트를 만들기 위해 HTML, CSS, JavaScript 등을 차근차근 배워 나가면 됩니다.
웹 개발의 첫걸음을 내디딘 것을 다시 한 번 축하드리며, 궁금한 점이 있으면 언제든지 질문해 주세요. 다음 강의에서 만나요!
