🗓️4. style.css 작성하기

일정관리 프로그램 화면 디자인 적용하기

앞에서 index.jsp를 작성하면서 웹사이트의 전체 틀을 만들었습니다.

index.jsp에서는 화면을 다음 4개 영역으로 나누었습니다.

header → 제목 영역
nav → 메뉴 영역
section → 실제 내용 출력 영역
footer → 하단 영역

하지만 HTML만 작성하면 화면이 정리되지 않고 밋밋하게 보입니다.

그래서 이번 단계에서는 style.css를 작성해서
각 영역의 크기, 색상, 정렬을 지정해보겠습니다.

---

1. style.css가 필요한 이유

이번 문제에서는 시작화면이 다음처럼 구성되어야 합니다.

상단 제목
검은색 메뉴바
가운데 내용 영역
하단 footer 영역

이 화면을 만들기 위해서는 단순히 header, nav, section, footer 태그만 작성해서는 부족합니다.

각 영역에:

가로 크기
높이
배경색
글자색
가운데 정렬
메뉴 가로 배치

를 지정해야 합니다.

이 역할을 하는 파일이 바로:

style.css

입니다.

---

2. index.jsp와 style.css 연결 확인하기

앞에서 작성한 index.jsp에는 다음 코드가 있었습니다.

<link rel="stylesheet" type="text/css" href="style.css">

이 코드는:

현재 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: #ffffff;
}

FOOTER{
	height: 70px;
	background: rgb(128, 128, 128);
	color: #ffffff;
}

NAV{
	height: 30px;
	background: rgb(0, 0, 0);
}

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;
}

---

4. 한글 깨짐 방지 설정

@charset "UTF-8";

CSS 파일에서도 한글이 깨지지 않도록 UTF-8 설정을 해줍니다.

현재 프로젝트는 메뉴명과 제목이 모두 한글입니다.

따라서 JSP뿐만 아니라 CSS에서도 인코딩을 맞춰주는 것이 좋습니다.

---

5. 전체 글자 가운데 정렬

BODY, HTML {
	text-align: center;
}

이번 화면에서는 제목, 메뉴, 표 등이 전체적으로 가운데 정렬되어야 합니다.

그래서 BODY와 HTML 전체에:

text-align: center;

를 적용합니다.

이렇게 하면 기본적으로 화면 안의 글자들이 가운데 정렬됩니다.

---

6. 공통 영역 디자인 한 번에 적용하기

HEADER, NAV, SECTION, IFRAME, FOOTER {
	width: 100%;
	padding: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
}

현재 index.jsp에는 다음 영역이 있습니다.

HEADER
NAV
SECTION
IFRAME
FOOTER

이 영역들은 공통적으로 화면 가로 전체를 차지하고,
안쪽 여백을 가지며, 내용이 가운데 정렬되어야 합니다.

그래서 같은 속성을 한 번에 적용합니다.

---

width: 100%

width: 100%;

이 코드를 넣으면 각 영역이 브라우저 가로 폭을 꽉 채우게 됩니다.

만약 이 설정이 없으면 영역이 내용 크기만큼만 잡히거나,
화면 구성이 일정하지 않게 보일 수 있습니다.

---

padding: 15px

padding: 15px;

padding은 안쪽 여백입니다.

제목이나 메뉴 글자가 영역의 끝에 너무 붙으면 답답해 보이기 때문에
안쪽에 여백을 넣어줍니다.

---

display: flex

display: flex;

이번 화면에서는 제목과 메뉴가 가운데에 와야 합니다.

display: flex를 사용하면 가로, 세로 정렬을 쉽게 조정할 수 있습니다.

---

align-items와 justify-content

align-items: center;
justify-content: center;

이 두 코드는 display: flex와 함께 사용합니다.

align-items: center → 세로 가운데 정렬
justify-content: center → 가로 가운데 정렬

즉, 영역 안의 내용을 가운데에 배치하기 위해 사용합니다.

---

7. HEADER 디자인하기

HEADER{
	height: 30px;
	background: #ffffff;
}

HEADER는 프로그램 제목이 들어가는 영역입니다.

현재 화면에서는 상단에:

일정 관리 프로그램

제목이 출력됩니다.

그래서 header 영역의 높이를 지정하고,
배경색은 흰색으로 설정합니다.

---

8. NAV 디자인하기

NAV{
	height: 30px;
	background: rgb(0, 0, 0);
}

NAV는 메뉴 영역입니다.

현재 문제에서는 메뉴가 눈에 잘 보여야 하므로
메뉴바 배경을 검은색으로 설정합니다.

background: rgb(0, 0, 0);

이 코드는 검은색 배경을 의미합니다.

---

9. 메뉴 기본 여백 제거하기

NAV UL{
	margin: 0;
	padding: 0;
}

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;

으로 밑줄을 제거합니다.

결과적으로 검은색 메뉴바 위에 흰색 메뉴 글자가 출력됩니다.

---

12. SECTION 디자인하기

SECTION{
	background: #ffffff;
	border: 0;
}

SECTION은 실제 JSP 화면이 출력되는 영역입니다.

예를 들어 메뉴를 클릭하면:

reg.jsp
list.jsp
list_j.jsp
main.jsp

가 section 안에 표시됩니다.

여기서는 배경색을 흰색으로 설정하고,
테두리는 보이지 않도록 border: 0을 적용합니다.

---

13. IFRAME 높이 설정하기

SECTION IFRAME{
	height: 400px;
	border: 0;
}

iframe은 section 안에 다른 JSP 페이지를 보여주는 공간입니다.

이 공간의 높이가 너무 작으면
등록 화면이나 조회 표가 잘려 보일 수 있습니다.

그래서 기본 높이를:

height: 400px;

으로 설정합니다.

또한 iframe은 기본적으로 테두리가 보일 수 있으므로:

border: 0;

으로 테두리를 제거합니다.

---

14. FOOTER 디자인하기

FOOTER{
	height: 70px;
	background: rgb(128, 128, 128);
	color: #ffffff;
}

FOOTER는 화면 맨 아래 정보 영역입니다.

현재 프로젝트에서는 저작권 문구가 들어갑니다.

footer는 본문과 구분되도록 회색 배경을 사용하고,
글자가 잘 보이도록 흰색으로 설정합니다.

---

15. TABLE 가운데 정렬하기

TABLE {
	margin: auto;
}

앞으로 만들 list.jsp, reg.jsp, list_j.jsp에서는 표를 많이 사용합니다.

표가 왼쪽에 붙어 있으면 화면이 정리되지 않아 보입니다.

그래서:

margin: auto;

를 사용해 표를 가운데 정렬합니다.

---

16. 이번 style.css에서 해결한 문제

이번 CSS는 단순히 예쁘게 꾸미는 코드가 아닙니다.

현재 문제에서 요구하는 화면 구성을 맞추기 위해 필요한 코드입니다.

제목을 위에 배치하기
메뉴를 가로로 배치하기
메뉴바를 검은색으로 만들기
본문 영역을 확보하기
iframe 테두리 제거하기
표를 가운데 정렬하기
footer를 아래에 배치하기

즉, 문제 화면과 비슷하게 보이도록 각 영역의 디자인을 맞추는 작업입니다.

---

17. 현재까지의 작업 흐름

db.sql
→ 회원 테이블과 일정 테이블 생성

Util.java
→ Oracle DB 연결 준비

index.jsp
→ 전체 화면 틀 생성

style.css
→ 화면 디자인 적용

이제 다음 단계에서는 main.jsp를 작성해서
처음 실행했을 때 section 영역에 보여줄 기본 화면을 만들어보겠습니다.