Commit @a6de6c4bd732ab0e2836fdcfccb2dc0f9a103fb6

DESKTOP-CA1CHOC\FoxEdu 10-14

나의강의실 퍼블 진행중

@a6de6c4bd732ab0e2836fdcfccb2dc0f9a103fb6

a6de6c4

html/onSejong/manager/myclass/attend.html (added)

+++ html/onSejong/manager/myclass/attend.html

...	...	@@ -0,0 +1,329 @@
	1	+<!DOCTYPE html>
	2	+<html lang="ko">
	3	+
	4	+<head>
	5	+ <title>온세종학교</title>
	6	+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	7	+ <meta name="Author" content="" />
	8	+ <meta name="Keywords" content="" />
	9	+ <meta name="Description" content="" />
	10	+ <meta name="format-detection" content="telephone=no" />
	11	+ <meta http-equiv="X-UA-Compatible" content="IE=edge" />
	12	+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0" />
	13	+ <link href="/resources/front/site/SITE_00000/css/style.css" rel="stylesheet" />
	14	+ <!-- 공통 plugin -->
	15	+ <script src="/resources/front/site/SITE_00000/js/common/jquery/jquery-3.6.0.min.js"></script>
	16	+ <script src="/resources/front/site/SITE_00000/js/common/jquery/jquery-ui.min.js"></script>
	17	+ <!-- //공통 plugin -->
	18	+ <!-- 페이지 plugin-->
	19	+ <script src="/resources/front/site/SITE_00000/js/common/vendor/swiper/swiper-bundle.js"></script>
	20	+ <script src="/resources/front/site/SITE_00000/js/common/vendor/etc/jQuery.tagify.min.js"></script>
	21	+ <!-- chart -->
	22	+ <script src="/resources/front/site/SITE_00000/js/common/vendor/chart/chart4.3.0.js"></script>
	23	+ <script src="/resources/front/site/SITE_00000/js/common/vendor/chart/chartjs-plugin-datalabels@2.0.js"></script>
	24	+ <!-- //chart -->
	25	+ <!-- //페이지 plugin-->
	26	+ <!-- 공통 퍼블 layout: 개발시 삭제-->
	27	+ <script src="/resources/front/site/SITE_00000/js/_layout.js"></script>
	28	+ <!--//퍼블 layout-->
	29	+ <!-- 공통 메뉴 js-->
	30	+ <!-- //공통 메뉴 js -->
	31	+ <!--공통 퍼블 js-->
	32	+ <script src="/resources/front/site/SITE_00000/js/common.js"></script>
	33	+ <script src="/resources/front/site/SITE_00000/js/common-custom.js"></script>
	34	+ <!--//공통 퍼블 js-->
	35	+</head>
	36	+
	37	+<body>
	38	+ <div class="accessibility">
	39	+ <a href="#skipToContents" title="콘텐츠를 바로 볼 수 있도록 건너뛰기합니다.">콘텐츠 바로가기</a>
	40	+ </div>
	41	+ <!-- for-teacher / for-student -->
	42	+ <div class="container">
	43	+ <!-- 통합 헤더 및 네비게이션 -->
	44	+ <header class="site-header"></header>
	45	+ <div class="site-body" id="skipToContents">
	46	+ <div class="wrap">
	47	+ <aside class="lnb"></aside>
	48	+ <div class="site-cont">
	49	+ <ul class="breadcrumb">
	50	+ <li><a href="#none" class="home">홈</a></li>
	51	+ <li><a href="#none">1depth</a></li>
	52	+ <li><a href="#none">2depth</a></li>
	53	+ </ul>
	54	+ <div class="page-tit-area">
	55	+ <div class="l-area">
	56	+ <h2 class="title-xlg">출석관리</h2>
	57	+ </div>
	58	+ </div>
	59	+ <section class="section">
	60	+ <h3 class="txt-hide">과정 정보</h3>
	61	+ <div class="fnc-area">
	62	+ <div class="l-area">
	63	+ <div class="btn-group">
	64	+ <button class="btn secondary ico-setting">휴/보강설정</button>
	65	+ <button class="btn">휴/보강이력조회</button>
	66	+ </div>
	67	+ </div>
	68	+ <div class="r-area">
	69	+ <div class="btn-group">
	70	+ <button class="btn sm ico-download">엑셀 다운로드</button>
	71	+ <button class="btn sm ico-upload">엑셀 업로드</button>
	72	+ <button class="btn sm ico-print">인쇄하기</button>
	73	+ </div>
	74	+ </div>
	75	+ </div>
	76	+ <div class="write-type">
	77	+ <table>
	78	+ <caption>과정 정보 표</caption>
	79	+ <colgroup>
	80	+ <col style="width: 16rem;">
	81	+ <col>
	82	+ <col style="width: 16rem;">
	83	+ <col>
	84	+ </colgroup>
	85	+ <tbody>
	86	+ <tr>
	87	+ <th scope="col">과정</th>
	88	+ <td>인공지능 수학 (2025년2학기)</td>
	89	+ <th scope="col">담당교사</th>
	90	+ <td>김세종</td>
	91	+ </tr>
	92	+ <tr>
	93	+ <th scope="col">요일·시간</th>
	94	+ <td colspan="3">[화 7], [수 5], [목 4]</td>
	95	+ </tr>
	96	+ </tbody>
	97	+ </table>
	98	+ </div>
	99	+ </section>
	100	+ <section class="section">
	101	+ <h3 class="txt-hide">학생 목록</h3>
	102	+ <div class="fnc-extend-area">
	103	+ <div class="extend-default-area">
	104	+ <div class="l-area">
	105	+ <p class="total">총 <em>156</em>건</p>
	106	+ </div>
	107	+ <div class="r-area">
	108	+ <select class="select-sort border-none" title="정렬 선택">
	109	+ <option>학교 이름 오름차순</option>
	110	+ </select>
	111	+ <fieldset class="search-area">
	112	+ <legend>검색</legend>
	113	+ <div class="search-option" title="검색 옵션 선택">
	114	+ <select title="선택">
	115	+ <option>전체</option>
	116	+ <option>이름</option>
	117	+ <option>학교</option>
	118	+ </select>
	119	+ </div>
	120	+ <div class="search">
	121	+ <input type="text" placeholder="검색어를 입력하세요" title="검색어를 입력하세요">
	122	+ <button class="btn ico-search">검색</button>
	123	+ </div>
	124	+ </fieldset>
	125	+ </div>
	126	+ </div>
	127	+ <div class="extend-fnc-area">
	128	+ <div class="l-area">
	129	+ <div class="btn-group">
	130	+ <button class="btn sm">출석</button>
	131	+ <button class="btn sm">조퇴</button>
	132	+ <button class="btn sm">지각</button>
	133	+ <button class="btn sm">공결</button>
	134	+ <button class="btn sm">결석</button>
	135	+ </div>
	136	+ </div>
	137	+ </div>
	138	+ </div>
	139	+ <div class="info-type table-sticky" data-sot-left="5">
	140	+ <table>
	141	+ <caption>학생 목록</caption>
	142	+ <colgroup>
	143	+ <col style="width: 6.4rem">
	144	+ <col style="width: 6.4rem">
	145	+ <col style="width: 16rem">
	146	+ <col style="width: 10rem">
	147	+ <col style="width: 12rem">
	148	+ <col>
	149	+ <col>
	150	+ <col>
	151	+ <col>
	152	+ </colgroup>
	153	+ <thead>
	154	+ <tr>
	155	+ <th scope="row" rowspan="2">연번</th>
	156	+ <th scope="row" rowspan="2">학년</th>
	157	+ <th scope="row" rowspan="2">학교</th>
	158	+ <th scope="row" rowspan="2">반/번호</th>
	159	+ <th scope="row" rowspan="2">성명</th>
	160	+ <td>
	161	+ <div class="checkradio">
	162	+ <input type="checkbox" id="c1">
	163	+ <label for="c1">1</label>
	164	+ </div>
	165	+ </td>
	166	+ <td>
	167	+ <div class="checkradio">
	168	+ <input type="checkbox" id="c2">
	169	+ <label for="c2">2</label>
	170	+ </div>
	171	+ </td>
	172	+ <td>
	173	+ <div class="checkradio">
	174	+ <input type="checkbox" id="c3">
	175	+ <label for="c3">3</label>
	176	+ </div>
	177	+ </td>
	178	+ <td>
	179	+ <div class="checkradio">
	180	+ <input type="checkbox" id="c4">
	181	+ <label for="c4">4</label>
	182	+ </div>
	183	+ </td>
	184	+ <td>
	185	+ <div class="checkradio">
	186	+ <input type="checkbox" id="c5">
	187	+ <label for="c5">5</label>
	188	+ </div>
	189	+ </td>
	190	+ </tr>
	191	+ <tr>
	192	+ <td>2025-09-01</td>
	193	+ <td>2025-09-01</td>
	194	+ <td>2025-09-01</td>
	195	+ <td>2025-09-01</td>
	196	+ <td>2025-09-01</td>
	197	+ </tr>
	198	+ </thead>
	199	+ <tbody>
	200	+ <tr>
	201	+ <td>1</td>
	202	+ <td>2</td>
	203	+ <td>세종중학교</td>
	204	+ <td>1/1</td>
	205	+ <td>홍길동</td>
	206	+ <td>출석</td>
	207	+ <td><em class="font-color-red">결석</em></td>
	208	+ <td>출석</td>
	209	+ <td><em class="accent">지각</em></td>
	210	+ <td>출석</td>
	211	+ </tr>
	212	+ <tr class="disabled">
	213	+ <td>1</td>
	214	+ <td>2</td>
	215	+ <td>세종중학교</td>
	216	+ <td>1/1</td>
	217	+ <td><span class="label sm">중지</span> 홍길동</td>
	218	+ <td>출석</td>
	219	+ <td><em class="font-color-red">결석</em></td>
	220	+ <td>출석</td>
	221	+ <td><em class="accent">지각</em></td>
	222	+ <td>출석</td>
	223	+ </tr>
	224	+ </tbody>
	225	+ </table>
	226	+ </div>
	227	+ <ul class="pagenation">
	228	+ <li class="ppv">
	229	+ <a href="#none" class="btn ico-ppv circle sm" title="전체 목록에서 가장 처음 목록으로 이동합니다">처음으로</a>
	230	+ </li>
	231	+ <li class="pv">
	232	+ <a href="#none" class="btn ico-pv circle sm" title="이전 목록으로 이동합니다">이전으로</a>
	233	+ </li>
	234	+ <li class="current">
	235	+ <span title="현재 페이지">1</span>
	236	+ </li>
	237	+ <li>
	238	+ <a href="#none" title="2번째 목록으로 이동합니다">2</a>
	239	+ </li>
	240	+ <li>
	241	+ <a href="#none" title="3번째 목록으로 이동합니다">3</a>
	242	+ </li>
	243	+ <li>
	244	+ <a href="#none" title="4번째 목록으로 이동합니다">4</a>
	245	+ </li>
	246	+ <li>
	247	+ <a href="#none" title="5번째 목록으로 이동합니다">5</a>
	248	+ </li>
	249	+ <li class="fw">
	250	+ <a href="#none" class="btn ico-fw circle sm" title="다음 목록으로 이동합니다">다음으로</a>
	251	+ </li>
	252	+ <li class="ffw">
	253	+ <a href="#none" class="btn ico-ffw circle sm" title="전체 목록에서 가장 마지막 목록으로 이동합니다">끝으로</a>
	254	+ </li>
	255	+ </ul>
	256	+ </section>
	257	+ <section class="section">
	258	+ <h3 class="txt-hide">학생 목록</h3>
	259	+ <ul class="user-state-list">
	260	+ <li class="is-active">
	261	+ <div class="profile lg">
	262	+ <div class="img-area">
	263	+ <figure>
	264	+ <img src="/resources/front/site/SITE_00000/images/common/profile/profile.svg"
	265	+ alt="프로필 썸네일">
	266	+ </figure>
	267	+ </div>
	268	+ </div>
	269	+ <div class="txt-area">
	270	+ <small>2학년 1반 2번</small>
	271	+ <strong>홍길동</strong>
	272	+ </div>
	273	+ </li>
	274	+ <li class="is-active">
	275	+ <div class="profile lg">
	276	+ <div class="img-area">
	277	+ <figure>
	278	+ <img src="/resources/front/site/SITE_00000/images/common/profile/profile.svg"
	279	+ alt="프로필 썸네일">
	280	+ </figure>
	281	+ </div>
	282	+ </div>
	283	+ <div class="txt-area">
	284	+ <small>2학년 1반 2번</small>
	285	+ <strong>홍길동</strong>
	286	+ </div>
	287	+ </li>
	288	+ <li class="is-active">
	289	+ <div class="profile lg">
	290	+ <div class="img-area">
	291	+ <figure>
	292	+ <img src="/resources/front/site/SITE_00000/images/common/profile/profile.svg"
	293	+ alt="프로필 썸네일">
	294	+ </figure>
	295	+ </div>
	296	+ </div>
	297	+ <div class="txt-area">
	298	+ <small>2학년 1반 2번</small>
	299	+ <strong>홍길동</strong>
	300	+ </div>
	301	+ </li>
	302	+ <li class="is-active">
	303	+ <div class="profile lg">
	304	+ <div class="img-area">
	305	+ <figure>
	306	+ <img src="/resources/front/site/SITE_00000/images/common/profile/profile.svg"
	307	+ alt="프로필 썸네일">
	308	+ </figure>
	309	+ </div>
	310	+ </div>
	311	+ <div class="txt-area">
	312	+ <small>2학년 1반 2번</small>
	313	+ <strong>홍길동</strong>
	314	+ </div>
	315	+ </li>
	316	+ </ul>
	317	+ </section>
	318	+ </div>
	319	+ </div>
	320	+ </div>
	321	+ <footer class="site-footer"></footer>
	322	+ </div>
	323	+ <!-- toast -->
	324	+ <div class="toast"></div>
	325	+ <!--popup-->
	326	+ <div class="dim"></div>
	327	+</body>
	328	+
	329	+</html>(파일 끝에 줄바꿈 문자 없음)

