몽땅뚝딱 개발자

[JAVA/Spring Boot] TodoList 만들기(3) - JSP 구조 및 HTML/CSS 본문

Development/Spring Framework

[JAVA/Spring Boot] TodoList 만들기(3) - JSP 구조 및 HTML/CSS

레오나르도 다빈츠 2021. 6. 9. 18:10

 

📄 home.jsp

JSTL의 Core와 Functions 태그를 사용했다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="static/css/css.css" rel="stylesheet" type="text/css">
<script src="static/js/common.js"/></script>

</head>
<body>
	<div class="list_box">
		<div class="time_wrap">
			<div>
				<input type="date" id="currentDate">
			</div>
			<div class="time_wrap_box">
				<div id="box_hour1"></div>
				<div id="box_hour2"></div>
				<span></span>
				<div id="box_minite1"></div>
				<div id="box_minite2"></div>
			</div>
		</div>
		<div class="btn_box">
			<div class="subTab">
				<li class="active" value="0" onclick="changeType(0)">ALL</li>
				<li value="1" onclick="changeType(1)">ACTIVE</li>
				<li value="2" onclick="changeType(2)">COMPLETED</li>
				<div class="btnAdd" onclick="clickAddBtn()">
					Add
				</div>
			</div>
		</div>
		
		<div class="list">
			<c:choose>
				<c:when test="${fn:length(todoList) == 0}">
					<span class="empty_notice">등록된 할 일이 없습니다.</span>
				</c:when>
				<c:otherwise>
					<c:forEach var="item" items="${ todoList }">
						<li class="list${ item.idx } ${ item.complete_yn == 'Y' ? 'checked' : '' }">
							<input type="checkbox" value="${ item.idx }" id="middle${ item.idx }" ${ item.complete_yn == 'Y' ? 'checked' : ''}><label for="middle${ item.idx }">${ item.contents }</label>
							<button class="delBtn" onclick="deleteTodo(${ item.idx })" style="display: none;">삭제</button>
						</li>
					</c:forEach>
				</c:otherwise>
			</c:choose>
		</div>
	</div>
</body>
</html>

 

 

 

 

 

📄 css.css

전체 박스안에 시계, 서브탭, TodoList 이렇게 3부분으로 나뉘어져 있다. 

body {
	margin: 0 auto;
	background-image: url("../img/background.png");
	background-size: 80%;
	background-attachment: fixed;
	-ms-overflow-style: none;
}

::-webkit-scrollbar { 
	display: none;
}

/* 시간 & 시계 */
.time_wrap {
	text-align: center;
	height: 90px;
	margin-top: 1rem;
	margin-bottom: 1rem;
}

.time_wrap div.time_wrap_box {
	display: inline-flex;
}

.time_wrap div.time_wrap_box div {
	display: inline;
	width: 30px;
	height: 30px;
	color: white;
	background-color: #202020;
	text-align: center;
	font-size: 1.3rem;
	padding: 2px;
	margin: 0 0.2rem;
	border-radius: 5px;
}

.time_wrap div.time_wrap_box span {
	display: inline-block;
	text-align: center;
	width: 9px;
	height: 30px;
	margin: 0 0.3rem;
	background-size: 100%;
	background-repeat: no-repeat;
	background-image: url("../img/colon.png");
	background-position: 0 7px;
}

.time_wrap input[type="date"] {
	background: #be4a4a;
	border: 0;
	color: white;
	text-align: center;
	margin: 0.5rem 0 0.5rem 0;
	font-weight: 700;
}

/* 전체박스 */
.list_box {
	margin: 5rem auto;
	width: 400px;
	height: 500px;
	padding: 2rem;
	background-color: #be4a4a;
	box-shadow: 0 0 20px 5px rgb(166, 140, 117);
}
.btn_box {
	margin-bottom: 1rem;
}

/* list */
.list {
	height: 320px;
	overflow-y: auto;
	overflow-x: hidden;
	clear: both;
}

.list li {
	list-style: none;
	padding: 20px 15px;
	margin-bottom: 0.5rem;
}

.list li:nth-child(odd) {
	background-color: #dfc1ae;
}

.list li:nth-child(even) {
	background-color: #f5e2d3;
}

.list li.checked {
	background-color: #342323;
	color: #715555;
}

.list span.empty_notice {
	color: white;
	width: 400px;
	text-align: center;
	position: absolute;
	padding-top: 120px;
}

.list label {
	vertical-align: 5px;
	margin-left: 0.3rem;
}

.list input[type="checkbox"] {
	width: 20px;
	height: 20px;
}

.list input[type="checkbox"]:checked {
	color: black;
	width: 20px;
	height: 20px;
	background-color: black;
}

.list button.delBtn {
	float: right;
}

.list .btn_wrap {
	float: right;
}

.list .btn_wrap button:last-child {
	margin-left: 0.2rem;
}

.list input[type="text"].newTodoContents {
	width: 260px;
}

/* 서브탭 */
.subTab {
	width: 80%;
	display: inline;
	cursor: pointer;
}

.subTab li {
	list-style: none;
	display: inline-block;
	padding: 10px;
	background-color: #9f3b3b;
	color: #4f1212;
	font-size: 0.8rem;
	border: 1px solid #9f3b3b;
	font-weight: 700;
}

.subTab li.active {
	background-color: #f05858;
	color: white;
	border: 1px solid white;
}

.subTab div.btnAdd {
	padding: 10px;
	font-weight: 700;
	text-align: center;
	font-size: 0.8rem;
	border-radius: 10px;
	background-color: #37322f;
	width: 50px;
	float: right;
	color: white;
}

.subTab div.btnAdd:hover {
	background-color: black;
}

 

 

◽ 홀수/짝수별로 다른 CSS 적용하기

.list li:nth-child(odd) {
	background-color: #dfc1ae;
}

.list li:nth-child(even) {
	background-color: #f5e2d3;
}

 

 

◽ 스크롤 기능은 남기고 스크롤바만 숨기기

body {
	-ms-overflow-style: none;
}

::-webkit-scrollbar { 
	display: none;
}

 

 

◽ 가장 마지막 요소에만 CSS 적용

.list .btn_wrap button:last-child {
	margin-left: 0.2rem;
}

 

 

◽ 줄바꿈 속성이 있는 element 요소를 한 줄로 나열

.subTab {
	display: inline;
}

 

 

 

 

GIT

🚩 Github | https://github.com/hvsundev/Spring

 

 

 

 

 

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.

 

 

 

 

'Development > Spring Framework' 카테고리의 다른 글

[JAVA/Spring Boot] TodoList 만들기(6) - Main Application  (0) 2021.06.13
[JAVA/Spring Boot] TodoList 만들기(5) - 스크립트  (0) 2021.06.10
[JAVA/Spring Boot] TodoList 만들기(4) - DB 구조  (0) 2021.06.09
[JAVA/Spring Boot] TodoList 만들기(2) - 프로젝트 생성 및 기본 설정  (0) 2021.06.09
[JAVA/Spring Boot] TodoList 만들기(1) - 개발환경 및 기능 소개  (0) 2021.06.09
'Development/Spring Framework' Related Articles more
Comments

티스토리툴바