File size: 3,450 Bytes
2a479da
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
/*
    [ CSS κΈ°λ³Έ 문법 ]
    AND μ—°μ‚°μž : μ„ νƒμž 사이에 곡백이 μ œκ±°λ˜λŠ” 경우 μ—¬λŸ¬ μ„ νƒμžλ₯Ό λ™μ‹œμ— λ§Œμ‘±ν•˜λŠ” νƒœκ·Έμ˜ μŠ€νƒ€μΌμ„ 적용
    OR μ—°μ‚°μž : 두 μ„ νƒμž 쀑 ν•˜λ‚˜λΌλ„ λ§Œμ‘±μ‹œ μ μš©λ˜λŠ” 쑰건 (μ‰Όν‘œλ₯Ό 톡해 두 μ„ νƒμž 쀑 ν•˜λ‚˜λΌλ„ λ§Œμ‘±μ‹œ 적용)


    ".a .b .c" : a클래슀 λ‚΄λΆ€μ˜ b클래슀 λ‚΄λΆ€μ˜ c클래슀 μš”μ†Œμ—λ§Œ μŠ€νƒ€μΌ 적용
    ".a.b.c" : 클래슀 속성 내에 a, b, c λͺ¨λ‘ μ„€μ •λœ λͺ¨λ“  μš”μ†Œλ“€μ„ 선택
    ".a, .b, .c" : μΌμΉ˜ν•˜λŠ” λͺ¨λ“  μš”μŠ€λ“€μ„ 선택
*/


.sec_cal {
    width: 360px; /* μ†μ„±μ˜ μš”μ†Œ λ„ˆλΉ„ */
    margin: 0 auto;
    font-family: "NotoSansR";
}

/* ".a .b .c" : a클래슀 λ‚΄λΆ€μ˜ b클래슀 λ‚΄λΆ€μ˜ c클래슀 μš”μ†Œμ—λ§Œ μŠ€νƒ€μΌ 적용 */
.sec_cal .cal_nav {
    display: flex;
    justify-content: center; /* κ°€λ‘œ 좕을 κΈ°μ€€μœΌλ‘œ μ’Œμš°μ— λŒ€ν•œ μ •λ ¬ */
    align-items: center; /* μ„Έλ‘œ 좕을 κΈ°μ€€μœΌλ‘œ μ •λ ¬ μœ„μ•„λž˜μ— λŒ€ν•œ μ •λ ¬ */
    font-weight: 700; /* 폰트(font)의 κ°€μ€‘μΉ˜(weight)λ‚˜ κ΅΅κΈ°(boldness)λ₯Ό λͺ…μ‹œ */
    font-size: 48px; /* 폰트(font)의 크기λ₯Ό 지정 */
    line-height: 78px; /* Sets the height of a line box (쀄간격) */
}

.sec_cal .cal_nav .year-month {
    width: 300px; /* μ†μ„±μ˜ μš”μ†Œ λ„ˆλΉ„ */
    text-align: center;
    line-height: 1;
}

.sec_cal .cal_nav .nav {
    display: flex;
    border: 1px solid #333333;
    border-radius: 5px;
}

.sec_cal .cal_nav .go-prev,
.sec_cal .cal_nav .go-next {
    display: block;
    width: 50px; /* μ†μ„±μ˜ μš”μ†Œ λ„ˆλΉ„ */
    height: 78px;
    font-size: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sec_cal .cal_nav .go-prev::before,
.sec_cal .cal_nav .go-next::before {
    content: "";
    display: block;
    width: 20px; /* μ†μ„±μ˜ μš”μ†Œ λ„ˆλΉ„ */
    height: 20px;
    border: 3px solid #000;
    border-width: 3px 3px 0 0;
    transition: border 0.1s;
}

.sec_cal .cal_nav .go-prev:hover::before,
.sec_cal .cal_nav .go-next:hover::before {
    border-color: #ed2a61;
}

.sec_cal .cal_nav .go-prev::before {
    transform: rotate(-135deg);
}

.sec_cal .cal_nav .go-next::before {
    transform: rotate(45deg);
}

.sec_cal .cal_wrap {
    padding-top: 40px;
    position: relative;
    margin: 0 auto;
}

.sec_cal .cal_wrap .days {
    display: flex;
    margin-bottom: 20px; /* μš”μ†Œ ν•˜λ‹¨μ˜ margin ν•˜λ‹¨μ˜ μ˜μ—­μ„ μ„€μ • (μ—¬μœ  곡간 μ„€μ •) */
    padding-bottom: 20px; /* μš”μ†Œμ˜ λ°”λ‹₯μ—μ„œ νŒ¨λ”© μ˜μ—­μ˜ 높이λ₯Ό μ„€μ • */
    border-bottom: 1px solid #ddd;
}

.sec_cal .cal_wrap::after {
    top: 368px;
}

.sec_cal .cal_wrap .day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% / 7); /* μ†μ„±μ˜ μš”μ†Œ λ„ˆλΉ„ */
    text-align: left;
    color: #999;
    font-size: 12px;
    text-align: center;
    border-radius: 5px;
}


/* <div class="day current today">1</div> */
.current.today {
    /* background: rgb(3, 179, 65); */
    background: rgb(242 242 242);
}

.sec_cal .cal_wrap .dates {
    display: flex;
    flex-flow: wrap;
    height: 290px;
}

/* Pseduo-Classes ( κ·Έ μ€‘μ—μ„œ Structural pseudo-classes ) */
.sec_cal .cal_wrap .day:nth-child(7n -1) {
    color: #3c6ffa;
}

/* Pseduo-Classes ( κ·Έ μ€‘μ—μ„œ Structural pseudo-classes ) */
.sec_cal .cal_wrap .day:nth-child(7n) {
    color: #ed2a61;
}

.sec_cal .cal_wrap .day.disable {
    color: #ddd;
}