HTML 파일 여는 법 4가지｜Chrome·Edge·메모장으로 열기

HTML 파일 여는 법은 무엇을 하려는지에 따라 달라집니다. HTML 파일을 웹 페이지처럼 확인하려면 Chrome, Microsoft Edge, Firefox 같은 브라우저로 열면 되고, HTML 코드를 확인하거나 수정하려면 메모장이나 Visual Studio Code 같은 텍스트 편집기를 사용하면 됩니다.

가장 간단한 방법은 HTML 파일을 더블 클릭하거나 마우스 오른쪽 버튼으로 클릭한 뒤 연결 프로그램에서 브라우저를 선택하는 것입니다. 만약 HTML 파일이 열리지 않거나 코드만 표시된다면 파일 확장자, 기본 앱, 파일 크기와 연결된 CSS·JavaScript 파일도 함께 확인해야 합니다.

파트 1. HTML 파일이란? 어떤 프로그램으로 열어야 하나요?

HTML은 HyperText Markup Language의 약자로 웹 페이지의 구조와 콘텐츠를 작성하는 데 사용하는 마크업 언어입니다. HTML 문서는 기본적으로 텍스트 파일이며 일반적으로 .html 또는 .htm 확장자를 사용합니다.

HTML 파일은 목적에 따라 두 가지 방식으로 열 수 있습니다.

• 웹 페이지 화면을 보고 싶을 때: Chrome, Microsoft Edge, Firefox 등의 웹 브라우저로 엽니다.
• HTML 코드를 확인하거나 수정하고 싶을 때: 메모장, Visual Studio Code 등의 텍스트 편집기로 엽니다.

HTML 파일 여는 방법 비교

참고

HTML 파일을 브라우저로 열면 웹 페이지가 렌더링되고, 텍스트 편집기로 열면 <html>, <body> 등의 HTML 소스 코드가 표시됩니다. 두 방식 모두 정상입니다.

파트 2. Windows에서 HTML 파일 여는 법 4가지

방법 1. HTML 파일을 더블 클릭해서 브라우저로 열기

HTML 파일을 단순히 웹 페이지처럼 보고 싶다면 가장 먼저 더블 클릭해 보세요. Windows에서 HTML 파일이 웹 브라우저와 연결되어 있다면 기본 브라우저에서 바로 열립니다.

• 파일 탐색기에서 열고 싶은 .html 또는 .htm 파일을 찾습니다.

• HTML 파일을 더블 클릭합니다.

• 설정된 기본 브라우저에서 HTML 페이지가 표시되는지 확인합니다.

더블 클릭했는데 브라우저가 아니라 다른 프로그램이 실행된다면 다음 방법으로 원하는 브라우저를 직접 지정할 수 있습니다.

방법 2. Chrome·Edge 등 원하는 브라우저로 HTML 파일 열기

HTML 파일을 Chrome, Microsoft Edge 또는 Firefox에서 직접 확인하고 싶다면 Windows의 연결 프로그램 기능을 사용하면 됩니다.

• HTML 파일을 마우스 오른쪽 버튼으로 클릭합니다.

• 연결 프로그램을 선택합니다.

• 목록에서 Google Chrome, Microsoft Edge 또는 Firefox를 선택합니다.

  

브라우저 창이 이미 열려 있다면 HTML 파일을 Chrome, Edge 또는 Firefox 창으로 직접 드래그 앤 드롭하는 방법도 사용할 수 있습니다.

• Chrome, Edge 또는 Firefox를 실행합니다.

• 파일 탐색기에서 HTML 파일을 찾습니다.

• HTML 파일을 브라우저 창으로 드래그 앤 드롭합니다.

  

방법 3. 메모장으로 HTML 파일 열기

웹 페이지 결과가 아니라 HTML 소스 코드를 확인하고 싶다면 Windows 기본 메모장을 사용할 수 있습니다. 별도의 프로그램을 설치하지 않아도 된다는 장점이 있습니다.

• HTML 파일을 마우스 오른쪽 버튼으로 클릭합니다.

• 연결 프로그램을 선택합니다.

• 목록에서 메모장을 선택합니다. 메모장이 보이지 않는다면 다른 앱 선택에서 찾아보세요.

• 파일이 열리면 <html>, <head>, <body> 등의 HTML 코드를 확인할 수 있습니다.

메모장은 간단한 수정에는 적합하지만, HTML 구조가 복잡하거나 CSS·JavaScript 파일을 함께 작업해야 한다면 Visual Studio Code 같은 코드 편집기가 더 편리합니다.

방법 4. Visual Studio Code로 HTML 파일 열고 수정하기

HTML 파일을 단순히 보는 것이 아니라 내용을 수정하거나 웹 페이지를 제작하려면 Visual Studio Code를 사용하는 방법이 편리합니다.

• Visual Studio Code를 실행합니다.

• 상단 메뉴에서 File > Open File을 선택합니다.

• 열려는 HTML 파일을 찾아 선택합니다.

  

• HTML 코드를 확인하거나 필요한 부분을 수정한 뒤 저장합니다.

