[2026-05-12] CSS 박스 모델 완벽 해부 및 JSP 기반 사원 관리 시스템 연동

웹 디자인의 공간을 지배하는 'CSS 박스 모델(Box Model)'을 해부하고, 이를 기반으로 데이터베이스(오라클)에서 가져온 사원 정보를 웹 화면에 렌더링하는 실전 JSP 연동을 수행했다. 백엔드의 견고한 로직 위에 프론트엔드의 세련된 옷을 입히는 풀스택(Full-stack) 개발의 묘미를 경험한 시간이었다.

 

1. CSS 박스 모델: 화면 분할과 여백의 미학 모든 HTML 요소는 네모난 상자(Box)로 이루어져 있으며, 이를 감싸는 3겹의 보호막을 정밀하게 제어하는 기법을 실습했다.

• Margin (외부 여백): 요소와 요소 사이의 바깥 간격을 벌린다. 특히 margin: 0px auto;를 통한 화면 가운데 정렬 기법은 모든 웹사이트 레이아웃의 기본 뼈대가 됨을 확인했다.
• Padding (내부 여백): 테두리와 내부 콘텐츠(글자, 이미지) 사이의 안쪽 간격이다. 숨을 쉴 수 있는 공간을 주어 UI의 가독성을 높인다.
• Border (테두리): 두께, 선의 종류(solid, dotted, dashed, double 등), 색상을 지정한다. 딱딱한 직사각형을 부드러운 타원형으로 깎아내는 border-radius를 활용해 현대적인 웹 디자인의 디테일을 추가했다.
• 속기법 (Shorthand): margin: 10px 20px 30px 20px;처럼 시계 방향(Top, Right, Bottom, Left)으로 한 번에 값을 지정하여 CSS 코드를 최적화하는 작법을 몸에 익혔다.

2. JSP와 JDBC의 만남: 사원 데이터(EMP) 동적 렌더링 프론트엔드 스타일링을 넘어, 백엔드 데이터를 웹 화면에 출력하는 JSP(JavaServer Pages)의 본질을 다루었다.

• DAO와 VO의 완벽한 재사용성: 사원 정보(emp2)와 부서 정보(dept2)를 조인(JOIN)하여 가져오는 복잡한 쿼리를 empDAO에 캡슐화했다. 추출된 데이터는 empVO 객체에 담겨 프론트엔드로 전달된다. 자바 데스크톱(Swing) 환경에서 설계했던 아키텍처가 웹 환경에서도 단 한 줄의 수정 없이 그대로 적용된다는 점에서, 로직을 철저히 분리하는 객체 지향 설계(MVC 패턴의 기초)의 위력을 재확인했다.
• JSP 스크립틀릿(Scriptlet)의 활용: HTML 문서 상단 <% %> 영역에서 empDAO를 호출해 List를 받아오고, <tbody> 내부에서 자바의 향상된 for문을 돌려 <tr>과 <td> 태그를 동적으로 무한 생성해 내는 서버 사이드 렌더링을 구현했다.

3. CSS와 데이터의 결합 (Data Visualization) 가져온 사원 목록 테이블에 앞서 배운 박스 모델과 선택자를 전면 적용했다.

• border-collapse: collapse;로 테이블의 겹치는 선을 깔끔하게 정리하고, 요소에 box-shadow를 주어 표가 화면에서 살짝 떠 있는 듯한 입체감을 부여했다.
• 특히 어제 배운 구조 선택자 nth-child(even)을 활용해 표의 짝수 행마다 배경색(#F2F2F2)을 다르게 주어 데이터의 가독성을 극대화하는 '얼룩말 패턴(Zebra-striping)' 디자인을 완성했다. 순수 데이터가 직관적인 UI로 탈바꿈하는 순간이었다.