🪑4. style.css 작성하기

독서실 자리관리 프로그램 화면 디자인 적용하기

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

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

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

하지만 HTML만 작성하면 화면이 기본 스타일로 출력되기 때문에
문제 화면처럼 정리되어 보이지 않습니다.

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

---

1. style.css가 필요한 이유

이번 독서실 자리관리 프로그램은 다음과 같은 화면 구성이 필요합니다.

상단 제목 영역
메뉴 영역
본문 출력 영역
하단 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: rgb(255, 205, 181);
	color: #ffffff;
}

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

NAV{
	height: 30px;
	background: rgb(254, 180, 7);
}

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 설정을 해줍니다.

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

따라서 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

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

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

---

7. HEADER 디자인하기

HEADER{
	height: 30px;
	background: rgb(255, 205, 181);
	color: #ffffff;
}

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

현재 화면에서는 상단에:

독서실 자리관리 프로그램

제목이 출력됩니다.

그래서 header 영역에 높이를 지정하고,
연한 주황색 배경과 흰색 글자를 적용합니다.

---

8. NAV 디자인하기

NAV{
	height: 30px;
	background: rgb(254, 180, 7);
}

NAV는 메뉴 영역입니다.

현재 메뉴는:

자리등록
자리현황
일별검색
학습자별이용료
홈으로

입니다.

메뉴 영역이 구분되어 보이도록 주황색 배경을 적용합니다.

---

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 태그는 링크이기 때문에 기본적으로 파란색 글자와 밑줄이 생깁니다.

하지만 메뉴바에서는 파란색 밑줄 링크처럼 보이면 어색합니다.

그래서 글자색을 흰색으로 바꾸고,
밑줄을 제거합니다.

---

12. SECTION 디자인하기

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

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

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

reg.jsp
list.jsp
search.jsp
list_jg.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(255, 128, 0);
	color: #ffffff;
}

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

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

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

---

15. TABLE 가운데 정렬하기

TABLE {
	margin: auto;
}

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

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

그래서:

margin: auto;

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

---

16. PRE 왼쪽 정렬하기

PRE {
	text-align: LEFT;
}

main.jsp에서는 프로그램 설명을 <pre> 태그로 작성합니다.

그런데 전체 화면은 가운데 정렬이 적용되어 있기 때문에
설명문까지 가운데로 정렬되면 읽기 불편할 수 있습니다.

그래서 PRE만 따로 왼쪽 정렬을 적용합니다.

---

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

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

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

제목을 위에 배치하기
메뉴를 가로로 배치하기
메뉴 영역 색상 적용하기
본문 영역 확보하기
iframe 테두리 제거하기
표를 가운데 정렬하기
설명문을 왼쪽 정렬하기
footer를 아래에 배치하기

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

---

18. 현재까지의 작업 흐름

db.sql
→ 학습자 테이블과 독서실 테이블 생성

index.jsp
→ 전체 화면 틀 생성

style.css
→ 화면 디자인 적용

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