📌웹 개발 기본

HTML / CSS / JavaScript 구조와 JSP의 역할

기초부터 기술 면접까지 커버하는 완전 정리

🧩 목차

웹의 3대 핵심 요소란?
HTML / CSS / JavaScript 간 역할 비교
정적 페이지 vs 동적 페이지
JSP란 무엇인가?
JSP의 동작 원리
기술 면접 대비 핵심 질문

✅ 1. 웹의 3대 핵심 요소란?

구성 요소	설명	대표 확장자
HTML	웹페이지의 구조를 담당 (뼈대📐)	`.html`
CSS	디자인과 레이아웃을 담당 (옷🎨)	`.css`
JavaScript	웹페이지에 동작과 반응을 추가 (근육💪)	`.js`

✅ 2. HTML / CSS / JavaScript 역할 비교

항목	HTML	CSS	JavaScript
기능	구조 정의	시각적 스타일	사용자 인터랙션
예시	`<h1>안녕</h1>`	`color: red;`	`alert('Hello');`
실행 위치	브라우저	브라우저	브라우저
특징	정적 요소	정적 스타일	동적 제어 가능

📌 예시: 아래 코드는 웹 구조 + 디자인 + 동작이 결합된 형태

html
복사편집
<!DOCTYPE html>
<html>
<head>
  <style>
    h1 { color: blue; }
  </style>
</head>
<body>
  <h1 onclick="alert('Hello!')">클릭하세요</h1>
</body>
</html>

✅ 3. 정적 페이지 vs 동적 페이지

구분	정적 페이지	동적 페이지
생성 방식	미리 작성된 HTML 사용	서버에서 실시간 생성
사용 기술	HTML, CSS, JS	JSP, PHP, ASP 등
변화 여부	고정된 내용	사용자/상황에 따라 변화
예시	회사 소개 페이지	게시판, 로그인 페이지

🎯 실무 포인트

정적 페이지는 속도는 빠르지만 내용이 고정됨
동적 페이지는 사용자 입력, DB 연동 등을 실시간으로 처리 가능

✅ 4. JSP란 무엇인가?

항목	설명
이름	Java Server Pages
역할	HTML 내에 Java 코드를 삽입하여 동적 웹페이지 생성
특징	`.jsp` 확장자 사용, 서버에서 Java 코드 실행 후 HTML 생성

🧠 JSP는 이렇게 작동한다!

사용자가 .jsp 페이지 요청
서버가 JSP를 서블릿(Java 클래스)으로 변환
Java 코드 실행 → HTML 결과 생성
브라우저에 HTML만 전달됨

✅ 5. JSP 동작 원리 (면접 준비 시 핵심)

[JSP 요청]
   ⬇️
[Tomcat 서버]
   ⬇️
[JSP → Servlet 변환]
   ⬇️
[Servlet 컴파일 → .class]
   ⬇️
[Java 코드 실행]
   ⬇️
[HTML 생성 → 브라우저 전달]

💡 면접 포인트

JSP는 브라우저에서 Java 실행❌, 서버에서 Java 실행⭕
JSP 파일은 결국 Servlet(Java)로 변환되어 처리된다.

✅ 6. 기술 면접 대비 핵심 질문 정리

질문	요점 답변
JSP의 역할은?	서버에서 Java 코드로 HTML을 동적으로 생성
정적 vs 동적 페이지?	정적은 고정된 HTML, 동적은 서버에서 HTML 생성
HTML/CSS/JS의 역할?	구조/디자인/동작 각각 분리되어 있음
JSP와 JavaScript 차이?	JSP는 서버 실행(Java), JS는 브라우저 실행

✅ 마무리 핵심 정리

🧱 HTML = 구조 (뼈대)
🎨 CSS = 디자인 (옷)
💬 JS = 동작 (인터랙션)
⚙️ JSP = 서버에서 Java로 동적 페이지 생성

📌 추천 실습

<%@ page contentType="text/html;charset=UTF-8" %>
<html>
<head><title>Hello JSP</title></head>
<body>
  <%
    String name = "JSP 개발자";
  %>
  <h1>안녕하세요, <%= name %>님!</h1>
</body>
</html>

🧪 실행 결과:

“안녕하세요, JSP 개발자님!” 이 HTML로 변환되어 브라우저에 출력됨

📁 Notion용 디자인 팁

각 블록을 구분해서 🟦 색상 헤더 또는 아이콘 사용
코드 블록은 언어 구분해서 (HTML, JSP, JS)
정리 포인트는 ✅ 이모지로 강조
면접 질문은 표 형식으로 모아두면 좋음

** 📌웹 개발 기본 **

🧩 목차

✅ 1. 웹의 3대 핵심 요소란?

✅ 2. HTML / CSS / JavaScript 역할 비교

📌 예시: 아래 코드는 웹 구조 + 디자인 + 동작이 결합된 형태

✅ 3. 정적 페이지 vs 동적 페이지

🎯 실무 포인트

✅ 4. JSP란 무엇인가?

🧠 JSP는 이렇게 작동한다!

✅ 5. JSP 동작 원리 (면접 준비 시 핵심)

💡 면접 포인트

✅ 6. 기술 면접 대비 핵심 질문 정리

✅ 마무리 핵심 정리

📌 추천 실습

🧪 실행 결과:

📁 Notion용 디자인 팁

📌웹 개발 기본