1. 누구나 웹페이지를 만들 수 있습니다!!
안녕하세요.
여러분들은 Pc만 있다면 이 글을 보고 있는 누구든지 웹페이지를 만들 수 있다는 걸 알고 계시나요? 저는 이 글을 통해서 여러분들께 매우 간단한 방법으로 웹페이지를 만드는 방법을 알려드리려고 합니다. 처음부터 잘 따라오시길 바랍니다!!
2. 비주얼 스튜디오 코드( Visual Studio Code) 프로그램 다운로드하기
일단 웹페이지를 만들기 앞서 프로그램 하나가 필요합니다. 바로 비주얼 스튜디오 코드라는 프로그램입니다.
저도 사용하고 있고 수많은 분들이 코드 작성을 위해 비주얼 스튜디오 프로그램을 사용하고 있습니다. 여러분들도 이 프로그램을 사용하시는 걸 추천드립니다.
먼저 아래 링크를 통해서 비주얼 스튜디오 코드 다운로드 페이지로 접속하시거나 구글에 비주얼 스튜디오 코드 다운로드를 입력하셔서 제일 상단의 링크로 접속합니다.
https://visualstudio.microsoft.com/ko/downloads/
Visual Studio Tools 다운로드 - Windows, Mac, Linux용 무료 설치
Visual Studio IDE 또는 VS Code를 무료로 다운로드하세요. Windows 또는 Mac에서 Visual Studio Professional 또는 Enterprise Edition을 사용해 보세요.
visualstudio.microsoft.com
커뮤니티 버전을 무료로 다운로드하시면 됩니다.
3. 비주얼 스튜디오로 나만의 웹 만들기
다운로드를 완료하시고 프로그램을 실행하시면 첫 페이지로 이런 화면이 표시되는데 새 프로젝트를 만들기 위해 [ 파일 → 폴더 열기 ] 순으로 클릭해줍니다.
그렇게 하면 파일 탐색기 창이 열리는데 흰색 빈 화면에서 [마우스 우클릭 → 새로 만들기 → 새 폴더] 순으로
클릭하셔서 새 폴더를 생성해주신 후 방금 만든 새폴더를 선택하신 후 폴더 선택을 클릭해 주세요.
그렇게 하시면 다음과 같은 화면이 표시되는데 사진과 같이 [새 파일(마크) → 파일명]을 입력하신 후 html 파일 생성을 완료합니다.
탐색기 창 안에 있는 방금 새로 만든 파일을 더블 클릭하시면 파일이 열리면서 다음과 같은 화면이 표시됩니다.
위에 코드 입력창에서 숫자 1 옆에 마우스 커서를 두신 후 자판기로! 를 입력하시고 Tab키를 입력하시면 다음과 같은 화면이 표시됩니다.
<html lang ="en">을 <html lang ="ko">로 변경해주세요. 다음으로 <title> Document </title>을 <title> 원하는 이름 </title>으로 변경해주세요.
아래 사진과 같이 <body></body> 안에 원하는 내용을 입력해주세요. 그리고 저장을 위해 마지막으로 Ctrl + S 키를 눌러주세요.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>New web</title>
</head>
<body>
안녕하세요 제 블로그를 찾아주셔서 진심으로 감사합니다.
</body>
</html>
지금부터 HTML을 이용한 웹페이지를 처음 만들어본 사람들은 정말 신기한 경험을 할 수도 있을 것 같습니다.
얼마 안 남았으니 마지막까지 잘 따라와 주세요.
아래 이미지와 같이 [탐색기 → 파일명 좌클릭 → 파일명 우클릭 → 파일 탐색기에 표시]를 클릭해주세요.
파일 탐색기에 지금까지 만든 파일이 나타낼 텐데 이 파일을 더블클릭해서 파일을 열어주세요.
그럼 이렇게 자신만의 웹 페이지가 만들어져 있을 것입니다.
3. 글을 끝마치며
처음으로 자신의 웹페이지를 만든 기분이 어떠신가요? 신기하신가요? 행복하신가요? 어떤 기분이 드시든 간에 여러분들이 웹페이지 제작의 첫걸음을 내디뎠다는 걸 멋지게 생각하셨으면 좋겠습니다. 저도 웹페이지를 처음 만들 었을 때의 그 희열을 잊을 수가 없답니다.
마지막으로 저한테 그 희열을 느끼게 해 준 생활코딩 - 이고잉 선생님의 강의를 추천드리며 영상을 끝내겠습니다.
생활코딩은 더 많은 사람들에게 코딩을 전파하기 위해 비영리로 운영 중인 코딩 학습 사이트입니다.
양질의 수많은 코딩 관련 강의들을 무료로 보고 학습할 수 있습니다.
웹페이지 제작에 대해 훨씬 더 많을걸 알고 싶다면 생활코딩 WEB1 - HTML & Internet 강의를 꼭 들어보시기를 추천 드립니다.
이 강의를 다 보고 나시면 좀 더 발전된 자기 자신을 느낄 수 있으실 거라 생각합니다.
제가 블로그 초보이다 보니 부족한 부분도 많았을 텐데 긴 글 읽어주셔서 정말 감사드립니다.
'웹만들기' 카테고리의 다른 글
| [HTML] 웹페이지에 비디오 넣기 (0) | 2022.04.19 |
|---|