
웹페이지 제작은 웹브라우저가 설치된 컴퓨터만 있으면 바로 시작할 수 있습니다.
웹페이지를 보기 위해 사용하던 브라우저를 이제는 내가 만든 웹페이지를 확인하는 도구로 사용할 수 있죠.
브라우저
대표적인 브라우저는 다음과 같습니다.
- Google Chrome
- Microsoft Edge
- Firefox
- Safari
위 브라우저 중 하나를 이미 사용하고 있을 것입니다. Brave나 Arc 같은 다른 브라우저도 사용할 수 있으니, 마음에 드는 브라우저를 선택하세요.
코드 에디터
웹페이지를 만들려면 파일을 편집할 텍스트 에디터가 필요합니다.
간단한 웹페이지라면 Windows의 메모장이나 Mac의 텍스트 에디터도 사용할 수 있습니다. 하지만 코딩을 하다 보면 코드와 내용을 색상으로 구분해주는 코드 에디터를 사용하는 것이 정신건강에 좋습니다.
추천하는 코드 에디터는 다음과 같습니다.
- VSCode (무료) https://code.visualstudio.com
- Sublime Text (유료) https://www.sublimetext.com
- Nova (유료 / 맥 전용) https://nova.app
- Zed (무료 / 맥 전용) https://zed.dev
- Vim (무료 / 매니악) https://www.vim.org
코드 에디터가 처음이라면 VSCode를 먼저 사용해 보고, 깔끔한 화면이 좋다면 Sublime Text도 괜찮습니다. Sublime Text는 유료이지만, 가끔 구입하라는 창이 뜰 뿐 기능상의 제약은 없습니다.
이제 코딩할 준비가 끝났습니다 🎉
에디터를 열고, Webpages Are for Everyone 에서 The Shape of HTML 의 코드를 복사해 적절한 파일명으로 저장하세요. (예: index.html)
웹페이지 확인하기
HTML 파일을 만들고 나서 어떻게 확인하는지 모르는 경우가 많습니다. 내가 만든 웹페이지를 확인하는 방법은 매우 간단합니다.
파일을 마우스로 선택해 브라우저에 드래그 앤 드롭하세요.
웹페이지 수정하기
코드 에디터에서 수정 후 저장해도 브라우저에 자동으로 반영되지 않으므로, 변경 사항을 저장한 후 브라우저에서 페이지를 리로드하여 확인할 수 있습니다.
드래그 앤 드롭으로 이미 웹페이지가 표시된 상태이므로 리로드하면 수정된 웹페이지가 표시됩니다.
웹페이지 완성하기
수정을 반복해 페이지를 완성하면 됩니다.
이제 웹페이지를 만들 준비가 끝났습니다. Webpages Are for Everyone 에서 설명한 기본 지식만으로도 충분히 원하는 웹페이지를 만들 수 있으니, 오늘부터 웹페이지를 만들어 보세요.