상세한 개발 내역을 작성할려고 했으나, 여러 번의 디버그가 있었고 개발 단계에서 변경되는 점 또한 많았다.
때문에 완성된 캘린더를 기능 별로 정리하고, 개선점을 작성하려고 한다.
(TimeLine에 작성해 봤으나 글이 한눈에 들어오지 않는다는 단점이 있어서 방법을 바꿨다.)
1. 디자인을 할 때 고려한 것
프로그래밍을 할때 사용자의 경험을 증진하려면 어떻게 해야할까를 늘 고민하면서 기능을 구현한다.
다만 디자인은 대부분 감각에 의존해서 한다.
감각이라함은 배치와 간격에 따른 안정감, 폰트 크기의 적절함을 고려한 상태를 말한다.
쉽게 말해서 내가 보기에 안정적이고 이쁜지를 본다는 것이다.
캘린더의 기능을 구현할 때 하나의 컬러를 설정하고 싶었지만, 이럴 경우 스케줄의 가독성이 낮아진다.
때문에 최대한 적은 색을 사용해서 스케줄 막대를 돋보이게 만들고 싶었다.
2. 헤더 디자인
아이콘은 내가 직접 디자인하고 적용했다.
상단의 로고 또한 마찬가지이다. 동적인 동작은 거의 적용하지 않았지만, 메뉴에 대해서는 동작을 적용하였다.
더보기
@charset "UTF-8";
/*
z-index: Area 단위 100/ 그 하위 200/ 그 보다 아해 300 ..... <>
*/
/* =====================================================
* ====================== 헤더 ==========================
* ===================================================== */
body{
position: relative;
}
a{
text-decoration-line: none;
color: black;
}
.headerArea{
width: 100%;
padding-top: 0.5em;
padding-bottom: 0.5em;
min-width : 860px;
z-index: -1;
}
#headerIcon:after{
content: "";
display:block;
clear:both;
}
#headerLogo{
height: 32px;
margin-top: 3px;
margin-bottom: 3px;
width: 200px;
display:block;
background-image: url(./imgSource/Logo.png);
background-repeat: no-repeat;
background-size: contain;
background-position: left;
margin-left: 2em;
float:left;
}
#headerBasicArea{
width: 100%;
height: 42px;
}
#headerSearchArea{
display:none;
width: 100%;
}
#headerSearchArea:after{
content: "";
display: block;
clear: both;
}
#searchValue{
margin-top: 3px;
margin-bottom: 3px;
height: 32px;
width: 80%;
padding-left: 25px;
padding-right: 25px;
border: 1px solid lightgray;
border-radius: 16px;
float: left;
margin-left: 4%;
}
#searchValueBtn{
margin: 3px;
height: 36px;
width: 36px;
border-radius: 18px;
border: 1px solid lightgray;
float: left;
background-color: white;
background-image: url(./imgSource/SearchIcon.png);
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: center;
}
#searchValueBtn:hover{
animation-duration: 0.3s;
animation-name: chooseSearchBtn;
animation-fill-mode: forwards;
}
#searchXBtn{
margin: 3px;
height: 36px;
width: 36px;
border-radius: 18px;
border: 1px solid lightgray;
float: left;
background-color: white;
}
#searchXBtn:hover{
animation-duration: 0.3s;
animation-name: chooseSearchBtn;
animation-fill-mode: forwards;
}
@keyframes chooseSearchBtn{
from{
}
to{
background-size: 25px 25px;
font-size: 1.1em;
background-color: lightgray;
}
}
#headerMenu{
width: 150px;
display: block;
float: left;
}
.headerMenuElement{
text-align: center;
vertical-align: middle;
padding-right: 20px;
display: inline-block;
}
#headerSearchIcon{
width: 2.3em;
height: 38px;
display: block;
background-image: url(./imgSource/SearchIcon.png);
background-size: 2.3em;
background-repeat: no-repeat;
float: right;
margin-right: 2.8em;
}
#headerProfileIcon{
width: 2.3em;
height: 38px;
display: block;
background-image: url(./imgSource/ProfileIcon.png);
background-size: 2.3em;
background-repeat: no-repeat;
float: right;
margin-right: 1.0em;
}
.linkWhite{
font-size: 0.9em;
letter-spacing: -1px;
font-weight: 500;
height: 38px;
line-height: 38px;
}
.linkWhite:hover{
color: rgb(0, 101, 131);
}
#headerProfileArea{
margin-top: -4px;
position: relative;
z-index: 100;
}
.headerUlist{
border-radius: 0 0 0.5em 0.5em;
width: 121.6px;
background-color: white;
display: none;
z-index: 200;
background-color: rgba(245, 245, 245);
position:absolute;
margin-left: calc(100% - 132.4px);
}
.headerlist{
padding: 0.5em;
margin-left: 0.5em;
margin-right: 0.5em;
margin-top: 0.7em;
margin-bottom: 0.7em;
font-size: 0.8em;
letter-spacing: -0.5px;
}
#headerProfileArea{
position:relative;
}
#headerForm{
position: relative;
}
3. 캘린더 디자인
캘린더의 기본 형태이다.
각각의 기능에 따라 표시되는 영역이나 아이콘을 심플하게 디자인했다.
아쉬운 것은 좌측 항목이 정보량에 비해 작세 설정된 것이다.
이를 해결하는 가장 좋은 방법은 마우스 커서 혹은 클릭으로 창을 새창에 분리하는 방법인데, 시간 문제로 진행이 불가능 했다.
4. CSS
더보기
@charset "utf-8";
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background-color: #ffffff; }
::-webkit-scrollbar-thumb { background-color: #c0c0c0; }
#calendar{
width: 100%;
z-index: 100;
margin-top: 27px;
}
.yearAreaHead>.yearAreaHeadTitle:first-child{
color: crimson;
}
.yearAreaHead>.yearAreaHeadTitle:last-child{
color: #0000fa;
}
.yearAreaBody>.yearBoxYoil:first-child{
color: crimson;
}
.yearAreaBody>.yearBoxYoil:nth-child(7n+1){
color: crimson;
}
.yearAreaBody>.yearBoxYoil:nth-child(7n){
color: #0000fa;
}
.monthAreaHead>.monthAreaHeadTitle:first-child{
color: crimson;
}
.monthAreaHead>.monthAreaHeadTitle:last-child{
color: #0000fa;
}
.monthAreaBody>.monthBox:first-child{
color: crimson;
}
.monthAreaBody>.monthBox:nth-child(7n+1){
color: crimson;
}
.monthAreaBody>.monthBox:nth-child(7n){
color: #0000fa;
}
.Xbutton{
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
.topBoderCenter{
border-top: 2px solid rgb(255,255,255);
padding-top: 4px;
}
.titleBlock{
padding-left: 5px;
font-size: 1vw;
margin-top: 20px;
}
/* =====================================================
* === 켈린더 헤더 ========================================
* ===================================================== */
.calendarHeader{
width: 100%;
height: 60px;
z-index: 200;
min-width : 860px;
}
.calendarHeadMenu{
width: 40px;
height: 40px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
display:block;
background-image: url(./imgSource/CalendarMenuIcon.png);
background-repeat: no-repeat;
background-size: contain;
float: left;
}
.calendarHeadNow{
width: 40px;
height: 40px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 20px;
display:block;
background-image: url(./imgSource/ClaendarTodayMenu.png);
background-repeat: no-repeat;
background-size: contain;
float: left;
}
.calendarHeadPre{
width: 40px;
height: 40px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 15px;
display:block;
background-image: url(./imgSource/CalendarPrevious.png);
background-repeat: no-repeat;
background-size: contain;
float: left;
}
.calendarHeadNext{
width: 40px;
height: 40px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
display: block;
background-image: url(./imgSource/CalendarNext.png);
background-repeat: no-repeat;
background-size: contain;
float: left;
}
.calendarHeadDate{
width: 400px;
height: 40px;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 50px;
display: block;
float: left;
font-size: 1.8em;
letter-spacing: -1.5px;
line-height: 40px;
font-weight: 600;
}
.calendarHeadSearch{
width: 40px;
height: 40px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 16px;
display:block;
background-image: url(./imgSource/CalendarSearch.png);
background-repeat: no-repeat;
background-size: contain;
float: right;
}
.calendarHeadSelect{
width: 59px;
height: 40px;
margin-top: 10px;
margin-bottom: 10px;
margin-right: 15px;
border: 0;
display:block;
float: right;
}
.selectForm{
width: 57px;
height: 38px;
border: 1px solid lightgray;
border-radius: 3px;
font-size: 0.9em;
}
.calendarSearch{
display:none;
}
.calendarHeader::after{
content: "";
display: block;
clear:both;
}
.calendarHeadBar::after{
content: "";
display: none;
clear: both;
}
/* =====================================================
* === 켈린더 서치 ========================================
* ===================================================== */
.calendarSearchBarLeft{
width: calc(100% - 200px);
display:block;
float: left;
margin-top: 10px;
margin-bottom: 10px;
}
.calendarSearchBarRight{
min-width: 200px;
display:block;
float: right;
}
.calendarSearchBarArea{
margin-top: 3px;
margin-bottom: 3px;
height: 32px;
width: 80%;
padding-left: 25px;
padding-right: 25px;
margin-left: 4%;
float: right;
line-height: 32px;
position: relative;
}
.calendarSearchBar{
width: 92%;
padding-left: 25px;
padding-right: 25px;
border: 1px solid lightgray;
border-radius: 16px;
margin-left: 4%;
line-height: 32px;
}
.calendarSearchBtn{
width: 32px;
height: 32px;
border: 1px solid lightgray;
border-radius: 18px;
margin-top: 13px;
margin-bottom: 13px;
margin-left: 8px;
margin-right: 8px;
display:block;
background-image: url(./imgSource/SearchIcon.png);
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: center;
float: left;
}
.calendarXBtn{
width: 32px;
height: 32px;
border: 1px solid lightgray;
border-radius: 18px;
margin-top: 13px;
margin-bottom: 13px;
margin-right: 44px;
display:block;
text-align: center;
line-height: 32px;
background-repeat: no-repeat;
background-size: contain;
float: left;
font-size: 0.9em;
}
.calendarSearchResult{
position: absolute;
z-index: 600;
width: 92%;
margin-left: 4%;
border: 1px solid lightgray;
border-radius: 10px;
line-height: 32px;
background-color: white;
display: none;
}
.scheduleSearchLists{
height: 28px;
width: calc(100% - 50px);
padding-right: 25px;
padding-left: 25px;
display: block;
float: left;
font-size: 0.9em;
padding-top: 6px;
padding-bottom: 6px;
}
.scheduleSearchLists:hover{
background-color: rgb(245,245,245);
}
.calendarXBtn:hover{
animation-duration: 0.3s;
animation-name: chooseHeadSearchBtn;
animation-fill-mode: forwards;
}
.calendarSearchBtn:hover{
animation-duration: 0.3s;
animation-name: chooseHeadSearchBtn;
animation-fill-mode: forwards;
}
@keyframes chooseHeadSearchBtn{
from{
}
to{
background-size: 25px 25px;
font-size: 1.1em;
background-color: lightgray;
}
}
/* =====================================================
* === 켈린더 보디 ========================================
* ===================================================== */
.calendarBody{
padding-top: 20px;
width: 100%;
display: flex;
height: auto;
font-size: 0.8em;
font-weight: 500;
min-width : 860px;
}
.centerBox{
flex: 8;
height: 100%;
margin-right: 15px;
min-width: 850px;
min-height: 720px;
}
.leftBox{
flex: 2;
height: 100%;
min-width: 230px;
min-height: 720px;
margin-right: 2px;
}
/* =====================================================
* === 투두리스트 =========================================
* ===================================================== */
.toDoListDiv{
height: 50%;
max-height: 50%;
padding-left: 10px;
min-width: 200px;
min-height: 360px;
max-height: 460px;
}
.toDoListDiv::after{
content: "";
display: block;
clear: both;
}
.toDoListMain{
padding-right: 15px;
overflow: auto;
scrollbar-color: #c0c0c0 #f5f5f5;
scrollbar-width: thin;
max-height: 384px;
}
.groupMain{
padding-right: 15px;
overflow: auto;
scrollbar-color: #c0c0c0 #f5f5f5;
scrollbar-width: thin;
max-height: 384px;
}
.toDoListMain::after{
content: "";
display: block;
clear: both;
}
.leftBox::after{
content: "";
display: block;
clear: both;
}
.toDoListTitleHead{
width: calc(100% - 7px);
font-size: 1.2em;
padding-top: 5px;
padding-bottom: 5px;
letter-spacing: -0.6px;
margin-top: 3px;
}
.toDoListTitle{
width: calc(100% - 7px);
height: 25px;
line-height: 25px;
font-size: 1.2em;
letter-spacing: -0.6px;
margin-top: 8px;
margin-bottom: 8px;
border: 0;
font-size: 1em;
}
.toDolistTitleSecond{
float: left;
}
.toDoLists::after{
content: "";
display: block;
clear: both;
}
.toDoListMenu{
position:sticky;
}
.toDoListMenu::after{
content: "";
display: block;
clear: both;
}
.toDoListCheckBox{
height: 27px;
width: 27px;
float: left;
margin-right: 2px;
margin-top: 8px;
margin-bottom: 8px;
background-image: url(./imgSource/checkbefore.png);
background-repeat: no-repeat;
background-size: 12px 12px;
background-position: center;;
opacity: 0.7;
}
.toDoListFixBtn{
height: 27px;
width: 27px;
float: left;
margin-left: 2px;
margin-top: 8px;
margin-bottom: 8px;
background-image: url(./imgSource/fix.png);
background-repeat: no-repeat;
background-size: 15px 15px;
background-position: center;
opacity: 0.5;
}
.toDoListFixBtn:hover{
opacity: 1;
}
.toDoListAdd{
width: 25px;
height: 25px;
margin-top: 10px;
margin-bottom: 10px;
background-image: url(./imgSource/TodolistPlus.png);
background-repeat: no-repeat;
background-size: contain;
display:block;
float: left;
}
.toDoListCom{
width: 25px;
height: 25px;
margin-top: 14px;
margin-bottom: 6px;
margin-right: 10px;
background-image: url(./imgSource/TodolistTrash.png);
background-repeat: no-repeat;
background-size: contain;
display:block;
float: right;;
}
.toDoListTitle:after{
content: "";
display: block;
clear:both;
}
.toDoListDate{
width: 100%;
min-height: 30px;
margin-top: 5px;
display: block;
float: left;
border: 0;
background-color: rgb(245,245,245);
margin-bottom: 5px;
}
.toDoListTime, .toDoListImportance{
width: calc(50% - 2px);
min-height: 32px;
line-height: 32px;
margin-left: 2px;
text-align: center;
display: block;
float: left;
border: 0;
background-color: rgb(235,235,235);
margin-bottom: 5px;
}
.toDoListTimeTitle, .toDoListImportanceTitle{
width: calc(50% - 2px);
min-height: 32px;
line-height: 32px;
margin-right: 2px;
text-align: center;
display: block;
float: left;
border: 0;
background-color: rgb(245,245,245);
margin-bottom: 5px;
}
.toDoListTimeTitle, .toDoListTime, .toDoListImportanceTitle, .toDoListImportance{
margin-bottom: 10px;
}
.toDoListDelBtn{
width: calc(50% - 2px);
min-height: 32px;
line-height: 32px;
margin-right: 2px;
text-align: center;
display: block;
float: left;
border: 0;
background-color: #c5e2a9;
margin-bottom: 5px;
}
.toDoListAddBtn{
width: calc(50% - 2px);
min-height: 32px;
line-height: 32px;
margin-left: 2px;
text-align: center;
display: block;
float: left;
border: 0;
background-color: #c5e2a9;
margin-bottom: 5px;
}
.toDoListDelBtn:hover, .toDoListAddBtn:hover{
background-color: #81c147;
}
/* =====================================================
* === 그룹리스트 =========================================
* ===================================================== */
.groupDiv{
height: 50%;
padding-left: 10px;
min-width: 200px;
min-height: 360px;
margin-bottom: 10px;
}
.groupTitle{
font-size: 1.2em;
padding-top: 10px;
letter-spacing: -0.6px;
}
.groupAdd{
width: 25px;
height: 25px;
margin-top: 10px;
margin-bottom: 10px;
background-image: url(./imgSource/TodolistPlus.png);
background-repeat: no-repeat;
background-size: contain;
display:block;
}
.groupDataName{
width: calc(100% - 10px);
min-height: 25px;
display: block;
border: 0;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
background-color: rgb(245,245,245);
margin-bottom: 7px;
margin-top: 7px;
font-size: 0.85em;
}
.groupDataColor{
min-width: calc(50% - 5px);
min-height: 32px;
line-height: 32px;
margin-right: 5px;
margin-bottom: 10px;
display: block;
float: left;
border: 0;
position: relative;
z-index: 300;
background-color: rgb(245,245,245);
}
.groupDataInfos{
position: relative;
}
.groupDataSearchable{
min-width: calc(50% - 5px);
min-height: 32px;
line-height: 32px;
margin-bottom: 10px;
display: block;
margin-left: auto;
float: left;
border: 0;
background-color: rgb(245,245,245);
font-size: 0.9em;
position: relative;
z-index: 300;
}
.groupDataSearchable::after{
content: "";
display: block;
clear:both;
}
.groupDataMembers{
width: calc(100% - 10px);
min-height: 25px;
display: block;
border: 0;
margin-top: 10px;
margin-bottom: 10px;
padding-left: 5px;
background-color: rgb(245,245,245);
}
.groupDataMemebersListName{
margin-top: 5px;
width: 50%;
min-height: 26px;
line-height: 26px;
display:block;
text-align: left;
float: left;
font-size: 0.85em;
text-overflow: ellipsis;
margin-bottom: 5px;
}
.groupDataMemebersListNameDummy{
width: 50%;
margin-top: 5px;
margin-bottom: 5px;
display: block;
min-height: 26px;
line-height: 26px;
float: left;
}
.groupDataMembersList{
width: calc(100% - 10px);
font-size: 0.9em;
list-style-type: disc;
padding-left: 5px;
margin-right: 10px;
margin-top: 4px;
margin-bottom: 4px;
content:"";
}
.groupDataMembersList::after{
content: "";
display: block;
clear: both;
}
.groupDataMembersListFixModify{
width: 50%;
margin-bottom: 5px;
min-height: 24px;
line-height:24px;
display: block;
border-radius: 10px;
text-align: left;
font-size: 0.85em;
float: left;
background-color: rgb(245,245,245);
}
.groupDataMembersListFixModify:hover{
color: #6a8518;
}
.groupDataMembersListFixDelete{
width: 50%;
min-height: 24px;
margin-bottom: 5px;
line-height: 24px;
display: block;
border-radius: 10px;
text-align: left;
font-size: 0.85em;
float: left;
background-color: rgb(245,245,245);
}
.groupDataMemebersListFix::after{
content:"";
display: block;
clear:both;
}
.groupDataMembersListFixDelete:hover{
color: #ff3409;
}
.groupDataAdd{
min-width: calc(50% - 5px);
min-height: 32px;
line-height: 32px;
margin-bottom: 10px;
margin-top: 10px;
display: block;
float: left;
border: 0;
background-color: rgb(245,245,245);
border-radius: 10px;
font-size: 0.85em;
}
.groupDataModifierListTitle>groupDataModifierListName:first-child{
margin-top: 10px;
}
.groupDataAdd2{
min-width: calc(50% - 5px);
min-height: 32px;
line-height: 32px;
margin-right: 0px;
margin-bottom: 10px;
border: 0;
background-color: rgb(245,245,245);
}
.groupDataClose{
min-width: calc(50% - 5px);
min-height: 32px;
line-height: 32px;
margin-right: 5px;
margin-bottom: 10px;
border: 0;
background-color: rgb(245,245,245);
}
.groupDataModifierList{
font-size: 0.9em;
}
.groupNodifierBlock{
width: calc(100% - 10px);
min-height: 25px;
line-height: 25px;
display: block;
margin-top: 10px;
border: 0;
padding-left: 5px;
background-color: rgb(245,245,245);
}
.groupDataModifierListName{
font-size: 0.9em;
min-height: 25px;
line-height: 25px;
display: block;
margin-top: 5px;
margin-bottom: 5px;
border: 0;
margin-left: 5px;
margin-right: 5px;
}
.groupNodifierBlock>.groupDataModifierListName:last-child{
padding-bottom: 10px;
}
.groupNodifierBlock>.groupDataModifierListName:first-child{
padding-top: 10px;
}
/* =====================================================
* === 스케줄 추가 폼 ======================================
* ===================================================== */
.calendarSchedule{
position:relative;
display:block;
}
.scheduleForm{
margin-top: 10px;
border-radius: 5px;
width: 57%;
background-color: white;
height: 308px;
z-index: 500;
background-color: rgba(255,255,255);
position:absolute;
letter-spacing: -0.6px;
max-width: 484.5px;
border: 1px solid lightgray;
display: none;
}
.scheduleFormX{
min-height: 26px;
border-radius: 8px;
border: 1px solid rgba(235,235,235);
margin: 0 auto;
margin-left: 10px;
margin-right: 10px;
line-height: 26px;
font-weight: 500;
background-color: rgba(235,235,235);
}
.scheduleFormX:hover{
background-color: rgba(235,235,235);
}
.scheduleFormTitle{
min-width: 279.5px;
min-height: 30px;
margin-top: 10px;
display: block;
float: left;
border: 0;
background-color: rgb(245,245,245);
padding-left: 5px;
}
.scheduleFormAllday{
min-width: 86px;
min-height: 32px;
line-height: 32px;
margin-left:15px;
margin-right:15px;
margin-top: 10px;
text-align: center;
display: block;
float: left;
border: 0;
border-radius: 10px;
background-color: rgb(235,235,235);
}
.scheduleFormGroups{
min-width: 284.5px;
min-height: 30px;
margin-top: 52px;
}
.scheduleFormGroupsTitle{
width: 80px;
min-height: 32px;
line-height: 32px;
text-align: center;
display: block;
float: left;
}
.scheduleFormGroupSelect{
min-width: 150px;
min-height: 30px;
display: block;
float: left;
border: 0;
background-color: rgb(245,245,245);
}
.scheduleFormColor{
min-width: 50px;
min-height: 30px;
margin-left:5px;
display: block;
float: left;
border: 0;
}
.scheduleFormGroups:after{
content: "";
display: block;
clear:both;
}
.scheduleFormDiv{
width: 80px;
min-height: 32px;
line-height: 28px;
margin-top: 10px;
text-align: center;
display: block;
float: left;
}
.scheduleFormStart{
min-width: 279.5px;
min-height: 30px;
margin-top: 10px;
display: block;
float: left;
border: 0;
background-color: rgb(245,245,245);
}
.scheduleFormStartTime{
min-width: 86px;
min-height: 32px;
line-height: 32px;
margin-left:15px;
margin-right:15px;
margin-top: 10px;
text-align: center;
display: block;
float: left;
border: 0;
background-color: rgb(245,245,245);
}
.scheduleFormEnd{
min-width: 279.5px;
min-height: 30px;
margin-top: 10px;
display: block;
float: left;
border: 0;
background-color: rgb(245,245,245);
}
.scheduleFormEndTime{
min-width: 86px;
min-height: 32px;
line-height: 32px;
margin-left:15px;
margin-right:15px;
margin-top: 10px;
text-align: center;
display: block;
float: left;
border: 0;
background-color: rgb(245,245,245);
}
.scheduleFormContent{
min-width: 279.5px;
min-height: 115px;
margin-top: 10px;
margin-left: 80px;
display: block;
float: left;
border: 0;
resize: none;
background-color: rgb(245,245,245);
padding-left: 5px;
}
.scheduleFormSubmit{
min-width: 86px;
min-height: 32px;
line-height: 32px;
margin-left:15px;
margin-right:15px;
margin-top: 93px;
text-align: center;
display: block;
float: left;
border: 0;
border-radius: 10px;
background-color: rgb(235,235,235);
}
.scheduleFormStart{
letter-spacing: -0.15px;
padding-left: 5px;
}
.scheduleFormEnd{
letter-spacing: -0.15px;
padding-left: 5px;
}
/* =====================================================
* === 월간캘린더 =========================================
* ===================================================== */
.calendarDiv{
width: 100%;
height: 100%;
margin-bottom: 30px;
padding-top: 10px;
}
.monthAreaHead{
width: 100%;
display:flex;
flex-wrap: wrap;
justify-content: stretch;
}
.monthAreaHeadTitle{
height: 31px;
text-align: center;
display: inline-block;
line-height: 31px;
border-top: 1px solid lightgray;
border-left: 1px solid lightgray;
font-size: 12px;
flex: 1 1;
flex-basis: calc(100%/7.08);
}
.monthAreaHeadTitle:nth-child(7n){
border-right: 1px solid lightgray;
}
.monthAreaBody{
width: 100%;
min-width: 830px;
display:flex;
flex-wrap: wrap;
justify-content: stretch;
}
.monthBox{
min-height: 120px;
height: 10vw;
padding-top: 5px;
display: inline-block;
text-align: center;
border-bottom: 1px solid lightgray;
border-left: 1px solid lightgray;
font-size: 13px;
flex: 1 1;
flex-basis: calc(100%/7.08);
}
.monthBox:after{
content: "";
display: block;
clear: both;
}
.monthBoxBody:after{
content: "";
display: block;
clear: both;
}
.monthBox:nth-child(7n){
border-right: 1px solid lightgray;
}
.monthBoxTitleBox{
width: 20px;
height: 20px;
display: inline-block;
text-align: center;
border-radius: 50%;
}
.monthBoxTitleBox:hover{
background-color: lightgrey;
}
.dateTag{
display: none;
}
.monthBoxTitleBoxOne{
height: 20px;
display: inline-block;
text-align: center;
border-radius: 50%;
}
.monthBoxTitleBoxOne:hover{
background-color: lightgrey;
}
.groupElement::after{
content: "";
display: block;
clear: both;
}
.yearLayoutBox{
width: 27%;
vertical-align: top;
display: inline-block;
margin-left: 3%;
margin-right: 3%;
margin-bottom: 2em;
}
.yearLayoutBox:nth-child(3n){
margin-right: 0;
}
.yearInMonthTitle{
font-size: 12px;
padding-bottom: 10px;
padding-left: 0.5vw;
}
.yearAreaHead{
width: 100%;
}
.yearAreaHeadTitle{
width: calc(100%/7);
height: 3vw;
text-align: center;
display: inline-block;
line-height: 3vw;
font-size: 10px;
padding-bottom: 0.5vw;
}
.yearAreaBody{
width: 100%;
}
.yearBox{
width: calc(100%/7);
height: 4vw;
display: inline-block;
text-align: center;
font-size: 11px;
}
.yearBoxTitleBox{
width: 20px;
height: 20px;
display: inline-block;
text-align: center;
border-radius: 50%;
}
.yearBoxTitleBox:hover{
background-color: lightgrey;
}
.yearBoxTitleBoxOne{
padding: 1px;
text-align: center;
border-radius: 50%;
}
.yearBoxTitleBoxOne:hover{
background-color: lightgrey;
}
.yearBoxDummy{
width: calc(100%/7);
display: inline-block;
text-align: center;
font-size: 0;
}
.yearBoxTitleBoxDummy{
font-size: 0;
}
/*Schedule*/
.monthBoxBody{
width: 100%;
position: relative;
z-index: 400;
}
.scheduleInfos{
display:none;
}
.scheduleBox{
width: 100%;
height: 20px;
text-align: left;
position: absolute;
z-index: 450;
border-radius: 3px;
}
.cmpbzero{
display: none;
}
.cmpb0{
display: none;
}
.cmpb1{
width: 95%;
}
.cmpb2{
width: 195%;
}
.cmpb3{
width: 295%;
}
.cmpb4{
width: 396%;
}
.cmpb5{
width: 497%;
}
.cmpb6{
width: 598%;
}
.cmpb7{
width: 699%;
}
.cmpb1:hover{
filter: hue-rotate(20deg);
}
.cmpb2:hover{
filter: hue-rotate(20deg);
}
.cmpb3:hover{
filter: hue-rotate(20deg);
}
.cmpb4:hover{
filter: hue-rotate(20deg);
}
.cmpb5:hover{
filter: hue-rotate(20deg);
}
.cmpb6:hover{
filter: hue-rotate(20deg);
}
.cmpb7:hover{
filter: hue-rotate(20deg);
}
.scheduleTitleInSpan{
height: 20px;
width: 90%;
text-overflow: ellipsis;
display: block;
color: black;
float: left;
}
.scheduleBox:after{
content: "";
display: block;
clear: both;
}
.smallColor{
width: 10px;
}
.lineThrough{
text-decoration-line: line-through;
}
.hiddenElement{
display: none;
}
.scheduleGroupColor{
width: 4px;
height: 100%;
display: block;
float: left;
margin-right: 5px;
border-radius: 3px 0 3px 0;
}
.sDetail{
position: relative;
}
.groupDataTitle{
display: flex;
}
.groupDataTitle::after{
content: "";
display: block;
clear: both;
}
.groupDataCheckBox{
min-width: 35px;
margin-right: 2px;
margin-top: 7px;
margin-bottom: 7px;
text-align: center;
line-height: 35px;
border-radius: 2px;
background-color: #81c147;
font-size: 0.85em;
}
.groupDataName{
width: calc(100% - 74px);
}
.groupDataTool{
min-width: 35px;
margin-left: 2px;
margin-top: 7px;
margin-bottom: 7px;
background-image: url(./imgSource/fix.png);
background-repeat: no-repeat;
background-size: 30px 30px;
background-position: center;
border-radius: 2px;
opacity: 0.6;
}
.groupDataTool:hover{
opacity: 1;
}
.groupDataToolDummy{
min-width: 35px;
margin-left: 2px;
margin-top: 10px;
margin-bottom: 10px;
}
.groupDataMemberSearch{
width: calc(100% - 10px);
min-height: 25px;
line-height: 25px;
display: block;
border: 0;
margin-bottom: 10px;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
margin-top: 10px;
background-color: rgb(245,245,245);
}
.groupDataMemberAdd{
border-radius: 5px;
margin-top: 10px;
width: 100%;
position: relative;
font-size: 0.9em;
}
.memerListId{
margin-top: 6px;
width: calc(100% - 60px);
min-height: 32px;
line-height: 32px;
text-align: left;
float: left;
font-size: 0.9em;
}
.memerListIdTitle{
margin-top: 6px;
min-width: 60px;
min-height: 28px;
line-height: 28px;
text-align: center;
float: left;
font-size: 0.9em;
}
.memerListName{
margin-bottom: 6px;
width: calc(100% - 60px);
min-height: 28px;
line-height: 28px;
text-align: left;
float: left;
font-size: 0.9em;
}
.memerListNameTitle{
margin-bottom: 6px;
min-width: 60px;
min-height: 28px;
line-height: 28px;
text-align: center;
float: left;
font-size: 0.9em;
}
.memerListAddBtn{
width: calc(100% - 10px);
min-height: 32px;
line-height: 32px;
text-align: center;
float: left;
border-radius: 10px;
background-color: rgb(245,245,245);
}
.memerListAddBtn:hover{
background-color: #81c147;
}
.groupDataMemberResult{
position: relative;
display: block;
position: absolute;
z-index: 500;
width: 100%;
max-height: 126px;
overflow: auto;
scrollbar-color: #c0c0c0 #f5f5f5;
scrollbar-width: thin;
}
.memerListData::after{
content: "";
display: block;
clear: both;
}
.memerListBox::after{
content: "";
display: block;
clear: both;
}
.groupDataMemberResult::after{
content: "";
display: block;
clear: both;
}
.memerListBox{
background-color: white;
width: 100%;
}
.groupDataDelBtn{
min-width: calc(50% - 5px);
min-height: 32px;
line-height: 32px;
margin-right: 5px;
margin-bottom: 10px;
margin-top: 10px;
display: block;
float: left;
border: 0;
background-color: rgb(245,245,245);
border-radius: 10px;
font-size: 0.85em;
}
.groupDataDelBtn:hover{
background-color: #ff3409;
}
.groupDataAdd:hover{
background-color: rgb(235,235,235);
}
.groupDataMembersList::after{
content:"";
display: block;
clear:both;
}
.toDoListContent{
width: calc(100% - 6px);
min-height: 25px;
line-height: 25px;
display: block;
border: 0;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 5px;
margin-top: 5px;
margin-bottom: 5px;
background-color: rgb(245,245,245);
}
.yearBoxBody{
display: block;
}
.toDoListView{
display: none;
}
.yearformEl{
width: 100%;
position: relative;
}
.yearBoxBody{
position: relative;
}
.yearFormSC{
position: absolute;
height: 20px;
line-height: 20px;
width: 100%;
z-index: 500;
margin: auto;
text-align: center;
font-size: 2em;
font-weight: 600;
margin-top: -60%;
color: #ffd700;
}
.checkedTodoStmt{
opacity: 0.6;
text-decoration:line-through;
}
.schedulInfoArea{
margin-top: 10px;
border-radius: 5px;
background-color: white;
width: 486.5px;
height: 308px;
z-index: 500;
background-color: rgba(255,255,255);
position:absolute;
letter-spacing: -0.6px;
max-width: 484.5px;
border: 1px solid lightgray;
display: none;
}
.schedulInfoHeadTitle{
height: 25px;
float: left;
margin-top: 10px;
margin-bottom: 10px;
margin-left: 15px;
line-height: 25px;
font-size: 1.2em;
}
.schedulInfoQuit{
height: 25px;
width: 25px;
text-align: center;
border-radius: 12.5px;
border: 1px solid rgba(245,245,245);
margin: 0 auto;
margin-left: 10px;
margin-right: 15px;
margin-top: 10px;
margin-bottom: 10px;
line-height: 26px;
font-weight: 500;
background-color: rgba(245,245,245);
float: right;
}
.schedulInfoQuit:hover{
background-color: rgba(235,235,235);
font-weight: 600;
}
.schedulInfoFix{
height: 25px;
width: 25px;
margin-left: 3px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
background-image: url(./imgSource/fix.png);
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: center;
border-radius: 2px;
float: right;
}
.schedulInfoFix:hover{
background-size: 22px 22px;
}
.schedulInfoDelete{
height: 25px;
width: 25px;
border-radius: 12.5px;
margin-left: 3px;
margin-right: 10px;
margin-top: 10px;
margin-bottom: 10px;
background-image: url(./imgSource/TodolistTrash.png);
background-repeat: no-repeat;
background-size: 20px 20px;
background-position: center;
border-radius: 2px;
float: right;
}
.schedulInfoDelete:hover{
background-size: 22px 22px;
}
.schedulInfoHead::after{
content:"";
display: block;
clear: both;
}
.schedulInfoTitle{
width: 264.5px;
height: 30px;
line-height: 30px;
margin-top: 10px;
margin-left: 10px;
display: block;
float: left;
border: 0;
background-color: rgb(245,245,245);
padding-left: 5px;
font-size: 0.95em;
}
.schedulInfoColor{
width: 80px;
height: 30px;
margin-top: 10px;
margin-left: 15px;
border: 0;
display: block;
float: left;
border: 0;
}
.blockBoxAllDay{
min-width: 85px;
min-height: 32px;
line-height: 32px;
margin-left:10px;
margin-right:15px;
margin-top: 10px;
text-align: center;
display: block;
float: left;
border: 0;
border-radius: 10px;
background-color: rgb(235,235,235);
visibility: hidden;
}
.blockBox{
width: 80px;
height: 30px;
margin-top: 10px;
margin-left: 15px;
line-height: 30px;
text-align: center;
border: 0;
display: block;
float: left;
border: 0;
background-color: rgb(245,245,245);
}
.blockBoxDummy{
width: 80px;
height: 30px;
margin-top: 10px;
margin-left: 15px;
line-height: 30px;
text-align: center;
border: 0;
display: block;
float: left;
border: 0;
}
.schedulInfoStartDay, .schedulInfoEndDay{
min-width: 264.5px;
min-height: 30px;
margin-top: 10px;
line-height: 30px;
margin-left: 10px;
display: block;
float: left;
border: 0;
background-color: rgb(245,245,245);
padding-left: 5px;
font-size: 0.95em;
}
.schedulInfoStartTime, .schedulInfoEndTime{
width: 85px;
height: 30px;
margin-top: 10px;
margin-left: 10px;
line-height: 30px;
text-align: center;
border: 0;
display: block;
float: left;
border: 0;
background-color: rgb(245,245,245);
font-size: 0.95em;
}
.schedulInfoContentText{
width: 444.5px;
height: 75px;
margin-top: 10px;
margin-left: 15px;
margin-right: 15px;
display: block;
float: left;
border: 0;
background-color: rgb(245,245,245);
padding-left: 5px;
padding-right: 5px;
overflow: auto;
}
.schedulInfoGroupName{
min-width: 264.5px;
min-height: 30px;
line-height: 30px;
margin-top: 10px;
margin-left: 10px;
display: block;
float: left;
border: 0;
background-color: rgb(245,245,245);
padding-left: 5px;
font-size: 0.95em;
}'프로젝트 개발기 > Status 200 ( Team Project )' 카테고리의 다른 글
| 15. TEAM 프로젝트: Status 200 개발 후기 (0) | 2021.11.16 |
|---|---|
| 14. TEAM 프로젝트: Git Hub 링크 (0) | 2021.11.16 |
| 12. TEAM 프로젝트: 캘린더 기능 구현 - 실시간 알림 (0) | 2021.11.15 |
| 11. TEAM 프로젝트: 캘린더 기능 구현 - TO DO List (0) | 2021.11.15 |
| 10. TEAM 프로젝트: 캘린더 기능 구현 - 그룹 (2) (0) | 2021.11.15 |
