Spaces:
Runtime error
Runtime error
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;
}
|