HTML 코드를 이해하고 다루는 방법을 알면 여러 면에서 큰 도움이 됩니다. 이메일 서명을 HTML로 만들어 더 전문적인 커뮤니케이션을 구현하거나, 웹 페이지를 워드 문서로 저장하는 등 일상 업무에서도 다양하게 활용할 수 있습니다.
하지만 HTML 파일을 처음 다뤄본다면 다소 혼란스러울 수 있습니다. 이 글에서는 HTML 파일이 무엇인지부터 크롬에서 HTML 파일을 열고 확인하는 방법까지 차근차근 알아보겠습니다.
HTML 파일이란?
HTML은 Hypertext Markup Language(하이퍼텍스트 마크업 언어)의 약자로, 웹 기반 스크립트 언어입니다. 주된 목적은 웹 페이지를 만들고 구조화하는 것입니다. HTML(또는 HTM) 확장자를 가진 파일은 텍스트와 이미지, 동영상 같은 다른 파일에 대한 참조만 포함하고 있습니다.
HTML 파일을 만들고 편집할 수 있는 프로그램은 매우 다양하지만, 간단한 텍스트 편집기만으로도 파일을 열고 텍스트 형태로 읽을 수 있습니다. 웹 페이지가 실제로 어떻게 보이는지 확인하려면 웹 브라우저로 HTML 파일을 실행해야 합니다.
구글 크롬은 HTML을 인식하며, '.html' 확장자를 가진 모든 파일을 열 수 있습니다.
크롬에서 HTML 파일을 여는 방법
크롬에서 HTML 파일을 여는 방법은 여러 가지가 있습니다. 상황에 맞는 방법을 골라 활용해 보세요.
1. '연결 프로그램' 명령 사용하기
- 열고 싶은 HTML 파일을 찾아 마우스 오른쪽 버튼으로 클릭한 후 메뉴에서 '연결 프로그램(Open with)'을 선택합니다. 파일을 실행할 수 있는 앱 목록이 표시되며, 기본 브라우저가 목록 맨 위에 나타납니다.
- 목록에서 구글 크롬을 선택하면 브라우저에서 파일을 바로 확인할 수 있습니다.
- 구글 크롬이 기본 브라우저로 설정되어 있다면 HTML 파일을 더블클릭하기만 하면 자동으로 크롬에서 열립니다. 만약 컴퓨터가 파일을 인식하지 못한다면, 시스템이 설치된 앱으로 파일을 열거나 인터넷에서 확장자를 검색하라는 메시지를 표시합니다. 이때 '설치된 앱으로 열기'를 선택한 후 목록에서 다시 구글 크롬을 선택해 보세요.
- 올바른 HTML 파일을 열었는지 확인하려면 크롬에서 페이지가 열렸을 때 주소창을 확인하세요. 주소가 컴퓨터에 저장된 파일 위치와 일치해야 합니다.
2. 크롬 내부에서 HTML 파일 열기
이미 브라우저를 실행 중이라면, 컴퓨터에서 파일을 먼저 찾을 필요 없이 크롬에서 바로 HTML 파일을 열 수 있습니다.
- 크롬 메뉴에서 '파일(File)'을 선택한 후 '파일 열기(Open File)'를 클릭합니다.
- HTML 파일이 저장된 위치로 이동해 문서를 선택하고 '열기'를 클릭합니다.
- 새 탭에서 파일이 열리는 것을 확인할 수 있습니다.
키보드 단축키를 활용할 수도 있습니다. 크롬에서 새 탭을 연 후 Ctrl(Windows) 또는 Cmd(Mac) + O를 누르면 동일한 '파일 열기' 메뉴가 나타납니다. HTML 파일을 찾아 열면 됩니다.
단축키가 작동하지 않는다면 브라우저마다 이 명령에 할당된 단축키가 다를 수 있으니, 브라우저 설정에서 언제든 확인할 수 있습니다. 구글 크롬에는 키보드 단축키로 활용할 수 있는 다양한 기능이 있습니다. 올바른 단축키만 익히면 탭 전환, 구글 캘린더 일정 생성, 시크릿 모드 켜고 끄기 등을 훨씬 빠르게 처리할 수 있습니다.
3. 크롬으로 파일 드래그 앤 드롭하기
가장 간단한 방법은 HTML 파일을 새 탭으로 드래그 앤 드롭하는 것입니다. 크롬이 자동으로 해당 페이지를 열어줍니다.
4. HTML 소스 코드 확인하는 방법
페이지를 보는 것뿐만 아니라 HTML 소스 코드까지 확인해야 한다면, 크롬에서 이를 손쉽게 지원합니다.
방법은 몇 가지가 있습니다. 가장 기본적인 방법은 크롬의 새 탭에서 HTML 파일을 연 후, 페이지에서 마우스 오른쪽 버튼을 클릭하고 메뉴에서 '페이지 소스 보기(View Page Source)'를 선택하는 것입니다.
더 인터랙티브한 도구를 사용해 변경 사항이 웹 페이지에 미치는 영향을 즉시 확인하고 싶다면, 크롬의 개발자 도구를 활용하세요.
- 새 탭에서 HTML 파일을 연 후, 창 오른쪽 상단의 세로 점 세 개 아이콘을 클릭합니다.
- 드롭다운 메뉴에서 '도구 더보기' > '개발자 도구'를 선택합니다.
- 화면 오른쪽의 'Elements(요소)' 탭으로 이동하면 웹 페이지의 상세한 소스 코드를 확인할 수 있습니다.
스마트폰에서 HTML 파일을 여는 방법
스마트폰에서도 다양한 방법으로 크롬에서 HTML 파일을 열 수 있습니다.
'연결 프로그램' 메뉴 사용하기
휴대폰에서 열고 싶은 HTML 파일을 찾아 클릭합니다. '연결 프로그램(Open with)' 메뉴가 나타나면, 웹 페이지를 볼 수 있는 앱 목록 중에서 선택할 수 있습니다. 여기서 Chrome을 선택하면 파일이 열립니다.
SD 저장소에서 HTML 파일 열기
휴대폰에서 크롬 브라우저를 실행하고 새 탭을 엽니다. 주소창에 file:///sdcard/를 입력하면 SD 저장소에 접근할 수 있습니다. 이후 열고 싶은 파일로 이동해 탭하면 내용을 확인할 수 있습니다.
HTML 이해하기
작은 팁들을 하나씩 익히고 HTML을 더 깊이 이해하면 코드와 텍스트 작업 시 훨씬 더 큰 자유를 얻을 수 있습니다. 좋은 예로 구글 문서에 HTML을 삽입하는 방법을 배우는 것이 있습니다.
HTML 파일을 다뤄본 적이 있나요? 어렵게 느껴지시나요? 아래 댓글로 여러분의 경험을 공유해 주세요.