안녕, 오늘은 JSP를 사용해서 멋진 홈페이지를 만들어볼 거야. 이제부터 홈페이지를 만들 때 꼭 필요한 화면 구조를 만들어 보자. 아마 너도 GNB, LNB, BODY, HEADER, FOOTER 같은 단어들을 들어봤을 거야. 뭔가 복잡하게 느껴질 수도 있지만, 하나씩 천천히 따라오면 금방 이해할 수 있을 거야. 시작해 볼까?
🏠 1. 화면 구조를 왜 나눌까?
음, 집을 지을 때를 생각해 보자. 집은 보통 거실, 주방, 화장실, 침실 같은 구조로 나뉘어 있지? 이렇게 나누는 이유는 공간을 효율적으로 사용하고, 필요한 곳을 쉽게 찾기 위해서야. 웹페이지도 마찬가지야. 구조를 나누면 유지보수가 쉽고, 원하는 기능을 바로 추가할 수 있어.
🎨 2. 화면 구조 알아보기
- Header: 보통 페이지의 맨 위에 있는 부분으로, 로고나 메뉴 같은 중요한 것들이 있어.
- GNB (Global Navigation Bar): 전체 메뉴, 즉 "여기저기 이동하는 길"이라고 생각하면 돼.
- LNB (Local Navigation Bar): GNB와 달리, 현재 위치와 관련된 메뉴야.
- Body: 본문 부분으로, 우리가 보여주고 싶은 내용이 들어가.
- Footer: 페이지 맨 아래에 있는 영역으로, 저작권 정보나 연락처 같은 걸 넣는 곳이야.
이제, JSP로 이 모든 걸 구현해 보자!
✍️ 3. 코드 예제: HTML + JSP
아래는 간단한 JSP 파일을 만들어서 화면 구조를 잡는 방법이야. 우선 기본적인 구조부터 시작하자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSP 구조 만들기</title>
<style>
body { font-family: Arial, sans-serif; margin: 0; padding: 0; }
header, footer { background: #333; color: white; text-align: center; padding: 10px 0; }
nav { background: #555; color: white; padding: 10px; }
.gnb, .lnb { display: inline-block; margin: 0 10px; }
.body { padding: 20px; }
</style>
</head>
<body>
<!-- Header -->
<header>
<h1>내 멋진 홈페이지</h1>
<p>Header 영역: 로고, 제목</p>
</header>
<!-- Global Navigation Bar (GNB) -->
<nav class="gnb">
<ul>
<li><a href="#" style="color: white;">Home</a></li>
<li><a href="#" style="color: white;">About</a></li>
<li><a href="#" style="color: white;">Contact</a></li>
</ul>
</nav>
<!-- Local Navigation Bar (LNB) -->
<nav class="lnb">
<ul>
<li><a href="#" style="color: white;">Submenu 1</a></li>
<li><a href="#" style="color: white;">Submenu 2</a></li>
</ul>
</nav>
<!-- Body -->
<div class="body">
<h2>본문 영역</h2>
<p>여기는 본문 내용이 들어갈 자리야.</p>
</div>
<!-- Footer -->
<footer>
<p>Copyright © 2024, Chuljoo's Website</p>
</footer>
</body>
</html>
🌟 4. 왜 JSP로 해야 할까?
JSP는 동적인 웹페이지를 만드는 데 유용해. 위의 HTML 구조를 JSP로 변환하면, 내용을 반복적으로 작성하지 않고 효율적으로 관리할 수 있어. 예를 들어, 헤더와 푸터는 모든 페이지에서 공통으로 사용되니까, include 태그를 사용해 분리할 수 있어!
🛠️ 5. JSP로 모듈화하기
헤더, 푸터 등을 따로 파일로 나누고 include를 이용해 불러오는 방법이야.
header.jsp
<header>
<h1>내 멋진 홈페이지</h1>
<p>Header 영역: 로고, 제목</p>
</header>
footer.jsp
<footer>
<p>Copyright © 2024, Chuljoo's Website</p>
</footer>
main.jsp
<%@ include file="header.jsp" %>
<div class="body">
<h2>본문 영역</h2>
<p>여기는 본문 내용이 들어갈 자리야.</p>
</div>
<%@ include file="footer.jsp" %>
이제 모든 파일을 연결하면, 훨씬 깔끔하고 관리하기 쉬운 코드가 완성돼!
🤩 6. 정리하며...
어때? GNB, LNB, BODY, HEADER, FOOTER로 나눠서 홈페이지를 구성하는 게 생각보다 쉽지? 웹개발은 요리랑 비슷해. 재료(코드)를 잘 나누고, 순서대로 배치하면 훌륭한 요리가 완성되는 것처럼, 우리도 멋진 웹페이지를 만들 수 있어.
다음 단계는 뭐야?
다음엔 이 구조에 동적 데이터를 추가하는 방법을 알아볼 거야. 예를 들어, 사용자의 이름이나 방문 시간을 표시하는 거지. 재밌겠지?
'개발' 카테고리의 다른 글
| Eclipse 단축키로 개발 속도 UP! 🎉 (1) | 2025.01.15 |
|---|---|
| [VS Code]Visual Studio Code 단축키로 코딩을 춤추듯이! (0) | 2025.01.15 |
| 서버 개발자가 알려주는 파일 찾기 비법서: grep, find와 함께하는 모험 (0) | 2024.12.27 |
| 🎩Java와 JavaScript의 switch-case 이야기: 조건에 따라 길을 고르는 마법! (0) | 2024.12.18 |
댓글