프로젝트에서 보기 →

프론트엔드, 백엔드 개발자를 위한 HTML5, CSS3 강의 12강 - 실습을 위한 파일 구조 생성하기

태그
기타 html5 강좌 파일구조 실습
시작일
종료일
수정일

https://www.youtube.com/watch?v=ATJy8fGmsWQ

description: |-

1. 이건 꼭 알아야 한다[^1]

[? 질문] 실습용 HTML 문서를 만들기 위해, 처음에 어떤 파일/폴더 구조를 어떻게 준비해야 하는가[^5]
[= 답] 먼저 만들 웹문서(화면/메뉴) 구조를 **계층(루트→하위→세부 페이지)**로 정리한 뒤, 그에 맞춰 **폴더(예: notice, member)**를 만들고 각 폴더에 해당 HTML 파일(예: list.html, detail.html, login.html, sign-up.html)을 생성한다.[^6]

[? 질문] HTML 파일을 한 폴더에 전부 넣지 않고 그룹(폴더)으로 나누는 이유는 무엇인가[^7]
[= 답] 페이지/파일 수는 20개, 100개 이상으로 금방 늘 수 있어 한 폴더에 몰아넣으면 관리가 어려워지므로, 성격이 같은 것끼리 묶어(예: 고객/회원 관련) 구조적으로 관리하기 위함이다.[^7]

[? 질문] 파일 이름은 어떤 규칙으로 정하는 것이 좋은가 (특히 단어 구분자)[^12]
[= 답] 여러 단어로 된 파일명은 관습적으로 **대시(-)**를 사용해 구분한다(예: sign-up.html). 언더바 등도 가능하지만 HTML/CSS 문서에서의 관습을 따르는 것이 좋다.[^12]

2. 큰 그림[^1]

이 강의는 실제로 웹문서(HTML)를 만들기 전에, “화면/메뉴를 파일로 어떻게 쪼개고” “그 파일들을 어떤 폴더 구조로 배치할지”를 먼저 설계·준비하는 과정을 다룬다.[^5] 이어서 Windows 탐색기에서 작업 폴더를 만들고, Visual Studio Code의 ‘Open Folder’ 기능으로 폴더를 연 다음, 폴더/파일을 생성하는 실습 절차를 보여준다.[^9]

  • 화면(문서) 구조를 계층으로 정리한 뒤, 그 구조가 곧 파일/폴더 구조의 출발점이 된다.[^6]
  • 파일이 많아지므로, 한 폴더에 몰아넣지 말고 **성격별로 그룹핑(폴더 분리)**해서 관리한다.[^7]
  • 파일명 표기에는 관습이 있으며, 특히 여러 단어는 **대시(-)**로 구분하는 방식을 기본으로 삼는다.[^12]

3. 하나씩 살펴보기[^1]

3.1 “이제는 문서를 만들기 위해 파일을 생각해야 한다”: 출발점 설정[^5]

📸 0:05

강사는 “오늘부터는 우리가 실제로 문서를 만들기 위해서 파일을 생각해보자”는 말로 강의를 시작한다.[^5] 즉, 단순히 HTML 태그 문법을 배우는 단계를 넘어, 실제 결과물을 만들기 위해 필요한 **파일 준비(파일명/경로/개수/구조)**로 관심을 옮기는 전환점임을 밝힌다.[^5]

이어서 “어떤 것부터 시작해야 될까?”라는 질문을 던지며, 가장 먼저 파일을 준비해야 하고, 파일명과 경로명을 어떻게 할지(어떤 파일들을 가지고 HTML을 만들어갈지)가 궁금해질 것이라고 말한다.[^2] 이 강의(및 다음 내용)에서 그 부분을 알아보겠다고 예고한다.[^3]

3.2 ‘메뉴를 클릭하면 어디로 가야 하는가’에서 페이지/파일 구조를 도출하기[^4]

📸 0:30

강사는 수강생에게 “이걸 HTML 문서로 만들어라”는 과제를 받았다고 가정하고, 화면(또는 사이트)에서 메뉴를 클릭했을 때 각각 어디로 이동해야 하는지를 떠올리게 한다.[^4] 예를 들어 “맨 위에서 (어떤 메뉴)를 클릭하면 여기로, (다른 항목)을 클릭하면 여기로”처럼 메뉴마다 목적지가 있고, 또 어떤 항목을 클릭하면 여러 단계로 이동이 생길 수 있음을 언급한다.[^4]

