2026. 6. 1. 14:38ㆍ2🥐 제과점 프로그램
🎨 제과점 매출관리 프로그램 화면 디자인 적용하기
앞에서 index.jsp를 작성하면서 웹사이트의 전체 틀을 만들었습니다.
index.jsp에서는 화면을 다음 4개 영역으로 나누었습니다.
header → 제목 영역
nav → 메뉴 영역
section → 실제 내용 출력 영역
footer → 하단 영역
하지만 HTML만 작성하면 화면이 단순하게 출력됩니다.
그래서 이번 단계에서는 style.css를 작성하여
제과점 매출관리 프로그램에 맞는 화면 디자인을 적용해보겠습니다.
1. style.css가 필요한 이유
이번 문제에서는 다음과 같은 화면이 요구됩니다.
상단 프로그램 제목
메뉴 영역
본문 출력 영역
하단 저작권 영역또한 문제 예시 화면을 보면 각 영역이 서로 다른 색상과 크기로 구분되어 있습니다.
따라서 각 영역의
배경색
글자색
높이
정렬
여백등을 지정해야 합니다.
이 역할을 담당하는 파일이
style.css입니다.
style.css에서는 화면의 디자인만 담당하며,
header
nav
section
footer
table
button등의 모양을 설정하게 됩니다.
※ 실기시험에서는 정확한 색상이 제공되지 않는 경우가 많으므로, 예시 화면과 비슷한 형태로 구현하면 됩니다.
2. index.jsp와 style.css 연결 확인하기
index.jsp에는 다음 코드가 있습니다.
<link rel="stylesheet" type="text/css" href="style.css">
이 코드는
index.jsp에 style.css 디자인을 적용하겠다
는 의미입니다.
즉
index.jsp → 화면 구조
style.css → 화면 디자인
으로 역할을 분리하는 것입니다.
3. style.css 전체 코드
@charset "UTF-8";
BODY, HTML {
text-align: center;
}
HEADER, NAV, SECTION, IFRAME, FOOTER {
width: 100%;
padding: 15px;
display: flex;
align-items: center;
justify-content: center;
}
HEADER{
height: 30px;
background: rgb(224, 158, 160);
color: #ffffff;
}
FOOTER{
height: 70px;
background: rgb(255, 128, 192);
color: #ffffff;
}
NAV{
height: 30px;
background: rgb(254, 201, 215);
}
NAV UL{
margin: 0;
padding: 0;
}
NAV LI{
display: inline-block;
width: 170px;
}
NAV A{
color: #ffffff;
text-decoration: none;
}
SECTION{
background: #ffffff;
border: 0;
}
SECTION IFRAME{
height: 400px;
border: 0;
}
TABLE {
margin: auto;
}
PRE {
text-align: LEFT;
}
4. 한글 깨짐 방지 설정
@charset "UTF-8";
CSS 파일에서도 UTF-8 인코딩을 사용하도록 설정합니다.
현재 프로젝트는 한글 메뉴와 제목을 사용하므로
인코딩을 맞춰주는 것이 좋습니다.
5. 전체 글자 가운데 정렬
BODY, HTML {
text-align: center;
}
이번 문제에서는
프로그램 제목
메뉴
표
등이 대부분 가운데 정렬되어야 합니다.
그래서 BODY와 HTML 전체를 가운데 정렬합니다.
6. 공통 영역 디자인 적용하기
HEADER, NAV, SECTION, IFRAME, FOOTER {
width: 100%;
padding: 15px;
display: flex;
align-items: center;
justify-content: center;
}
| 문법 | 의미 |
| width:100% | 화면의 가로 전체 사용 |
| padding:15px | 콘텐츠와 테두리 사이의 안쪽 여백 |
| display:flex | Flex 레이아웃 사용 |
| align-items:center | 세로 가운데 정렬 |
| justify-content:center | 가로 가운데 정렬 |
현재 index.jsp에는
HEADER
NAV
SECTION
IFRAME
FOOTER
영역이 있습니다.
이 영역들은 모두
가로 전체 사용
안쪽 여백
가운데 정렬
이 필요합니다.
그래서 공통 속성을 한 번에 적용합니다.
7. HEADER 디자인하기
HEADER{
height: 30px;
background: rgb(224, 158, 160);
color: #ffffff;
}
HEADER는 프로그램 제목이 출력되는 영역입니다.
제과점 매출관리 프로그램
이라는 제목이 표시됩니다.
현재 문제 예시 화면처럼
분홍색 배경
흰색 글자
가 되도록 설정합니다.
8. NAV 디자인하기
NAV{
height: 30px;
background: rgb(254, 201, 215);
}
NAV는 메뉴 영역입니다.
현재 메뉴는
판매등록
제과현황
판매현황
매출현황
홈으로
로 구성됩니다.
메뉴가 잘 보이도록 연분홍색 배경을 지정합니다.
9. 메뉴 기본 여백 제거하기
NAV UL{
margin: 0;
padding: 0;
}
ul 태그는 기본적으로 브라우저가 자동으로 여백을 넣어줍니다.
그래서 그대로 사용하면 메뉴가 왼쪽으로 밀리거나 정렬이 어긋날 수 있습니다.
따라서
margin:0;
padding:0;을 사용하여 기본 여백을 제거합니다.
| NAV UL | nav 안의 ul 선택 |
| margin | 바깥 여백 |
| padding | 안쪽 여백 |
| 0 | 여백 제거 |
10. 메뉴를 가로로 배치하기
NAV LI{
display: inline-block;
width: 170px;
}
li 태그는 원래 세로로 출력됩니다.
하지만 현재 메뉴는
판매등록 제과현황 판매현황 매출현황 홈으로
처럼 가로로 나란히 배치되어야 합니다.
그래서
display: inline-block;
을 사용합니다.
또한 메뉴 간격을 일정하게 유지하기 위해
width: 170px;
를 지정합니다.
11. 메뉴 글자 꾸미기
NAV A{
color: #ffffff;
text-decoration: none;
}
a 태그는 기본적으로
파란색 글자
밑줄
이 표시됩니다.
하지만 메뉴에서는 보기 좋지 않기 때문에
color: #ffffff;
로 흰색 글자로 변경하고
text-decoration: none;
으로 밑줄을 제거합니다.
문법 설명
NAV A{
color: #ffffff;
text-decoration: none;
}
| NAV A | NAV 안의 A 태그 선택 |
| color | 글자 색상 |
| #ffffff | 흰색 |
| text-decoration | 글자 꾸밈 |
| none | 꾸밈 제거 |
NAV A는 무엇일까?
NAV A는
NAV 태그 안에 있는
A 태그를 선택한다.는 의미입니다.
예를 들어
<nav>
<a href="reg.jsp">판매등록</a>
</nav>에서
NAV A는 <a> 태그를 선택하게 됩니다.
12. SECTION 디자인하기
SECTION{
background: #ffffff;
border: 0;
}
SECTION은 실제 화면이 출력되는 영역입니다.
여기에
판매등록
제과현황
판매현황
매출현황
화면이 표시됩니다.
배경은 흰색으로 하고
테두리는 제거합니다.
문법 설명
SECTION{
background: #ffffff;
border: 0;
}| SECTION | section 태그 선택 |
| background | 배경색 지정 |
| #ffffff | 흰색 |
| border | 테두리 지정 |
| 0 | 테두리 제거 |
background는 무엇일까?
background: #ffffff;는
배경색을
흰색으로 지정한다.는 의미입니다.
border는 무엇일까?
border: 0;는
테두리를 제거한다.는 의미입니다.
왜 사용할까?
SECTION은 실제 화면이 출력되는 영역입니다.
여기에는
판매등록
제과현황
판매현황
매출현황화면이 표시됩니다.
따라서 내용이 잘 보이도록
배경은 흰색으로 지정하고
불필요한 테두리는 제거합니다.최종 해석
SECTION{
background: #ffffff;
border: 0;
}는
SECTION 영역의 배경색을 흰색으로 지정하고
기본 테두리를 제거한다.는 의미입니다.
13. IFRAME 높이 설정하기
SECTION IFRAME{
height: 400px;
border: 0;
}
iframe은 다른 JSP 화면을 출력하는 공간입니다.
높이가 너무 작으면
판매현황 표
매출현황 표
가 잘릴 수 있습니다.
그래서 충분한 높이인
height: 400px;
를 지정합니다.
문법 설명
SECTION IFRAME{
height: 400px;
border: 0;
}| SECTION IFRAME | SECTION 안의 IFRAME 선택 |
| height | 높이 지정 |
| 400px | 높이 400픽셀 |
| border | 테두리 지정 |
| 0 | 테두리 제거 |
SECTION IFRAME은 무엇일까?
SECTION IFRAME는
SECTION 태그 안에 있는
IFRAME 태그를 선택한다.는 의미입니다.
height는 무엇일까?
height: 400px;는
IFRAME의 높이를
400픽셀로 지정한다.는 의미입니다.
border는 무엇일까?
border: 0;는
IFRAME의 테두리를 제거한다.는 의미입니다.
왜 사용할까?
IFRAME은 다른 JSP 화면을 출력하는 공간입니다.
예를 들어
main.jsp
reg.jsp
list.jsp
list_j.jsp
list_jg.jsp파일들이 IFRAME 안에 표시됩니다.
높이가 너무 작으면
판매현황 표
매출현황 표가 잘려서 보일 수 있습니다.
따라서 충분한 높이를 지정해줍니다.
최종 해석
SECTION IFRAME{
height: 400px;
border: 0;
}는
SECTION 안의 IFRAME 높이를 400px로 지정하고
기본 테두리를 제거한다.는 의미입니다.
14. FOOTER 디자인하기
FOOTER{
height: 70px;
background: rgb(255, 128, 192);
color: #ffffff;
}
footer는 화면 맨 아래 영역입니다.
여기에는
Copyright (c) 2025 ...
문구가 출력됩니다.
본문과 구분되도록 진한 분홍색 배경과 흰색 글자를 사용합니다.
문법 설명
FOOTER{
height: 70px;
background: rgb(255, 128, 192);
color: #ffffff;
}
| FOOTER | footer 태그 선택 |
| height | 높이 지정 |
| 70px | 높이 70픽셀 |
| background | 배경색 지정 |
| rgb(255,128,192) | 분홍색 계열 |
| color | 글자 색상 지정 |
| #ffffff | 흰색 |
height는 무엇일까?
height: 70px;는
FOOTER 영역의 높이를
70픽셀로 지정한다.는 의미입니다.
background는 무엇일까?
background: rgb(255, 128, 192);는
FOOTER의 배경색을 지정한다.는 의미입니다.
※ 실기시험에서는 정확한 색상값보다 화면이 구분되도록 표현하는 것이 중요합니다.
color는 무엇일까?
color: #ffffff;는
FOOTER 안의 글자 색상을
흰색으로 지정한다.는 의미입니다.
왜 사용할까?
FOOTER는 화면 맨 아래에 위치하는 영역입니다.
보통
Copyright © 2025 ...
All Rights Reserved.와 같은 저작권 문구를 출력합니다.
따라서 본문 영역과 구분될 수 있도록 배경색과 글자색을 지정합니다.
최종 해석
FOOTER{
height: 70px;
background: rgb(255, 128, 192);
color: #ffffff;
}는
FOOTER 영역의 높이를 70px로 지정하고
배경색과 글자색을 설정하여
하단 저작권 영역을 꾸민다.는 의미입니다.
15. TABLE 가운데 정렬하기
TABLE {
margin: auto;
}
앞으로 만들
제과현황
판매현황
매출현황
화면은 모두 표(Table)를 사용합니다.
표를 화면 가운데 정렬하기 위해
margin: auto;
를 사용합니다.
문법 설명
TABLE{
margin: auto;
}| TABLE | table 태그 선택 |
| margin | 바깥 여백 |
| auto | 자동 계산 |
margin은 무엇일까?
margin: auto;는
좌우 여백을 자동으로 계산한다.는 의미입니다.
브라우저가 남은 공간을 자동으로 계산하여
왼쪽 여백
오른쪽 여백을 동일하게 만들어 줍니다.
왜 사용할까?
앞으로 만들
제과현황
판매현황
매출현황화면은 모두 표(Table)를 사용합니다.
표를 기본 상태로 출력하면 보통 왼쪽에 붙어 보이기 때문에
margin: auto;를 사용하여 화면 가운데에 배치합니다.
최종 해석
TABLE{
margin: auto;
}는
TABLE을 화면 가운데에 정렬하기 위해
좌우 여백을 자동으로 설정한다.는 의미입니다.
16. PRE 태그 정렬하기
PRE {
text-align: LEFT;
}
main.jsp에서는 프로그램 설명을 작성할 예정입니다.
설명 문장은 왼쪽 정렬이 읽기 편하므로
text-align: left;
를 적용합니다.
문법 설명
PRE{
text-align: left;
}| PRE | pre 태그 선택 |
| text-align | 글자 정렬 |
| left | 왼쪽 정렬 |
PRE는 무엇일까?
<pre>
프로그램 설명
작성 순서
주의 사항
</pre>는
입력한 내용 그대로 출력하는 태그입니다.
줄바꿈과 공백이 그대로 유지되기 때문에
프로그램 설명이나 안내문을 작성할 때 자주 사용합니다.
text-align은 무엇일까?
text-align: left;는
글자를 왼쪽으로 정렬한다.는 의미입니다.
왜 사용할까?
main.jsp에서는 프로그램 설명을 출력합니다.
예를 들어
프로그램 작성순서
1. 테이블 생성
2. 데이터 입력
3. 화면 구현과 같은 안내 문장은 가운데 정렬보다 왼쪽 정렬이 읽기 편합니다.
그래서
text-align: left;를 적용합니다.
최종 해석
PRE{
text-align: left;
}는
PRE 태그 안의 내용을
왼쪽 정렬하여 보기 쉽게 출력한다.는 의미입니다.
17. 현재까지의 작업 흐름
db.sql
→ 테이블 생성
Util.java
→ Oracle 연결
index.jsp
→ 전체 화면 틀
style.css
→ 화면 디자인 적용
이제 다음 단계에서는
main.jsp
를 작성하여 프로그램 설명 화면을 만들어 보겠습니다. 🚀
(다음 포스팅: 04. main.jsp 작성하기 - 제과점 매출관리 프로그램 설명 화면 만들기)
'2🥐 제과점 프로그램' 카테고리의 다른 글
| 🥐6. reg.jsp 작성하기 (0) | 2026.06.01 |
|---|---|
| 🥐5. main.jsp 작성하기 (0) | 2026.06.01 |
| 🥐3. index.jsp 작성하기 (0) | 2026.06.01 |
| 🥐2. DB 생성 흐름 (0) | 2026.06.01 |
| 🥐1. 제과점 프로그램 요구사항 분석 (0) | 2026.06.01 |