파일 타입과 안에 들어 있는 것

확장자가 컴퓨터에 이 파일을 어떻게 열지 알려줘요

⏱ 예상 ~4분

01 · 읽기

확장자(file extension, 점 뒤에 붙는 부분)는 그 파일에 어떤 타입의 내용이 들어 있는지, 그리고 어떤 프로그램으로 열어야 하는지 컴퓨터에 알려줘요.

💡 상상해 봐요확장자는 상자에 붙은 라벨 같아요. '깨지기 쉬움 — 유리' 라고 적힌 상자는 안에 뭐가 들었는지, 어떻게 다뤄야 하는지 알려주죠. .jpg 로 끝나는 파일은 컴퓨터에게 '이건 이미지야, 이미지 뷰어로 열어' 라고 알려주는 거예요.

핵심 정리

텍스트 파일(.txt, .md): 순수 텍스트, 어떤 텍스트 에디터로든 열 수 있어요
문서 파일(.pdf, .docx): 서식이 있는 문서
이미지(.jpg, .png, .gif, .svg): 시각적 콘텐츠
코드 파일(.html, .css, .js, .py, .ts): 컴퓨터에 주는 명령어
데이터 파일(.json, .csv, .xml): 구조화된 데이터
설정 파일(.env, .yml, .toml): 설정과 구성
YAML 파일(.yml, .yaml): 들여쓰기로 데이터를 정리하는 읽기 쉬운 설정 파일이에요. 시스템 설정, CI/CD 파이프라인, 앱 구성에서 자주 쓰여요

또 하나 중요한 개념: 코드 파일은 사실 특별한 확장자를 가진 텍스트 파일일 뿐이에요. .js 든 .html 이든 일반 텍스트 에디터로 열어서 그냥 읽을 수 있어요. 코드 안에는 신비롭거나 암호화된 게 없어요.

왼쪽의 파일과 오른쪽의 타입을 짝지어 보세요. 왼쪽에서 파일 하나를 누른 다음, 오른쪽에서 맞는 타입을 누르세요.

(이 섹션은 인터랙티브해요 — JavaScript를 켜 주세요.)

친구가 styles.css 라는 파일을 보내줬어요. 이 파일에는 뭐가 들어 있을까요?

일반 텍스트 에디터로 .js 파일을 열 수 있을까요?

⚠ 전체 인터랙티브 경험에는 JavaScript가 필요해요. JavaScript를 켜고 새로 고침해 주세요.

※ 이 사이트는 독립 운영되는 교육 프로젝트로, Anthropic의 공식 제품이 아니에요. Claude™ 는 Anthropic, PBC 의 상표예요.