이 상태는 머릿속으로만 생각하면 복잡하고 “머리가 아프다”고 표현하면서, 문제를 풀기 위해서는 먼저 구조를 정리해야 한다고 말한다.[^4] 그래서 “정리해 보면 이렇게 생겼다”는 식으로, 전체 사이트/문서가 보통 계층형 구조를 가진다는 점을 보여준다.[^6]

  • 루트(root)에서 바로 갈 수 있는 페이지가 있고[^6]
  • 루트에서 들어간 하위 영역 안에서 다시 이동 가능한 페이지가 있으며[^6]
  • 이런 식으로 “대부분 계층으로 생겼다”는 것을 강조한다.[^6]

여기서 중요한 전제를 짚는다: 우리가 보는 메뉴/화면 구조의 “각각 하나하나가 다 파일이 아니”라는 점이다.[^6] 즉, 화면에 보이는 요소(메뉴 항목, 리스트 아이템 등)와 실제로 만들어야 하는 HTML 파일은 1:1로 딱 떨어지지 않을 수 있고, 어떤 것은 파일 단위 페이지가 되고 어떤 것은 페이지 내부 구성 요소일 수 있다는 맥락을 깔아둔다.[^6]

3.3 파일 이름을 무엇으로 할 것인가: 페이지를 파일로 ‘구체화’하기[^6]

📸 1:05

강사는 “파일이면 결국 파일명을 생각해야 한다”는 흐름으로 넘어가, 실제로 예시 파일명을 만들어 제시한다.[^6] 원문 발화가 다소 부정확하게 전사되어 있지만, 전체 맥락상 강사가 예로 든 구성은 다음과 같은 의도를 가진다:

  • 루트에 **대표 진입 페이지(보통 index.html)**가 있다.[^6]
  • 공지/게시(Notice) 영역에는 목록과 상세 같은 페이지가 존재한다.[^6]
  • 회원/계정(Member) 영역에는 로그인, 회원가입 같은 페이지가 존재한다.[^6]

강사는 이런 식으로 파일을 “일단 이렇게 만들어 놓고” 작업을 시작해도 되겠다는 뉘앙스로 말하며, 처음 만드는 사람에게는 낯설 수 있지만 우선은 형태를 잡는 것이 중요하다고 이어간다.[^6]

3.4 한 폴더에 다 넣으면 왜 문제가 되는가: 파일 증가와 관리 난이도[^7]

📸 2:08

파일을 만들기 시작하면, 자연스럽게 “문서를 보관할 폴더가 필요”하다는 상황이 온다고 말한다.[^7] 그래서 폴더 하나를 만들어 그 안에 파일을 “쭉” 넣는 방식이 떠오를 수 있는데, 강사는 곧바로 “그것도 아닌 것 같다”고 판단한다.[^7]

그 이유로, 파일은 생각보다 빨리 늘어난다고 설명한다.[^7]

  • 지금은 몇 개처럼 보여도[^7]
  • “20개에서 또 100개 이상 될 수도 있겠죠”라고 말하며[^7]
  • 파일들을 한 ‘통’(한 폴더)에 모아 사는(넣는) 것은 문제가 된다고 정리한다.[^7]

결론은 “그럼 어떻게 할까요? 그룹핑하면 되겠죠”이다.[^7] 즉 비슷한 것끼리 묶어서 폴더로 분리하는 것이 관리 측면에서 합리적이라는 방향을 제시한다.[^7]

[!IMPORTANT] 파일 구조 논리: “페이지 설계”가 커질수록 “폴더 구조”는 필수가 된다
강사는 파일 수가 20개, 100개 이상으로 늘어날 수 있음을 전제로, 처음부터 성격별로 폴더를 나누는 습관이 필요하다고 강조한다.[^7]

3.5 그룹핑 예시: customer/계정(회원) 성격으로 묶기[^8]

📸 2:39

강사는 “대충 그룹핑해보니까”라는 말로 예시를 든다.[^8] 구체적으로는 ‘커스터머(고객)’ 혹은 ‘계정 관련’ 등, 고객/회원과 관련된 파일들을 묶어 하나의 그룹(폴더)로 두는 식의 분리를 암시한다.[^8]

이어 “괜찮은가요?”라고 묻고, 이어서 “사실 이거보다 이렇게 놓으셨습니다” 같은 표현으로, 지금 제시한 방식은 일단의 예시이며 더 나은 구조 논의(가이드)는 뒤에서 프로젝트 과정(설계 등)을 다루며 더 이야기하겠다고 선을 긋는다.[^8] 즉 이 강의에서는 **문서를 준비하는 포커스(실습을 위한 기본 구조 만들기)**에 집중한다고 정리한다.[^8]

