📂 프론트엔드 파일 구조 설명

 

📂 프론트엔드 파일 구조 설명

파일 유형역할 설명

*.html	구조(Structure) 웹페이지의 뼈대. 화면에 보이는 요소들을 배치
*.css	디자인(Style) HTML 요소에 색상, 폰트, 배경, 레이아웃 등 꾸미기 역할
*.js	동작(Logic) 버튼 클릭, API 호출, 화면 동적 업데이트 등 기능 담당

 

1️⃣ HTML - 구조 (Structure)

• 역할: 웹페이지의 뼈대를 담당
• 설명: 화면에 보이는 텍스트, 버튼, 입력창 등 요소들의 배치를 정의
• 우리 예시: index.html, survey.html

<button>설문 시작하기</button>
<div id="questionBox"></div>

---

2️⃣ CSS - 디자인 (Style)

• 역할: HTML 요소에 스타일 적용
• 설명: 색상, 폰트, 배경, 레이아웃 등을 꾸며서 보기 좋게 만듦
• 우리 예시: style.css

body { background-color: black; color: white; }
button { border: 1px solid #fff; }

---

3️⃣ JavaScript - 동작 (Logic)

• 역할: 웹페이지에 기능과 동작을 추가
• 설명: API 호출, 버튼 클릭 처리, 화면 동적 업데이트 등
• 우리 예시: main.js, survey.js

fetch('/questions/1')
    .then(response => response.json())
    .then(data => console.log(data));

---

🎯 정리 표

구분 역할 설명 예시 파일

HTML	구조	화면에 보이는 뼈대	index.html, survey.html
CSS	디자인	색상, 레이아웃 등 스타일 적용	style.css
JS	동작	기능 처리, API 연동	main.js, survey.js

---

💡 왜 이렇게 나눌까?

1. 유지보수가 쉽다
2. 디자인 수정 시 CSS만 변경
3. 기능 수정 시 JS만 변경
4. 협업 시 역할 분담이 명확해짐 (디자이너 vs 개발자)

---

✅ 이렇게 나누면 효율적이고 확장성 있는 개발이 가능!