반응형
HTML을 배우거나 개발할 때, 작성한 코드를 빠르게 실행해서 미리보는 방법을 알고 있으면 작업 속도가 빨라집니다. 블로그 작성시에도 html코드 실행한 것을 미리보기를 통해 확인이 필요할 때, 가장 간단한 HTML 코드 실행 방법을 소개합니다.
1. 브라우저에서 직접 실행
HTML 파일을 만들고 직접 브라우저에서 실행하는 방법입니다.
- 메모장 또는 VS Code 등에서 HTML 코드를 작성합니다.
- 파일을 index.html 로 저장합니다.
- 저장한 파일을 더블 클릭하면 기본 브라우저에서 실행됩니다.
2. 온라인 코드 에디터 사용
HTML 코드를 별도의 프로그램 없이 바로 실행할 수 있는 온라인 에디터를 활용하면 편리합니다.
- JSFiddle
- CodePen
- JSBin
- PlayCode
3. 브라우저 개발자 도구 활용
Chrome, Edge, Firefox 등 최신 브라우저에서는 개발자 도구를 이용해 HTML 코드를 즉시 실행할 수 있습니다.
- 브라우저에서 F12 키 또는 Ctrl + Shift + I 를 눌러 개발자 도구를 엽니다.
- Console 탭에서 아래 코드를 입력하고 실행합니다.
document.body.innerHTML = "<h1>Hello, World!</h1>";
4. VS Code의 Live Server 확장 기능 사용
VS Code를 사용하면 Live Server 확장 기능을 통해 실시간으로 HTML을 실행할 수 있습니다.
- VS Code에서 Live Server 확장을 설치합니다.
- HTML 파일을 연 후, 오른쪽 아래의 Go Live 버튼을 클릭합니다.
- 자동으로 브라우저에서 실행됩니다.
결론
HTML 코드를 실행하는 방법은 다양하며, 가장 쉬운 방법은 브라우저에서 직접 실행하는 것입니다. 하지만 실시간 미리보기가 필요하다면 온라인 코드 에디터나 VS Code의 Live Server를 활용하는 것이 효율적입니다.
반응형