3.6 실습 준비: 탐색기에서 작업 폴더 만들기(루트 폴더)와 위치 선정[^9]

📸 3:37

이제 실제로 파일을 “어떻게 준비할 것인가”로 넘어가며, 파일/폴더를 만들기 위해 먼저 탐색기에서 작업 위치를 선택한다고 말한다.[^9]

  • 드라이브를 선택하고[^9]
  • 강사 본인은 예시로 D 드라이브에 어떤 작업 폴더(프로젝트를 담을 상위 폴더)를 만들어 사용한다고 말한다.[^9]
  • 그 안쪽에 이제 폴더를 만들 것이라고 안내한다.[^9]

폴더 이름에 대해 “루트(root)라는 이름은 안 될 거고요”라는 식으로 언급하며[^9], 최상위 작업 폴더(프로젝트 루트)가 HTML 문서들을 준비해놓고 서비스할 수 있는 기본 데이터가 될 것이라고 설명한다.[^9]

+++ 상세 맥락(원문 뉘앙스) 강사는 ‘루트’라는 표현을 “프로젝트의 최상위 폴더”라는 뜻으로 쓰면서도, 실제 폴더명을 꼭 root로 지으라는 의미는 아니라고 말하는 흐름이다.[^9] 즉 “최상위 폴더를 하나 잡고, 그 안에서 실습 파일을 관리한다”가 핵심이다.[^9] +++

3.7 Visual Studio Code로 폴더 열기: Open Folder 절차[^10]

📸 4:13

강사는 파일을 탐색기에서 하나하나 만드는 대신, “바로 비주얼 스튜디오(코드)라는 녀석을 통해서 파일을 만들 것”이라고 말한다.[^10]

구체 절차는 다음 흐름으로 제시된다.

  • 상단 메뉴에서 File을 누른다.[^10]
  • 그 안에 Open Folder 메뉴가 있다.[^10]
  • Open Folder를 클릭하고, 아까 준비한 작업 폴더(프로젝트 루트 폴더)를 선택한다.[^10]
  • “폴더 선택”을 누르면, 좌측 탐색기 영역에 그 폴더 내용이 표시된다.[^10]
  • 처음에는 폴더가 비어 있으므로 비어 보일 것이라고 설명한다.[^10]

여기까지가 **실습 환경 연결(프로젝트 폴더를 에디터에서 여는 단계)**이며, 이후부터 에디터에서 폴더/파일을 생성한다.[^10]

3.8 VS Code에서 파일 만들기: index.html 생성과 확장자 주의[^11]

📸 4:43

강사는 VS Code 탐색기(좌측 패널)에서 만들 수 있는 도구가 “두 가지” 있다고 말한다.[^11]

  • 하나는 폴더 만들기[^11]
  • 하나는 파일 만들기[^11]

먼저 파일 만들기 버튼을 눌러 **index.html**을 추가하겠다고 한다.[^11] 그리고 HTML 파일 확장자인 .html을 정확히 써야 한다는 취지로 “확장자에 꼭 …(써야)” 같은 식으로 강조한다.[^11]

파일을 만들고 엔터를 치면, 해당 파일을 편집할 수 있는 편집기가 열리는 흐름을 보여준다.[^11]

[!TIP] 첫 파일은 index.html부터 강사는 프로젝트 루트에 index.html을 먼저 만들고, 그 다음에 폴더/하위 페이지들을 구성하는 흐름을 시연한다.[^11]

3.9 목표 폴더 구조 제시: notice/member 폴더와 각 페이지 파일들[^11]

📸 4:43

강사는 “이런 식으로 폴더 만들고 파일들 만들 건데요, 구조는 어떻게 만들 거야? 이렇게 만든 거죠”라고 말하며[^11], 아까 앞에서 설명한 계층 구조를 실제 폴더 구조로 옮긴 예시를 제시한다.[^11]

제시된 대표 구조는 다음과 같은 형태다.

  • notice 폴더[^11]
    • list.html (공지/게시 목록)[^11]
    • detail.html (공지/게시 상세)[^11]
  • member 폴더[^11]
    • login.html (로그인)[^11]
    • sign-up.html (회원가입)[^11]

강사는 이제 실제로 폴더를 만들기 시작한다.[^11]

3.10 폴더 만들 때의 선택(선택 위치) 주의사항: 바깥/안쪽에 생성되는 문제[^12]