10c0611

a6de6c4

resources/front/site/SITE_00000/css/common/component/_table.scss

--- resources/front/site/SITE_00000/css/common/component/_table.scss

+++ resources/front/site/SITE_00000/css/common/component/_table.scss


 			border-right: none;
 		}
 	}
+	tr + .disabled {
+		background-color: $color-background-disabled-primary;
+		color: $color-font-disabled-primary;
+	}
 	thead th {
 		text-align: center;
 	}

10c0611

a6de6c4

resources/front/site/SITE_00000/css/custom/page/_class.scss

--- resources/front/site/SITE_00000/css/custom/page/_class.scss

+++ resources/front/site/SITE_00000/css/custom/page/_class.scss


 		filter: grayscale(1);
 		opacity: .3;
 	}
+	.txt-area {
+		text-align: center;
+		small {
+			display: block;
+			@include typo("label-sm",'em');
+			color: $color-font-default-quaternary;
+			margin-bottom: $spacing-2xsm;
+		}
+		strong {
+			display: block;
+			@include typo("label-md");
+		}
+	}
 }
 .attendance-state-list {
 	display: flex;

10c0611

a6de6c4

resources/front/site/SITE_00000/css/style.css

--- resources/front/site/SITE_00000/css/style.css

+++ resources/front/site/SITE_00000/css/style.css

...	...	@@ -7956,6 +7956,10 @@
7956	7956	.info-type td:last-child {
7957	7957	border-right: none;
7958	7958	}
	7959	+.info-type tr + .disabled {
	7960	+ background-color: var(--color-background-disabled-primary);
	7961	+ color: var(--color-font-disabled-primary);
	7962	+}
7959	7963	.info-type thead th {
7960	7964	text-align: center;
7961	7965	}
...	...	@@ -30157,6 +30161,24 @@
30157	30161	filter: grayscale(1);
30158	30162	opacity: 0.3;
30159	30163	}
	30164	+.user-state-list .txt-area {
	30165	+ text-align: center;
	30166	+}
	30167	+.user-state-list .txt-area small {
	30168	+ display: block;
	30169	+ font-size: var(--font-label-sm);
	30170	+ font-weight: var(--size-font-weight-md);
	30171	+ line-height: var(--size-font-lineheight-xsm);
	30172	+ font-weight: var(--size-font-weight-xlg);
	30173	+ color: var(--color-font-default-quaternary);
	30174	+ margin-bottom: 0.4rem;
	30175	+}
	30176	+.user-state-list .txt-area strong {
	30177	+ display: block;
	30178	+ font-size: var(--font-label-md);
	30179	+ font-weight: var(--size-font-weight-md);
	30180	+ line-height: var(--size-font-lineheight-xsm);
	30181	+}
