ASP.NET MVC
[ASP.NET MVC][달력 만들기] 2. ASP.NET MVC View - 디자인
쓰봥
2022. 2. 13. 22:35
SMALL
이번에는 지난번 생성한 View 에 디자인 요소를 추가 하고,
Controller에서 데이터를 받아와 달력의 Title 까지 추가 해보도록 하자.
달력의 Design 참고는 아래의 사이트에서 참고 했고, 색상을 조금 변경 해서 올려 두었다.
https://responsivedesign.is/patterns/calendar/
Calendar - Responsive Web Design
A responsive calendar layout pattern that starts with a list of days for the month and responds to a traditional calendar format.
responsivedesign.is
우선 2022년 2월달 달력을 구성 해 보자.
[calender.cshtml]
<link rel="stylesheet" href="~/css/calender.css" />
<div id="calendar-wrap">
<div id="calendar">
<ul class="weekdays">
<li>일</li>
<li>월</li>
<li>화</li>
<li>수</li>
<li>목</li>
<li>금</li>
<li>토</li>
</ul>
<!-- Row #1 -->
<ul class="days">
<li class="day other-month">
<div class=date>30</div>
</li>
<li class="day other-month">
<div class=date>31</div>
</li>
<li class="day">
<div class=date>1</div>
</li>
<li class="day">
<div class=date>2</div>
</li>
<li class="day">
<div class=date>3</div>
</li>
<li class="day">
<div class=date>4</div>
</li>
<li class="day">
<div class=date>5</div>
</li>
</ul>
<!-- Row #2 -->
<ul class="days">
<li class="day">
<div class=date>6</div>
</li>
<li class="day">
<div class=date>7</div>
</li>
<li class="day">
<div class=date>8</div>
</li>
<li class="day">
<div class=date>9</div>
</li>
<li class="day">
<div class=date>10</div>
</li>
<li class="day">
<div class=date>11</div>
</li>
<li class="day">
<div class=date>12</div>
</li>
</ul>
<!-- Row #3 -->
<ul class="days">
<li class="day">
<div class=date>13</div>
</li>
<li class="day">
<div class=date>14</div>
</li>
<li class="day">
<div class=date>15</div>
</li>
<li class="day">
<div class=date>16</div>
</li>
<li class="day">
<div class=date>17</div>
</li>
<li class="day">
<div class=date>18</div>
</li>
<li class="day">
<div class=date>19</div>
</li>
</ul>
<!-- Row #4 -->
<ul class="days">
<li class="day">
<div class=date>20</div>
</li>
<li class="day">
<div class=date>21</div>
</li>
<li class="day">
<div class=date>22</div>
</li>
<li class="day">
<div class=date>23</div>
</li>
<li class="day">
<div class=date>24</div>
</li>
<li class="day">
<div class=date>25</div>
</li>
<li class="day">
<div class=date>26</div>
</li>
</ul>
<!-- Row #5 -->
<ul class="days">
<li class="day">
<div class=date>27</div>
</li>
<li class="day">
<div class=date>28</div>
</li>
<li class="other-month">
<div class=date>1</div>
</li>
<li class="other-month">
<div class=date>2</div>
</li>
<li class="other-month">
<div class=date>3</div>
</li>
<li class="other-month">
<div class=date>4</div>
</li>
<li class="other-month">
<div class=date>5</div>
</li>
</ul>
<!-- Row #6 -->
<ul class="days">
<li class="other-month">
<div class=date>6</div>
</li>
<li class="other-month">
<div class=date>7</div>
</li>
<li class="other-month">
<div class=date>8</div>
</li>
<li class="other-month">
<div class=date>9</div>
</li>
<li class="other-month">
<div class=date>10</div>
</li>
<li class="other-month">
<div class=date>11</div>
</li>
<li class="other-month">
<div class=date>12</div>
</li>
</ul>
</div>
</div>
[calender.css]
body {
font-family: Tahoma;
}
header {
text-align: center;
}
#calendar {
width: 100%;
}
#calendar a {
color: #90b9eb;
text-decoration: none;
}
#calendar ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
}
#calendar li {
display: block;
float: left;
width: 14.342%;
padding: 5px;
box-sizing: border-box;
border: 1px solid #ccc;
margin-right: -1px;
margin-bottom: -1px;
}
#calendar ul.weekdays {
height: 40px;
background: #90b9eb;
}
#calendar ul.weekdays li {
text-align: center;
text-transform: uppercase;
line-height: 20px;
border: none !important;
padding: 10px 6px;
color: #fff;
font-size: 13px;
}
#calendar .days li {
height: 100px;
}
#calendar .days li:hover {
background: #d3d3d3;
}
#calendar .date {
text-align: center;
margin-bottom: 5px;
padding: 4px;
/*background: #333;*/
color: #333;
width: 20px;
border-radius: 50%;
float: right;
}
#calendar .event {
text-align: center;
clear: both;
display: block;
font-size: 13px;
border-radius: 4px;
padding: 5px;
margin-top: 30px;
margin-bottom: 5px;
line-height: 13px;
background: #e4f2f2;
/*background:#000000;*/
border: 1px solid #b5dbdc;
/*border: 1px solid #000000;*/
color: #009aaf;
/*color: #000000;*/
/*color: rgb(193 88 54 / 0.13);*/
text-decoration: none;
}
#calendar .event-desc {
color: #666;
margin: 3px 0 7px 0;
text-decoration: none;
}
#calendar .event-holiday {
text-align: center;
clear: both;
display: block;
font-size: 13px;
border-radius: 4px;
padding: 5px;
margin-top: 30px;
margin-bottom: 5px;
line-height: 13px;
background: rgb(245 125 125 / 0.74);
/*background:#000000;*/
border: 1px solid #b5dbdc;
/*border: 1px solid #000000;*/
color: rgb(247 91 91 / 0.95);
/*color: #000000;*/
/*color: rgb(193 88 54 / 0.13);*/
text-decoration: none;
}
#calendar .event-holiday-desc {
color: #666;
margin: 3px 0 7px 0;
text-decoration: none;
}
#calendar .other-month {
background: #f5f5f5;
color: #666;
}
/* ============================
Mobile Responsiveness
============================*/
@media (max-width: 768px) {
#calendar .weekdays, #calendar .other-month {
font-size: 0.3em;
height: 10px;
}
#calendar li {
height: 15%;
box-sizing: border-box;
border: 1px solid #ededed;
padding: 10px;
margin-bottom: -1px;
font-size: 5px;
}
#calendar .day {
font-size: 5px;
}
#calendar .days li {
height: 50px;
}
#calendar ul.weekdays {
height: 30px;
font-size: 10px;
font-weight: bold;
}
#calendar ul.weekdays li {
text-align: center;
text-transform: uppercase;
line-height: 15px;
border: none !important;
padding: 10px 6px;
color: #fff;
}
#calendar .date {
text-align: right;
font-size: 13px;
margin-right: -5px;
margin-top: -10px;
width: 20px;
padding: 0px;
}
#calendar .event {
text-align: center;
clear: both;
display: block;
border-radius: 4px;
padding: initial;
margin-top: 3px;
margin-left: -7px;
margin-right: -7px;
background: #e4f2f2;
border: 1px solid #b5dbdc;
color: #009aaf;
text-decoration: none;
font-size: 5px;
}
#calendar .event-holiday {
text-align: center;
clear: both;
display: block;
border-radius: 4px;
padding: initial;
margin-top: 3px;
margin-left: -7px;
margin-right: -7px;
background: #e4f2f2;
text-decoration: none;
font-size: 5px;
background: rgb(245 125 125 / 0.74);
color: rgb(247 91 91 / 0.95);
text-decoration: none;
}
#calendar .event-desc {
}
}
우선 이렇게 실행을 하면 아래와 같은 화면이 나온다.
여기서 달력의 Titie 을 Controller 에서 넘겨 받아 표시 해 보도록 하자.
여기서는 우선 ViewBag 을 이용해서 Title 을 표기 할 것이다.
우선
[HomeController.cs]
public IActionResult Calender()
{
ViewBag.Title = "2022년 2월";
return View();
}ViewBag 객체에 Title 이란 이름에 '2022년 2월' 이라는 값을 담아 두도록 하자.
이제
[Calender.cshtml]
<header>
<h1>
@ViewBag.Title
</h1>
</header>위 내용을 Calneder.cshtml 의 첫번째 div 태그 아래에 배치 하고, @ViewBag.Title 의 값을 불러온다.
여기서 @는 cshtml 구조에서 C# 코드를 처리 하기 위한 태그?? 라고 생각 하면 된다.
한마디로 @뒤에 오는 내용은 C# 코드처럼 처리가 된다는 것이다.
실제로 C# 코드에서 ViewBag에 있는 값을 불러 올 때도,
string title = ViewBag.Title;
이렇게 해서 가져올 수 있다.
그러면 이렇게해서 나온 결과물을 확인 해 보자.
오늘 다뤄본 내용은, 모든 달력 내용을 개발자가 일일이 손으로 집어 넣은 내용이다.
이렇게 계속 쓰려면, 다음달로 넘어가거나 월 이 바뀔때 마다 모조리 변경 해 줘야 한다.
그렇다면, ASP.NET MVC 에서는 Model 을 이용해 조회하고자 하는 년도와 월을 인자값으로 받아
데이터를 처리하고, 처리한 데이터를 가지고 Controller 를 통해 View 단에 뿌려줄 수 가 있다.
다음번 글에서 다뤄볼 내용이 View 에서 Model 을 전달받아
View 를 구성하는 방법으로 달력을 구성해 볼 예정이다.