📸 5:37

강사는 notice 폴더를 만들고, 이어서 member 폴더를 만드는 과정을 보여주며, 폴더/파일 생성 시 “현재 선택된 위치”가 중요하다고 경고한다.[^12]

  • 어떤 폴더를 선택한 채로 새 폴더를 만들면, 그 폴더 “안쪽에” 새 폴더가 만들어질 수 있다.[^12]
  • 따라서 바깥(상위) 레벨에 만들고 싶다면, 바깥을 선택하거나(루트 레벨을 선택하거나) 적절히 선택을 풀고 생성해야 한다는 취지로 설명한다.[^12]

이는 초보자가 자주 겪는 실수(원치 않는 중첩 폴더 생성)를 막기 위한 실무 팁으로 제시된다.[^12]

3.11 파일 생성 실습: notice에 list/detail, member에 login/sign-up 만들기[^12]

📸 5:37

강사는 폴더를 만든 뒤 각 폴더를 선택하고 파일 만들기를 통해 파일을 추가한다.[^12]

  • notice 폴더를 선택한 뒤
    • list.html을 만든다.[^12]
    • 이어서 detail.html을 만든다.[^12]
  • member 폴더를 선택한 뒤
    • login.html을 만든다.[^12]
    • sign-up.html을 만든다.[^12]

특히 회원가입 파일명에서 “두 개의 단어로 만들어진 파일”의 구분을 위해 무엇을 쓰느냐는 흐름으로 넘어가며, 파일명 규칙을 강조한다.[^12]

3.12 파일명 관습: 단어 구분은 대시(-)를 기본으로[^12]

📸 5:37

강사는 “두 개의 단어로 만들어진 파일인 경우 구분하기 위해 뭘 쓰냐면 반드시 대시를 쓰는 것을 기본”으로 한다고 말한다.[^12]

그 이유로, HTML/CSS 관련 문서를 만드는 곳(웹 문서 작성 관습)에서 구분자로 대시를 쓰는 관습이 있다고 설명한다.[^12]

  • 언더바(underscore) 등 다른 방식도 가능하긴 하지만[^12]
  • “그런 관습을 따르지 않는 것이기 때문에” (즉, 관습적으로는 덜 권장)
  • “표기법을 맞춰주면 좋겠죠”라고 결론짓는다.[^12]

정리하면 강사가 제시하는 파일명 스타일은 다음과 같은 방향이다.

  • 단일 단어: login.html[^12]
  • 두 단어 이상: sign-up.html (대시로 연결)[^12]

[!TIP] 파일명 스타일을 초기에 통일하라 강사는 관습(컨벤션)을 따라 대시를 사용해 표기법을 맞추는 것이 좋다고 말하며, 이는 프로젝트가 커졌을 때 일관성/가독성을 높이기 위한 기본기라는 맥락이다.[^12]

3.13 마무리: 구조는 만들었고, 내용 채우기는 다음 강의에서[^13]

📸 6:49

강사는 “이렇게 해서 우리가 일단 파일과 구조를 만들었습니다”라고 말하며 이번 강의의 범위를 명확히 종료한다.[^13]
이어서 “이 안에다가 뭔가를 좀 채워야 될 것 같은데요. 그 작업은 다음 주(다음 강의)에 하겠습니다”라고 예고한다.[^13] 마지막으로 시청 인사로 마무리한다.[^13]

4. 핵심 통찰[^1]

  1. [h 웹문서 제작의 첫 단계는 ‘코딩’ 이전에 ‘파일/폴더 구조화’다.] 강의는 HTML 문서를 만들기 시작할 때 파일명/경로/개수 같은 운영 단위를 먼저 정리해야 혼란이 줄어든다고 전개한다.[^5]
  2. [h 메뉴/화면을 계층 구조로 정리하면 파일 구조가 자연스럽게 나온다.] 루트에서 하위로 내려가는 이동 구조를 정리하는 것이 곧 폴더/파일 설계의 뼈대가 된다.[^6]
  3. [h 파일은 급격히 늘어난다 → 그룹핑(폴더 분리)은 선택이 아니라 필수.] 20개에서 100개 이상으로 확장될 수 있다는 전제를 깔고, 한 폴더 몰아넣기의 한계를 지적한다.[^7]
  4. [m 도구(VS Code)에서의 ‘선택 위치’가 폴더/파일 생성 결과를 좌우한다.] 잘못 선택하면 폴더가 의도치 않게 중첩 생성될 수 있으므로 생성 전 현재 위치를 확인해야 한다.[^12]
  5. [m 사소해 보이는 파일명 규칙(대시 사용)이 장기적으로 일관성과 협업 효율을 만든다.] HTML/CSS 문서 작성 관습에 맞춰 표기법을 통일하라고 조언한다.[^12]
  • 실행 항목
    • 프로젝트 루트 폴더를 먼저 만들고, VS Code에서 Open Folder로 연다.[^10]
    • 최상위에 index.html을 만들고, 기능/도메인 단위로 폴더를 나눈 뒤 하위 페이지 파일을 생성한다.[^11]
    • 두 단어 이상 파일명은 sign-up.html처럼 **대시(-)**로 통일한다.[^12]
    • 새 폴더/파일 생성 전, VS Code 탐색기에서 현재 선택된 폴더가 어디인지 확인한다.[^12]