HTML, CSS, JavaScript를 함께 수정하는 경우에는 개별 HTML 파일만 여는 것보다 프로젝트가 들어 있는 폴더 전체를 Visual Studio Code에서 여는 편이 관리하기 쉽습니다.

파트 3. HTML 파일이 안 열릴 때 해결 방법

HTML 파일이 브라우저나 텍스트 편집기에서 정상적으로 열리지 않는다고 해서 바로 파일이 손상됐다고 판단할 필요는 없습니다. 확장자, 기본 프로그램, 파일 크기 또는 연결된 리소스 문제일 수 있으므로 아래 항목을 순서대로 확인하세요.

1. HTML 파일 확장자 확인하기

파일 이름이 실제로 .html 또는 .htm으로 끝나는지 확인하세요. 예를 들어 index.html.txt처럼 저장된 파일은 HTML 파일이 아니라 텍스트 파일로 인식될 수 있습니다.

Windows에서 확장자가 보이지 않는다면 파일 탐색기에서 보기 > 표시 > 파일 확장명을 활성화한 뒤 실제 확장자를 확인하세요.

2. 다른 브라우저로 HTML 파일 열기

한 브라우저에서 열리지 않는다면 Chrome, Edge, Firefox 등 다른 브라우저에서도 테스트해 보세요. HTML 자체가 정상인지 또는 특정 브라우저 설정에만 문제가 있는지 구분하는 데 도움이 됩니다.

3. 메모장으로 HTML 코드가 남아 있는지 확인하기

HTML 파일을 메모장이나 Visual Studio Code로 열어 실제 내용이 있는지 확인하세요.

• HTML 코드가 정상적으로 보이면 파일 자체는 읽을 수 있는 상태일 가능성이 높습니다.
• 파일이 완전히 비어 있다면 파일 크기도 함께 확인하세요.
• 문자가 깨진다면 저장 인코딩 문제인지 확인합니다.
• HTML 태그가 일부 잘렸다면 코드가 불완전하게 저장되었을 수 있습니다.

4. HTML 파일 크기가 0KB인지 확인하기

HTML 파일을 마우스 오른쪽 버튼으로 클릭하고 속성에서 파일 크기를 확인하세요.

파일 크기가 0KB라면 파일 이름만 존재하고 실제 HTML 내용이 저장되어 있지 않을 가능성이 있습니다. 이런 경우 브라우저를 바꾼다고 해서 원래 내용을 표시할 수는 없습니다.

5. HTML 페이지가 열리지만 화면이 깨질 때 연결 파일 확인하기

HTML 파일 자체는 열리는데 이미지가 표시되지 않거나 CSS 디자인이 적용되지 않는다면 HTML 파일보다 연결된 파일의 위치 문제일 가능성이 높습니다.

예를 들어 HTML 코드가 다음 파일을 참조하고 있다면 해당 파일이나 폴더도 함께 존재해야 합니다.

• CSS 스타일시트
• JavaScript 파일
• 이미지
• 폰트
• 기타 HTML 페이지

HTML 파일만 다른 폴더로 이동하면 상대 경로가 끊어져 이미지와 스타일이 표시되지 않을 수 있습니다.

6. 로컬 HTML에서 일부 기능이 작동하지 않는다면 로컬 서버 사용하기

단순 HTML 문서는 브라우저에서 바로 열 수 있지만, 모든 웹 페이지가 file:// 방식으로 정상 작동하는 것은 아닙니다.

JavaScript에서 다른 파일을 불러오거나 비동기 요청을 사용하는 페이지는 브라우저 보안 정책 때문에 로컬 파일 상태에서 일부 기능이 차단될 수 있습니다. PHP나 Python 같은 서버 측 코드가 포함된 경우에도 브라우저에서 HTML 파일을 더블 클릭하는 것만으로는 정상 실행되지 않습니다.

이런 웹 프로젝트라면 HTML 파일 자체를 계속 수정하기보다 로컬 웹 서버 환경에서 실행해 확인하는 것이 적절합니다.

참고

주소창이 file:///C:/...처럼 표시된다면 현재 HTML 파일을 로컬에서 직접 열고 있는 것입니다. 일반적인 정적 HTML 확인에는 문제가 없지만 웹 서버가 필요한 기능은 정상적으로 작동하지 않을 수 있습니다.

파트 4. 삭제되거나 사라진 HTML 파일을 복구하는 방법

HTML 파일이 존재하지만 브라우저에서 제대로 표시되지 않는 문제와 HTML 파일 자체가 삭제되거나 사라진 문제는 구분해야 합니다.

HTML 파일이 아직 PC에 있다면 먼저 앞서 소개한 브라우저, 텍스트 편집기, 확장자 및 코드 상태를 확인하세요. 반면 실수로 HTML 파일을 삭제했거나 포맷, 저장 장치 문제 등으로 파일 자체를 찾을 수 없다면 데이터 복구 방법을 고려할 수 있습니다.

이 경우 Tenorshare 4DDiG Data Recovery를 이용해 HTML 파일이 원래 저장되어 있던 드라이브나 폴더를 스캔하고 삭제된 파일이 검색되는지 확인할 수 있습니다.

