[JSP] 기본 문법: 로그인 페이지 만들기 (+HTML, CSS)
이전 내용
[JSP] 이클립스에서 JSP 파일 만들어 실행하기
이전 내용 [JSP] JSP 개념, IDEJSP란? ◆ JSP 정의 JSP는 Java 기반의 서버측 웹 개발 기술로, 동적인 웹 페이지를 생성하는 데 사용된다. HTML에 Java 코드를 삽입할 수 있는 기능을 통해, 개발자는 보다
puppy-foot-it.tistory.com
※ 구글링을 통해 정말 많은 블로그와 사이트에서 도움을 받았는데, 여기저기 켜놓고 찾다가 실수로 인터넷 창 X를 눌러버려서 다 날아갔습니다ㅠㅠ 도움을 주신 많은 블로거 분들, 운영자분들 감사합니다!
JSP 기본 문법
JSP 페이지는 기본적으로 HTML과 Java 코드로 구성되며, 확장자는 .jsp다.
예를 들어 아래와 같은 jsp 코드가 있다고 하자.
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>JSP 예제</title>
</head>
<body>
</body>
</html>
이를 구분하자면 아래와 같다.
◆ 지시어
JSP의 전반적인 설정 (예: 페이지 정보, 언어, encoding 등)을 정의.
앞의 코드에서 지시어를 풀어서 설명하자면
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
1. language="java"
JSP 페이지에서 사용할 프로그래밍 언어를 설정한다. 여기서는 java로 설정되어 있으며, 이는 JSP가 Java 언어를 사용하여 코드를 실행한다는 것을 의미한다.
2. contentType="text/html; charset=UTF-8"
- contentType: 이 속성은 JSP 페이지가 반환하는 콘텐츠의 유형을 정의한다.
- text/html: 반환되는 데이터가 HTML 형식이라는 것을 나타낸다.
- charset=UTF-8: 페이지의 문자 인코딩을 UTF-8로 지정하여 다양한 문자를 올바르게 표현할 수 있도록 한다. 이는 국제화 및 다국어 지원에 중요한 요소다.
3. pageEncoding="UTF-8"
JSP 소스 파일 자체의 문자 인코딩을 정의하는 속성. UTF-8 인코딩을 사용하면, JSP 파일에 포함된 모든 문자열 및 문자가 UTF-8 형식으로 저장되고 해석된다. 이는 다양한 언어의 문자를 지원하기 위해 중요하다.
앞서, 지시어에서 contentType="text/html 라고 지정했으므로, 하단의 <html> 부터 </html> 까지는 HTML의 구조와 규칙을 따라 작성하면 된다. (즉, HTML 코드를 저 안에다 삽입하면 된다.) 물론, HTML 내에 CSS 및 JavaScript와 같은 스타일과 스크립트도 포함될 수 있다.
그럼, 앞서 작성했던 로그인 페이지에 JSP 파일 내에서 HTML과 CSS를 수정 및 추가하여 페이지를 좀 더 꾸며보도록 한다.
(jsp 관련된 기능은 추후 다뤄볼 예정)
HTML 부분 꾸미기
코드를 하단과 같이 수정했다.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Login</title>
</head>
<body>
<div class="login-wrapper">
<h2>Login</h2>
<form method="post" action="url" id="login-form">
<input type="text" name="userName" placeholder="Email">
<input type="password" name="userPassword" placeholder="Password">
<label for="remember-check">
<input type="checkbox" id="remember-check">아이디 저장하기
</label>
<input type="submit" value="Login">
</form>
</div>
</body>
</html>
이를 실행해보면 다음과 같은 화면이 출력된다.
각 요소들에 대한 설명은 아래와 같다.
1. <head>
설명: HTML 문서의 머리 부분을 정의. 이곳에는 문서의 메타 정보, 스타일 시트, 스크립트 링크 등이 포함된다.
- 문서 제목을 정의하는 <title>
- 문자 집합을 설정하는 <meta>
- CSS와 JavaScript 파일을 링크하는 <link>와 <script> 등
2. <body>
설명: 웹 페이지의 본문을 정의. 사용자에게 보여지는 모든 콘텐츠가 이 태그 안에 들어간다.
텍스트, 이미지, 비디오, 링크 등 다양한 콘텐츠 요소를 포함.
3. <meta>
설명: 문서의 메타 정보를 정의합니다. <head> 태그 안에 위치하며, 제목, 문자 인코딩, 뷰포트 설정 등에 사용된다.
- 문자 집합 설정: <meta charset="UTF-8">
- 페이지 설명: <meta name="description" content="웹 페이지 설명을 여기에 작성합니다.">
- 뷰포트 설정: <meta name="viewport" content="width=device-width, initial-scale=1.0">
4. <title>
설명: 문서의 제목을 정의. 브라우저의 제목 표시줄이나 탭에 표시된다.
웹 페이지의 주제를 간단히 나타내며, 검색 엔진에서도 중요한 요소로 작용.
5. <div>
설명: 문서 내에서 블록 레벨 요소를 그룹화하는 데 사용. 주로 CSS 스타일링이나 레이아웃을 조정할 때 쓰인다.
특정 영역으로 콘텐츠를 묶어주며, 레이아웃을 조정하는 데 유용합니다.
예시:
<div class="container">
<h1>제목</h1>
<p>본문 내용입니다.</p>
</div>
6. <form>
설명: 사용자로부터 정보를 입력받기 위한 양식을 정의. 다양한 입력 요소들을 포함할 수 있는 컨테이너다.
- action: 양식 데이터가 전송될 URL을 지정.
- method: 데이터 전송 방식을 정의. 일반적으로 GET 또는 POST 사용.
예시:
<form action="/submit" method="post">
<!-- 양식 요소들 -->
</form>
7. <label>
설명: 양식의 입력 요소에 대한 설명이나 이름을 정의. 사용자의 입력을 유도하는 데 사용된다.
- label for: 해당 라벨이 연결된 입력 요소의 id를 지정. 이로 인해 라벨을 클릭하면 해당 입력 상자가 활성화된다. 이 속성의 값은 연결할 입력 요소의 id와 일치해야 한다. 사용자 경험을 향상시키며, 접근성을 개선한다.
예시:
<label for="username">사용자 이름:</label>
<input type="text" id="username" name="username">
보다 자세한 html 태그 및 문법은 나무위키에 상세하게 나와있으니 참고.
HTML/태그
HTML은 웹 브라우저 마다 지원하는 태그가 조금씩 다르며, 같은 태그라도 작동하는 방법이 다르지만 대체로 비슷한
namu.wiki
CSS
◆ CSS 란?
CSS(Cascading Style Sheets, 계단식 스타일 시트)는 웹 페이지의 스타일과 레이아웃을 정의하는 데 사용되는 스타일 시트 언어다. 주로 HTML 문서와 함께 사용되며, 사용자에게 보여지는 콘텐츠의 시각적인 표현을 조정하는 데 중요한 역할을 한다.
[CSS의 주요 기능]
- 스타일 지정: 글꼴, 색상, 여백, 간격 등 다양한 시각적 요소를 조정하여 페이지의 외관을 향상시킨다.
- 레이아웃 관리: 요소의 배치와 정렬을 조정하여 웹 페이지의 구조를 설계한다.
- 반응형 디자인: 화면 크기나 장치에 따라 콘텐츠의 표시 방식이 자동으로 조정되도록 설정할 수 있다.
[CSS 문법]
CSS는 선택자(selector)와 선언 블록(declaration block)으로 구성된다.
selector {
property: value;
}- 선택자: 어떤 HTML 요소에 스타일을 적용할지를 정의한다. 예를 들어, h1, .class-name, #id-name 등이 있다.
- 선언 블록: 중괄호 {}로 감싸진 부분으로, 속성(property)과 값(value)의 쌍이 포함된다. 여러 속성은 세미콜론(;)으로 구분.
★ 선택자
CSS 선택자는 다양한 방식으로 요소를 선택할 수 있다.
- 요소 선택자: 특정 HTML 요소를 선택
- 클래스 선택자: 특정 클래스 속성을 가진 요소를 선택(클래스는 '.' 으로 시작)
- ID 선택자: 특정 ID 속성을 가진 요소를 선택 (ID는 #으로 시작)
- 자식 선택자: 특정 요소의 자식 요소를 선택
[CSS 적용 방법]
CSS는 웹 페이지에 여러 방법으로 적용할 수 있다.
- 인라인 스타일: HTML 요소 내에 직접 스타일을 정의
- 내부 스타일 시트: HTML 문서의 <head> 섹션에 <style> 태그를 사용하여 스타일을 설정
- 외부 스타일 시트: 별도의 CSS 파일을 만들어 HTML 문서에 링크하여 스타일을 적용한다. 이 방식이 가장 일반적이며 권장된다.
<인라인 스타일>
<h1 style="color: red;">인라인 스타일 예제</h1>
<내부 스타일 시트>
<head>
<style>
body {
background-color: lightgray;
}
</style>
</head>
<외부 스타일 시트> - 권장됨
<head>
<link rel="stylesheet" href="styles.css"> <!-- 외부 CSS 파일 링크 -->
</head>
[CSS 속성]
CSS 속성은 웹 페이지의 다양한 스타일을 정의하는 데 사용된다.
- 색상 및 배경: color, background-color, background-image
- 글꼴: font-family, font-size, font-weight
- 박스 모델: margin, padding, border
- 레이아웃: display, position, flex, grid
[JSP에서 CSS 사용]
JSP에서 CSS를 사용할 때는 HTML과 동일한 적용 방법(인라인 스타일, 내부 스타일 시트, 외부 스타일 시트)을 사용할 수 있는데, 역시 외부 스타일 시트 방법(따로 CSS 파일 생성)이 권장된다고 한다.
그러면 이번에는 style.css 라는 파일을 생성해 본다.
login.jsp 파일이 생성된 폴더에서 오른쪽 마우스 [New] - [CSS File] 클릭 후, 파일명을 입력한 뒤 finish 버튼 클릭
style.css 파일이 잘 생성되었다.
이제 여기에 CSS 구조와 문법에 맞춰 login.html을 꾸며주면 된다.
@charset "UTF-8";
*{
padding: 0;
margin: 0;
border: none;
}
body{
font-size: 14px;
font-family: 'Roboto', sans-serif;
}
.login-wrapper{
width: 400px;
height: 350px;
padding: 40px;
box-sizing: border-box;
}
.login-wrapper > h2{
font-size: 24px;
color: #6A24FE;
margin-bottom: 20px;
}
#login-form > input{
width: 100%;
height: 48px;
padding: 0 10px;
box-sizing: border-box;
margin-bottom: 16px;
border-radius: 6px;
background-color: #F8F8F8;
}
#login-form > input::placeholder{
color: #D2D2D2;
}
#login-form > input[type="submit"]{
color: #fff;
font-size: 16px;
background-color: #6A24FE;
margin-top: 20px;
}
#login-form > input[type="checkbox"]{
display: none;
}
#login-form > label{
color: #999999;
}
#login-form input[type="checkbox"] + label{
cursor: pointer;
padding-left: 26px;
background-image: url("checkbox.png");
background-repeat: no-repeat;
background-size: contain;
}
#login-form input[type="checkbox"]:checked + label{
background-image: url("checkbox-active.png.svg");
background-repeat: no-repeat;
background-size: contain;
}◆ 코드 설명
위 코드의 구조를 설명하자면
1. 초기 설정: 모든 HTML 요소의 기본 여백(padding)과 외부 여백(margin)을 0으로 설정하고, 경계(border)를 없앤다. 이렇게 하여 다양한 브라우저에서 기본 스타일에 차이가 없게 만든다.
* {
padding: 0;
margin: 0;
border: none;
}
2.Body 스타일: 본문 텍스트의 기본 글꼴 크기를 14픽셀로 설정하고, 'Roboto'라는 글꼴을 사용한다. 해당 글꼴이 없을 경우, 기본 sans-serif 글꼴이 사용된다.
body {
font-size: 14px;
font-family: 'Roboto', sans-serif;
}
3. 로그인 박스 스타일
3-1. login-wrapper 클래스와 연결 (.login_wrapper, '.'은 클래스 의미)
login-wrapper 클래스를 가진 요소의 너비를 400픽셀, 높이를 350픽셀로 설정한다. 내부 여백(padding)은 40픽셀이며, box-sizing: border-box를 통해 여백과 경계를 포함한 크기를 고려한다.
.login-wrapper {
width: 400px;
height: 350px;
padding: 40px;
box-sizing: border-box;
}
3-2. 헤더 스타일: 로그인의 제목(h2)의 글꼴 크기를 24픽셀로 설정하고, 색상(#6A24FE)을 잔파란색으로 지정한다. 아래쪽 여백은 20픽셀이다.
.login-wrapper > h2 {
font-size: 24px;
color: #6A24FE;
margin-bottom: 20px;
}
4. 입력 필드 스타일
4-1. 입력 필드 스타일: login-form 내의 모든 입력 필드는 너비를 100%로 설정하여 부모 요소의 너비에 맞추고, 높이를 48픽셀로 설정한다. 내부 여백은 왼쪽과 오른쪽에 각각 10픽셀이다. 아래쪽 여백은 16픽셀이며, 모서리를 6픽셀 둥글게 하고, 배경 색상은 연한 회색(#F8F8F8)으로 설정한다.
#login-form > input {
width: 100%;
height: 48px;
padding: 0 10px;
box-sizing: border-box;
margin-bottom: 16px;
border-radius: 6px;
background-color: #F8F8F8;
}
4-2. 플레이스홀더 스타일: 입력 필드의 플레이스홀더(text가 입력되지 않은 상태에서 보여지는 텍스트) 색상을 #D2D2D2로 설정하여 연한 회색으로 표시한다.
#login-form > input::placeholder {
color: #D2D2D2;
}
5. 제출 버튼 스타일: 제출 버튼의 글자 색상을 흰색(#fff)으로 설정하고, 글꼴 크기를 16픽셀로 지정한다. 배경 색상은 #6A24FE(잔파란색)이며, 위쪽 여백은 20픽셀이다.
#login-form > input[type="submit"] {
color: #fff;
font-size: 16px;
background-color: #6A24FE;
margin-top: 20px;
}
6. 체크박스 스타일
6-1. 체크박스 숨기기: 기본 체크박스를 숨기기 위해 display: none;을 사용한다.
#login-form > input[type="checkbox"] {
display: none;
}
6-.2 라벨 스타일: 체크박스의 라벨 색상을 #999999로 설정한다.
#login-form > label {
color: #999999;
}
6-3. 라벨과 체크박스 관계: 체크박스와 연결된 라벨에 대해 스타일을 추가한다. 커서를 포인터로 지정하고 왼쪽에 26픽셀의 내부 여백을 추가한다. 기본 배경 이미지는 "checkbox.png"로 설정되어 있다.
#login-form input[type="checkbox"] + label {
cursor: pointer;
padding-left: 26px;
background-image: url("checkbox.png");
background-repeat: no-repeat;
background-size: contain;
}
6-4. 체크된 상태의 라벨: 체크된 상태의 체크박스에 대해 라벨의 배경 이미지를 "checkbox-active.png.svg"로 변경한다.
#login-form input[type="checkbox"]:checked + label {
background-image: url("checkbox-active.png.svg");
background-repeat: no-repeat;
background-size: contain;
}※ checkbox-active.png.svg 가 나오게 하려면, 해당 이미지를 다운 받아서 css 파일이 있는 폴더에 넣어줘야 한다.
필자의 경우, 구글에서 check-ative를 검색하여 이미지를 다운 받았다.
https://generatoricon.com/icons/checkbox-active-91622/
앞서 코드 설명을 참고해 디자인적인 요소를 수정하고 싶을 때 수정할 수 있다. 그런데 이 부분은 현재 login.html을 보고나서 수정하는 것이 더 좋을 거 같으므로 그 이후에 수정하도록 한다.
login.jsp와 style.css 연결하기
그리고 css 수정하기
이제 html 역할을 하는 login.jsp에 코드를 한 줄 추가해주면 된다.
<link> 태그의 rel과 href을 추가해주면 되는데, <head> 와 </head> 태그 사이에 넣어주면 된다.
- rel: 연결 관계
- href: 연결 대상
<link rel="stylesheet" href="style.css"> <!-- 외부 CSS 파일 링크 -->
만약, css 파일이 해당 폴더의 css 라는 하위폴더 안에 있을 경우
<link rel="stylesheet" href="css/style.css">
그리고나서 F11을 눌러 login.jsp를 실행해주면
그러나, 로그인 박스가 구석에서 출력되고, 색상이나 일부 요소를 바꾸고 싶다.
그래서 body 부분을 수정해서 해당 로그인 박스가 가운데에 출력되도록 수정하고, 배경 색상을 다른 색상으로 바꾸고
login 박스의 경우 박스 테두리를 설정해준다.
body {
font-size: 14px;
font-family: 'Roboto', sans-serif;
display: flex;
justify-content: center; /* 수평 중앙 정렬 */
align-items: center; /* 수직 중앙 정렬 */
height: 100vh; /* 전체 화면 높이 */
background-color: #f0f0f0; /* 배경 색상 설정 */
}
.login-wrapper {
width: 400px;
height: 350px;
padding: 40px;
box-sizing: border-box;
background-color: white; /* 로그인 박스 배경 색상 */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 박스 그림자 */
border: 2px solid #ccc; /* 회색 실선 테두리 추가 */
border-radius: 8px; /* 모서리 둥글게 */
}
그리고나서 다시 login.jsp를 F11 버튼을 누르면
이렇게 바뀐 것을 확인할 수 있다.
다음 내용
[JSP] 회원가입 페이지 만들기(+ HTML, CSS)
이전 내용 [JSP] 기본 문법: 로그인 페이지 만들기 (+HTML, CSS)이전 내용 [JSP] 이클립스에서 JSP 파일 만들어 실행하기이전 내용 [JSP] JSP 개념, IDEJSP란? ◆ JSP 정의 JSP는 Java 기반의 서버측 웹 개발
puppy-foot-it.tistory.com