정적 페이지
💡정적 페이지
<!DOCTYPE html>
<html>
<head>
<title>회사 소개</title>
</head>
<body>
<h1>우리 회사에 오신 걸 환영합니다!</h1>
<p>이 페이지는 항상 동일합니다.</p>
</body>
</html>- 서버에 저장된 HTML 파일을 그대로 전달
- 누가 요청하든 똑같은 내용이 반환됨
- HTML 안에 서버에서 채워 넣는 데이터가 없음
- ex. 회사 소개, 블로그 글 같은 고정 정보
➡ 즉, “항상 동일한 결과물을 보내는 페이지”
동적 페이지
💡동적 페이지
<!DOCTYPE html>
<html>
<head>
<title>User Info</title>
</head>
<body>
<h1 th:text="'이름: ' + ${name}"></h1>
<p th:text="'나이: ' + ${age}"></p>
</body>
</html>- 클라이언트의 요청이나 상황에 따라 서버가 데이터를 가공해서 HTML을 만들어 전달
- 같은 URL이어도 요청자나 조건에 따라 내용이 달라짐
- HTML 템플릿 안에 변수 같은 자리를 두고, 서버가 데이터를 채워서 보냄
- ex. 로그인 후 사용자 이름 표시, 쇼핑몰에서 “장바구니 목록” 보여주기
➡ 즉, “요청할 때마다 결과물이 달라질 수 있는 페이지”
'Front-end' 카테고리의 다른 글
| [HTML] 표준 HTML 구조 (1) | 2025.02.05 |
|---|---|
| 부트스트랩 (Bootstrap) feat. Card 컴포넌트 (0) | 2025.02.04 |
| HTML VS CSS (1) | 2025.02.03 |