HTML 파일이 실제로 삭제되거나 사라진 경우에는 해당 드라이브에 새 데이터를 계속 저장하지 말고 먼저 복구 가능한 파일이 있는지 확인하는 것이 좋습니다.

• 4DDiG를 실행하고 HTML 파일이 있던 위치를 선택합니다.

  삭제된 HTML 파일이 원래 저장되어 있던 드라이브 또는 위치를 선택하고 스캔을 시작하세요.

• 스캔 결과에서 HTML 파일을 찾습니다.

  파일 유형, 파일 이름 또는 원래 경로를 기준으로 필요한 HTML 파일이 검색되는지 확인하세요.

• 복구할 파일을 확인한 뒤 다른 위치에 저장합니다.

  필요한 파일을 선택하고 복구 가능한 파일인지 확인한 뒤 복구를 진행하세요. 복구한 파일은 원래 삭제된 위치와 다른 드라이브나 저장 공간에 저장하는 것이 좋습니다.

  주의

  복구한 파일을 원래 삭제된 위치에 바로 저장하면 아직 복구하지 않은 데이터가 덮어써질 수 있습니다. 가능하면 다른 드라이브나 별도의 저장 공간을 선택하세요.

CTA: HTML 파일을 단순히 열 수 없는 것이 아니라 실수로 삭제했거나 저장 위치에서 사라진 경우라면 4DDiG Data Recovery로 원래 저장 위치를 스캔해 복구 가능한 파일이 있는지 확인해 볼 수 있습니다.

파트 5. HTML 파일 열기 FAQ

Q1. HTML 파일은 어떤 프로그램으로 열어야 하나요?

웹 페이지 화면을 보고 싶다면 Chrome, Microsoft Edge, Firefox 같은 브라우저로 열면 됩니다. HTML 소스 코드를 확인하거나 수정하고 싶다면 Windows 메모장이나 Visual Studio Code 같은 텍스트 편집기를 사용하세요.

Q2. HTML 파일을 Chrome으로 여는 방법은 무엇인가요?

HTML 파일을 마우스 오른쪽 버튼으로 클릭한 뒤 연결 프로그램 > Google Chrome을 선택하면 됩니다. 또는 Chrome 창을 먼저 실행한 뒤 HTML 파일을 브라우저 안으로 드래그 앤 드롭해도 로컬 페이지를 확인할 수 있습니다.

Q3. HTML 파일을 열었는데 코드만 보이는 것은 오류인가요?

반드시 오류는 아닙니다. 메모장이나 VS Code 같은 텍스트 편집기로 HTML 파일을 열면 HTML 소스 코드가 표시되는 것이 정상입니다. 완성된 웹 페이지 화면을 보고 싶다면 파일을 Chrome, Edge 또는 Firefox 같은 브라우저로 열어보세요.

Q4. HTML 파일은 열리는데 이미지나 디자인이 안 보이는 이유는 무엇인가요?

HTML에서 참조하는 CSS, JavaScript, 이미지 등의 파일이 없거나 상대 경로가 바뀌었을 가능성이 있습니다. HTML 파일만 다른 폴더로 이동했다면 연결된 리소스 경로가 끊어질 수 있으므로 원래 폴더 구조도 함께 확인하세요.

Q5. HTML 파일을 더블 클릭했는데 아무것도 안 나오면 파일이 손상된 건가요?

바로 손상으로 판단할 필요는 없습니다. 먼저 다른 브라우저로 열고 메모장이나 VS Code에서 코드가 존재하는지 확인하세요. 파일 크기가 0KB인지, 확장자가 실제로 .html인지도 확인하는 것이 좋습니다.

Q6. 삭제된 HTML 파일도 다시 열 수 있나요?

파일이 삭제되었다면 먼저 휴지통이나 백업을 확인하세요. 파일을 찾을 수 없고 저장 장치에서 실제로 삭제된 경우에는 해당 공간이 덮어쓰기되기 전에 데이터 복구 도구로 원래 위치를 스캔하는 방법을 고려할 수 있습니다.

파트 6. 정리

HTML 파일 여는 법은 목적에 따라 간단히 구분할 수 있습니다. 완성된 웹 페이지 화면을 보고 싶다면 Chrome, Microsoft Edge 또는 Firefox 같은 브라우저를 사용하고, HTML 소스를 확인하거나 수정하고 싶다면 메모장이나 Visual Studio Code를 사용하세요.

파일이 열리지 않는다면 먼저 확장자, 기본 프로그램, 파일 크기와 HTML 코드가 실제로 남아 있는지 확인해야 합니다. 페이지는 열리지만 이미지나 스타일이 표시되지 않는다면 HTML 자체보다 CSS, JavaScript, 이미지 경로 또는 로컬 실행 환경을 확인하는 것이 좋습니다.

반면 HTML 파일 자체가 실수로 삭제되거나 저장 장치에서 사라진 경우라면 Tenorshare 4DDiG Data Recovery를 사용해 원래 저장되어 있던 위치를 스캔하고 복구 가능한 파일이 있는지 확인할 수 있습니다.