본문 바로가기

HTML 파일 보기

HTML 파일을 내려받지 않고 워크스페이스에서 웹페이지로 바로 확인합니다. 내용을 고칠 때는 원본 코드를 편집합니다.


HTML 미리보기 (렌더링)

.html 파일을 열면 웹페이지 형태로 표시됩니다.

html 뷰어

  • 같은 폴더의 이미지는 HTML에서 참조한 대로 표시됩니다.
  • 같은 폴더의 CSS 파일(<link>)과 JS 파일은 스크립트 실행을 허용한 뒤에 불러옵니다. HTML 안에 <style>로 적은 스타일은 허용 전에도 적용됩니다.
  • Vite 등으로 빌드한 결과물도 폴더째 올리면 스크립트 실행을 허용한 뒤 동작합니다.
  • 오른쪽 위의 원본데이터를 선택하면 HTML 원본을 볼 수 있습니다.
  • 미리보기는 보기 전용입니다. 내용을 고치려면 미리보기 위의 원본 편집을 선택합니다.

인터랙티브 문서 활용

스크립트 실행을 허용하면 자바스크립트가 동작해 클릭, 애니메이션, 탭 전환 같은 상호작용이 있는 HTML 파일을 그대로 실행할 수 있습니다. 별도 서버나 배포 없이 폴더에 올리기만 하면 팀원도 같은 파일을 열어 볼 수 있습니다.

활용 예시

  • 버튼 클릭으로 화면이 전환되는 프로토타입 기획안
  • 차트나 그래프가 포함된 보고서
  • 탭·아코디언 등 인터랙션이 있는 제안서

스크립트 실행 차단

HTML 파일에 스크립트(<script>)나 이벤트 핸들러가 있으면 실행을 먼저 차단하고 미리보기 위에 안내를 표시합니다. 안내에서 다음 옵션 중 하나를 선택하면 스크립트가 실행됩니다. 계정에 실행 권한이 없으면 옵션 대신 관리자에게 문의하라는 안내가 표시됩니다.

스크립트 실행 차단

옵션설명
이번만 실행현재 브라우저 탭을 닫기 전까지만 스크립트를 허용합니다.
이 파일은 항상 허용이 브라우저에서 해당 파일의 스크립트를 계속 허용합니다. 파일 내용이 바뀌면 다시 묻습니다.

HTML 편집하기

HTML 파일은 원본 코드로만 편집합니다. 서식을 눌러 꾸미는 시각 편집기는 제공하지 않으며, 미리보기에서 본문을 더블클릭해도 편집 모드로 바뀌지 않습니다.

  1. 미리보기 위의 원본 편집을 선택합니다. 상단의 편집(연필) 아이콘을 선택하거나 원본데이터에서 본문을 더블클릭해도 같습니다.
  2. 원본데이터 화면의 코드 편집기에서 내용을 고칩니다. Ctrl+F로 텍스트를 찾고 바꿀 수 있습니다.
  3. 상단의 저장(디스켓) 아이콘을 선택하거나 Ctrl+S(macOS: Cmd+S)를 눌러 저장합니다.
  4. 미리보기로 돌아가 결과를 확인합니다. 내용이 바뀐 파일은 스크립트 실행 허용을 다시 묻습니다.

다른 사용자가 같은 파일을 편집 중이면 편집을 시작할 수 없습니다. 협업 채팅 및 편집 잠금을 참고합니다.

관련 문서