30160	30182
30161	30183	.attendance-state-list {
30162	30184	display: -webkit-box;

10c0611

a6de6c4

resources/front/site/SITE_00000/css/style.css.map

--- resources/front/site/SITE_00000/css/style.css.map

+++ resources/front/site/SITE_00000/css/style.css.map

This diff is too big to display.

Add a comment

Open 0
Closed 0

List

...	...	@@ -279,6 +279,10 @@
279	279	border-right: none;
280	280	}
281	281	}
	282	+ tr + .disabled {
	283	+ background-color: $color-background-disabled-primary;
	284	+ color: $color-font-disabled-primary;
	285	+ }
282	286	thead th {
283	287	text-align: center;
284	288	}

...	...	@@ -232,6 +232,19 @@
232	232	filter: grayscale(1);
233	233	opacity: .3;
234	234	}
	235	+ .txt-area {
	236	+ text-align: center;
	237	+ small {
	238	+ display: block;
	239	+ @include typo("label-sm",'em');
	240	+ color: $color-font-default-quaternary;
	241	+ margin-bottom: $spacing-2xsm;
	242	+ }
	243	+ strong {
	244	+ display: block;
	245	+ @include typo("label-md");
	246	+ }
	247	+ }
235	248	}
236	249	.attendance-state-list {
237	250	display: flex;

Delete comment