AI가 처음이라면 여기서 시작하세요 → 입문 1. ChatGPT와 Codex, 무엇이 다를까요?

마지막 확인: 2026년 11월 10일

폴더·파일·HTML의 관계 이해하기

한 줄 요약

폴더·파일·HTML의 관계 이해하기
어디에 저장됐는지 알면, 수정하고 다시 여는 일이 쉬워져요.

개념 그림

🖍️ 그림이에요 (실제 화면과 조금 다를 수 있어요)

따라 하기

먼저 연습 폴더를 열어보세요

첫 웹페이지 수업에서 만든 codex-practice 폴더를 사용해요. 아직 만들지 않았다면 먼저 첫 수업을 완료하세요.

Mac에서는 Finder, Windows에서는 파일 탐색기에서 폴더를 여세요. Codex에서 선택한 작업 경로와 같은 위치인지 확인해요.

파일은 역할에 따라 나눌 수 있어요

HTML은 화면의 내용을, CSS는 색과 배치를, JavaScript는 클릭과 저장 같은 동작을 표현할 때 사용해요. 작은 연습에서는 한 HTML 안에 함께 넣을 수도 있어요.

실제 파일을 확인하는 순서

1. 파일 이름과 확장자를 확인하세요

index.html과 index.html.txt는 다른 파일이에요. 확장자가 숨겨져 있다면 Mac은 Finder 설정의 고급에서, Windows는 파일 탐색기의 보기 메뉴에서 확장자 표시 옵션을 확인하세요. 메뉴 이름은 운영체제 버전에 따라 달라질 수 있어요.

2. 브라우저에서 같은 파일을 여세요

index.html을 두 번 누르세요. 편집기가 열리면 연결 프로그램에서 브라우저를 고르세요. Codex가 알려준 경로와 브라우저가 연 파일 위치가 같은지 확인해요.

3. 파일을 옮길 때는 참조 관계를 보세요

여러 파일로 나뉘었다면 HTML만 옮기지 말고 관련 CSS·JavaScript·이미지도 같은 구조로 옮기세요. 상대 경로는 현재 파일 위치를 기준으로 계산돼요.

복사해서 쓰는 요청

현재 파일 구조 이해하기

파일 연결 문제 점검하기

자주 막히는 부분

색이나 이미지가 사라졌다면

🖍️ 그림이에요 (실제 화면과 조금 다를 수 있어요)

파일 경로는 프로젝트마다 달라요. 이 그림의 이름을 그대로 적용하지 말고 내 폴더의 실제 파일 이름을 기준으로 Codex에 확인하세요.

확인 문제: CSS와 이미지가 별도 파일일 때 HTML 파일만 다른 폴더로 옮겨도 항상 같을까요?

답: “연결 경로와 관련 파일을 함께 확인해야 한다”
분리된 파일은 참조 경로로 연결돼요. HTML만 옮기면 디자인이나 이미지가 사라질 수 있어요.

참고한 공식 자료

• Codex 시작 안내 · 한국어