5. 헷갈리는 용어 정리 (해당 시에만)[^1]

루트(root): 프로젝트에서 최상위에 해당하는 폴더(기준 폴더)를 의미하며, 여기서부터 하위 폴더/파일이 계층적으로 배치된다.[^6]
그룹핑(grouping): 비슷한 성격의 파일들을 같은 폴더로 묶어 관리하는 것.[^7]
Open Folder(VS Code): Visual Studio Code에서 특정 폴더를 작업 단위로 열어, 그 내부의 파일/폴더를 탐색·생성·편집하는 기능/메뉴.[^10]
대시(-): 파일명에서 여러 단어를 연결/구분할 때 사용하는 하이픈(예: sign-up.html). 강사는 웹 문서 파일명 관습으로 이를 권장한다.[^12]

참고(콘텐츠 정보)[^1]

  • 제목: 프론트엔드, 백엔드 개발자를 위한 HTML5, CSS3 강의 12강 - 실습을 위한 파일 구조 생성하기[^1]
  • 채널: 뉴렉처[^1]
  • 길이: 7분 6초[^1]
  • 링크: https://www.youtube.com/watch?v=ATJy8fGmsWQ[^1]
  • 키워드(제공): html5 강좌, 파일구조, 실습, css, 웹문서, 프로그래밍[^1]

[^1]: 유튜브 영상 "프론트엔드, 백엔드 개발자를 위한 HTML5, CSS3 강의 12강 - 실습을 위한 파일 구조 생성하기"(뉴렉처, 7:06) 및 사용자가 제공한 메타데이터/전사문. [^2]: @[00:13] "…파일을 준비를 해야… 경로명을 어떻게 하고… 몇 개의 파일을 가지고 html을 만들어 볼지…" [^3]: @[00:23] "…다음… 좀 알아 보도록 할게요" [^4]: @[00:30] "여러분들한테 이거를 html 문서로 만들어 라고 하는거예요… 클릭하면 여기로…" [^5]: @[00:05] "…실제 문서를 만들기 위해서 파일… 생각해 보려고…" [^6]: @[01:05] "…루트에서… 대부분은 이런 식으로… 계층…" / @[01:18] "…각각 하나하나가 다 파일 아니잖아요" / @[01:29] "…파일 이름을…" [^7]: @[02:08] "…폴더… 파일을 다… 어떻게 될까요…" / @[02:32] "…20개… 100개 이상…" / @[02:37] "…그룹핑…" [^8]: @[02:39] "…있는 것끼리… 그룹핑… 커스터머… 계정 관련… 묶어서…" / @[03:10] "…가이드… 프로젝트 과정…" [^9]: @[03:37] "…드라이브 선택… d 드라이브… 폴더…" / @[04:04] "…html 문서를… 서비스할 수 있는… 기본 데이터…" [^10]: @[04:13] "…(VS Code) 파일… 오픈 폴더…" / @[04:25] "…루트 폴더를 선택…" / @[04:33] "…폴더 선택… 내용이…" [^11]: @[04:43] "…도구가 두가지… 폴더… 파일…" / @[04:54] "…인덱스…(index.html)…" / @[05:11] "…구조는… 노티스, 멤버…" [^12]: @[05:37] "…선택… 안쪽에… 바깥에… 조심…" / @[05:51] "…list… detail…" / @[06:05] "…sign-up…" / @[06:18] "…두 개의 단어… 대시…" / @[06:31] "…html… css… 관습…" [^13]: @[06:49] "…파일과 구조를 만들었습니다" / @[06:58] "…작업은 다음…" / @[07:01] "…고생하셨습니다"

← 프로젝트에서 보기