웹 페이지 파일 생성?
안녕하세요! 쉬운 코드입니다.
저번 게시물에서 VSC(Vidual Studio Code)라는 편집기를 다운로드하였는데요!
이번 시간에는 편집기를 이용해 웹 페이지 파일을 생성하는 것을 해보겠습니다.
참, 저도 정말 게시글 작성 바로 직전에 공부해서
게시글을 작성하기 때문에 오류가 있을 수 있습니다..
댓글로 오류나 추가적인 꿀팁! 공유해 주시면
게시글을 수정하거나 추가적으로 공부하겠습니다!
자, 그럼 시작하겠습니다!
먼저, 강의와 책에서 추천하는
아래 사진에 보이는 확장 플러그인들을 편집기 내에 설치할 거예요!
설치방법은 매우 쉽습니다!
사진에 보이는 것처럼 좌측 메뉴에서
5번째 아이콘을 누르고
검색창에 제가 설치한 것들 혹은
여러분들이 배우는 책이나 강의에서 말해주는 확장 플러그인들을 설치해 주시면 됩니다.
한글지원, 코드를 구분하기 쉽다 등등
사용자의 편의에 따라 설치하면 된다고 합니다.
(설치하지 않으셔도 무방합니다! 하지만 제 게시글은 제가 설치한 플러그인들을 기준으로 작성할 예정입니다.)
이제, 바탕화면에 가서 폴더를 생성해야 합니다.
저는 웹 페이지를 공부하는 것이니
'웹 페이지'라는 폴더를 생성할게요!
생성하셨나요?
생성하셨다면 아래 사진에 보이는 것처럼
좌측 상단에 A4용지 두 장이 겹친 것처럼 보이는 아이콘이 있을 거예요!
클릭해 주세요!
그러면 폴더 열기(Open file)이라는 버튼이 보일 겁니다.
버튼이 보인다면 클릭해 주시고
보이지 않는다면 상단 파일(F) 메뉴를 클릭하여 파일 열기를 진행해 주세요!
클릭을 했다면, 이전에 만들었던 폴더(저는 '웹 페이지'라는 폴더)를 열어주세요.
어떤 알림이 편집기 내에 보일 수 있는데
'믿을만한 폴더' 인지 확인하는 거라
그냥 Yes 눌러주시면 됩니다!
자, 여기까지 했다면 편집기 내에 저희가 만든 폴더가 등록이 됐을 겁니다!
아래 사진에 보이는 것처럼 편집기에 생성된
'웹 페이지' 폴더 아래 공백에
오른쪽 마우스를 클릭하여 New File을 클릭해 주세요.
클릭하셨다면 딱 봐도 무언가를 작성하는 칸이 생성되는데요.
이것에 저희가 만들 파일의 파일명을 작성해야 합니다.
여기서 저희는 파일 이름 뒤에 확장자명을 붙여야 합니다.
다양한 확장자명이 있지만
저희가 지금 알아야 하는
웹 페이지의 확장자명은 html입니다!
따라서, 본인이 정한 파일명 뒤에
. html을 붙여주시면 됩니다.
저는 파일명을 '시작'이라고 정하겠습니다.
이런 식으로요!
폴더를 만들고 파일까지 생성했습니다!
자, 기본 세팅은 끝났는데
이제 무엇을 해야 할까요?
편집기에서 브라우저로!
제가 지금 동시에 여러 가지 서적과 강의를 듣고 있는데
정말 90퍼센트의 서적과 강의에서
' Hello World! '
를 작성하며 시작합니다.
안녕, 세상아! 라니 정말 멋지지 않나요?
잠시만요! 위 사진에서 제 파일 칸 옆에 동그라미가 보이시나요?
저 동그라미는
제가 변경사항을 저장하지 않았다는 것을 의미한다고 합니다.
상단 메뉴에서 파일 - 저장을 해주셔도 되고요.
아니면 ctrl + (fn) + S 혹은 커맨드 키 + S를 눌러주시면 됩니다!
자, 저장을 완료했다면?
이제 웹이란 세상에 다가가봅시다!
브라우저를 열어줍니다.(크롬, Edge 등 무관합니다!)
브라우저를 열었다면
편집기 내의 파일을 브라우저의 주소칸으로 드래그해 줍니다.
그리고 enter!
혹은 브라우저에서
ctrl + O 혹은 cmd + O를 눌러 파일을 열어줘도 됩니다!
그럼 화면에
이런 식으로 작성했던 'Hello World!'가
브라우저에 뜨게 됩니다!
축하드립니다!!
(저도 축하해 주세요..)
저희는 이제 편집기 세상이 아니라
브라우저까지 변화를 줄 수 있는
사소하지만 중요한 기술을 얻게 되었습니다.
빨리 저 공백을 제가 구상하는 내용으로 채울 수 있으면 좋겠습니다!
이번 게시물은 여기까지이고
제가 하루빨리 다음 공부를 하고 다시 게시글로 뵙도록 할게요!
차근차근 같이 성장합시다.