wheeparam
/
practice-klpda
4
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

공지사항 게시판

master
kmj1996 4 years ago
parent
6c2b0a5a85
commit
b5aad9b904
7 changed files with 748 additions and 3 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 140
      dist/assets/css/style.css
  2. 2
      dist/assets/css/style.min.css
  3. 2
      dist/assets/css/style.min.css.map
  4. BIN
      dist/assets/images/notice-drop-btn.png
  5. 307
      dist/notice_list.html
  6. 155
      src/html/notice_list.html
  7. 143
      src/scss/pages/main.scss

140
dist/assets/css/style.css
View File

@ -12308,3 +12308,143 @@ header .btn .sign-up {
.section--cashinfo .container .bottom_img li a img { .section--cashinfo .container .bottom_img li a img {
height: 40px; height: 40px;
} }
.notice--visual {
background-image: url("../images/notice-visual.png");
background-repeat: no-repeat;
background-size: cover;
}
.notice--visual .container {
height: 333px;
}
.notice--visual .container .summary {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.notice--visual .container .summary .select-group {
display: flex;
align-items: center;
position: absolute;
width: 100%;
background: #fff;
left: 0;
bottom: 0;
border-bottom: 1px solid #ebebeb;
}
.notice--visual .container .summary .select-group .select-list {
display: flex;
align-items: center;
height: 100%;
}
.notice--visual .container .summary .select-group .select-list .sub-depth-1 {
position: relative;
width: 252px;
padding: 18px 26px 18px 17px;
border-right: 1px solid #ebebeb;
background-image: url("../images/notice-drop-btn.png");
background-repeat: no-repeat;
background-position-x: 92%;
background-position-y: center;
}
.notice--visual .container .summary .select-group .select-list .sub-depth-1:hover .sub-depth-2 {
display: block;
}
.notice--visual .container .summary .select-group .select-list .sub-depth-1 .sub-depth-2 {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
width: 100%;
border: 1px solid #cccccc;
}
.notice--visual .container .summary .select-group .select-list .sub-depth-1 .sub-depth-2 li a {
display: inline-block;
padding: 10px 0 10px 17px;
}
.notice--visual .container .summary .select-group .select-list .sub-depth-1 .sub-depth-2 li a:first-child {
padding-top: 15px;
}
.notice--visual .container .summary .select-group .select-list .sub-depth-1 .sub-depth-2 li a:last-child {
padding-bottom: 15px;
}
.notice--visual .container .summary .select-group .select-list .sub-depth-1 .sub-depth-2 li:hover {
background: #eaeaef;
}
.search-form .container {
height: 281px;
border-bottom: 1px solid red;
}
.search-form .container .search-notice {
display: flex;
justify-content: center;
align-items: center;
margin: 60px 0;
}
.search-form .container .search-notice h2 {
font-size: 36px;
letter-spacing: -0.04em;
line-height: 0.7em;
}
.search-form #search {
display: flex;
justify-content: center;
background-color: #f7f8f9;
padding: 26px 0;
}
.board .container .post_list {
width: 100%;
}
.board .container .post_list thead tr th {
padding: 15px;
text-align: center;
}
.board .container .post_list .tbody tr {
border-bottom: 1px solid #e9e9e9;
}
.board .container .post_list .tbody tr td {
padding: 15px;
letter-spacing: -0.02em;
}
.board .container .post_list .tbody tr td:not(.table-left) {
text-align: center;
}
.board .noti-pagi-wrap .container .notice--pagination {
display: flex;
justify-content: center;
margin-top: 30px;
margin-bottom: 90px;
}
.board .noti-pagi-wrap .container .notice--pagination li {
display: flex;
align-items: center;
}
.board .noti-pagi-wrap .container .notice--pagination li a {
padding: 10px;
}

2
dist/assets/css/style.min.css
File diff suppressed because it is too large
View File

2
dist/assets/css/style.min.css.map
File diff suppressed because it is too large
View File

BIN
dist/assets/images/notice-drop-btn.png
View File

Side by Side

After

Width: 9  |  Height: 5  |  Size: 110 B

307
dist/notice_list.html
View File

@ -0,0 +1,307 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>메인 페이지</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/notosanskr.css">
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
<link rel="stylesheet" href="./assets/css/style.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="./assets/js/common.min.js"></script>
</head>
<body>
<!--S: 숨김 메뉴-->
<ul class="sr-only sr-only-focusable">
<li><a href="#contents">컨텐츠 바로가기</a></li>
<li><a href="#nav">메뉴 바로가기</a></li>
</ul>
<!--E: 숨김 메뉴-->
<!--S: 헤더 영역-->
<header class="section">
<div class="container">
<div class="logo-group">
<div class="logo">
<img src="./images/logo.png" alt="로고">
<a href="#">대한탐정연합회</a>
</div>
</div>
<nav class="menu-group">
<ul class="main-menu depth-1">
<li class="depth-1-item item-list">
<a href="#" class="first-target">협회소개</a>
<ul class="depth-2">
<li><a href="#">중앙회장 인사말</a></li>
<li><a href="#">협회 연혁</a></li>
<li><a href="#">협회 조직도</a></li>
<li><a href="#">협회 정관</a></li>
<li><a href="#">신조 및 윤리강령</a></li>
<li><a href="#">대탐연 저서소개</a></li>
<li><a href="#">협력기관</a></li>
<li><a href="#">찾아오시는길</a></li>
</ul>
</li>
<li class="depth-1-item item-list">
<a href="#" class="first-target">정보탐색사란</a>
<ul class="depth-2">
<li><a href="#">정탐사자격시험 안내</a></li>
<li><a href="#">정탐사 운영규정</a></li>
<li><a href="#">민간자격 등록요건 <br>및 이행조건</a></li>
</ul>
</li>
<li class="depth-1-item item-list">
<a href="#" class="first-target">시험공고</a>
<ul class="depth-2">
<li><a href="#">검정시험 공고문</a></li>
<li><a href="#">공고문</a></li>
<li><a href="#">최고위 과정 공고문</a></li>
<li><a href="#">합격자발표</a></li>
</ul>
</li>
<li class="depth-1-item ">
<a href="#" class="first-target">원격강의</a>
</li>
<li class="depth-1-item item-list">
<a href="#" class="first-target">자료실</a>
<ul class="depth-2">
<li><a href="">응시원서(매니저급)</a></li>
<li><a href="">응시원서(1급)</a></li>
<li><a href="#">최고위(CEO) 지원서</a></li>
<li><a href="#">기본(보수)교육 <br>신청서</a></li>
<li><a href="#">접수취소 및 환불 <br>신청서</a></li>
</ul>
</li>
<li class="depth-1-item item-list">
<a href="#" class="first-target">고객지원</a>
<ul class="depth-2">
<li><a href="#">공지사항</a></li>
<li><a href="#">탐정관련 기고</a></li>
<li><a href="#">보도자료</a></li>
<li><a href="#">자주묻는질문</a></li>
<li><a href="#">시험관련문의</a></li>
</ul>
</li>
</ul>
</nav>
<div class="btn">
<a href="#" class="sign-in">로그인</a>
<a href="#" class="sign-up">회원가입</a>
</div>
</div>
</header>
<!--E: 헤더 영역-->
<!--S: 컨텐츠 영역-->
<section id="contents">
<div class="section notice--visual ">
<div class="container">
<div class="summary">
<h2>고객지원</h2>
<div class="select-group">
<img src="assets/images/notice_logo.png" alt="">
<ul class="select-list">
<li class="sub-depth-1 item-list">
<a href="#" class="first-target">고객지원</a>
<ul class="sub-depth-2">
<li><a href="#">협회소개</a></li>
<li><a href="#">정보탑색사란</a></li>
<li><a href="#">시험공고</a></li>
<li><a href="#">원격강의</a></li>
<li><a href="#">자료실</a></li>
<li><a href="#">고객지원</a></li>
</ul>
</li>
<li class="sub-depth-1 item-list">
<a href="#" class="first-target">공지사항</a>
<ul class="sub-depth-2">
<li><a href="#">공지사항</a></li>
<li><a href="#">탐정관련 기고</a></li>
<li><a href="#">보도자료</a></li>
<li><a href="#">자주묻는질문</a></li>
<li><a href="#">시험관련문의</a></li>
</ul>
</ul>
</div>
</div>
</div>
</div>
<div class="section search-form">
<div class="container">
<div class="search-notice">
<h2>공지사항</h2>
</div>
<form id="search" method="post">
<input type="text" placeholder="검색어를 입력해주세요.">
<a href="#" class="search_img">
<img src="assets/images/search.png" alt="">
</a>
</form>
</div>
</div>
<div class="section board">
<div class="container">
<table class="post_list">
<colgroup>
<col width="120px">
<col width="800px">
<col width="120px" span="2">
</colgroup>
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>작성일</th>
<th>조회수</th>
</tr>
</thead>
<tbody class="tbody">
<tr>
<td>공</td>
<td class="table-left">대탐험 전국영위원회 운영위원 초빙</td>
<td>2019.03.05</td>
<td>30</td>
</tr>
<tr>
<td>공</td>
<td class="table-left">2019년 탐정아카데미 신입</td>
<td>020204</td>
<td>30</td>
</tr>
<tr>
<td>12</td>
<td class="table-left">2019년 탐정아카데미 신입33</td>
<td>2019.05.30</td>
<td>30</td>
</tr>
<tr>
<td>11</td>
<td class="table-left">2019년 탐정아카데미 신입3333</td>
<td>2019.06.30</td>
<td>30</td>
</tr>
<tr>
<td>10</td>
<td class="table-left">2019년 탐정아카데미 신입4444</td>
<td>2019.07.30</td>
<td>30</td>
</tr>
<tr>
<td>9</td>
<td class="table-left">2019년 탐정아카데미 신입5555</td>
<td>2019.08.30</td>
<td>30</td>
</tr>
<tr>
<td>8</td>
<td class="table-left">2019년 탐정아카데미 신입6663</td>
<td>2019.09.30</td>
<td>30</td>
</tr>
<tr>
<td>7</td>
<td class="table-left">2019년 탐정아카데미 신입7777</td>
<td>2019.10.30</td>
<td>30</td>
</tr>
<tr>
<td>6</td>
<td class="table-left">2019년 탐정아카데미 신입8888</td>
<td>2019.11.30</td>
<td>30</td>
</tr>
<tr>
<td>5</td>
<td class="table-left">2019년 탐정아카데미 신입9999</td>
<td>2019.12.30</td>
<td>30</td>
</tr>
</tbody>
</table>
</div>
<div class="noti-pagi-wrap">
<div class="container">
<ul class="notice--pagination">
<li><a href="#"><img src="assets/images/left_pagination.png" alt=""></a></li>
<li><a href="#"><img src="assets/images/left2_pagination.png" alt=""></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#"><img src="assets/images/right2_pagination.png" alt=""></a></li>
<li><a href="#"><img src="assets/images/right_pagination.png" alt=""></a></li>
</ul>
</div>
</div>
</section>
<!--E: 컨텐츠 영역-->
<!--S: 푸터 영역-->
<footer class="footer_nav ">
<div class="container">
<ul class="footer_list">
<li><a href="">개인정보보호정책</a></li>
<li><a href="">이용약관</a></li>
<li><a href="">정탐사 운영규정(시험일반규정)</a></li>
<li><a href="">신분증규정</a></li>
<li><a href="">부정행위 처리규정</a></li>
<li><a href="">접수취소 및 환불규정</a></li>
<li><a href="">고객센터</a></li>
</ul>
</div>
<div class="footer_info">
<div class="footer_container">
<ul class="company_address">
<li>주소:서울특별시마포구마포대로15</li>
<li>대표자:정수상</li>
<li>전화번호:02.333.5555</li>
<li>팩스번호:02.6666.6666</li>
</ul>
<ul class="business_num">
<li>사업자등록번호:384-90-00900</li>
<li>통신판매번호:2910-00001 사업자정보</li>
<li>전자우편</li>
</ul>
<p>Copyright@2019대한텀정연합회.All Right Reserved</p>
<img src="../images/footer_logo.png" alt="">
</div>
</div>
</footer>
<!--E: 푸터 영역-->
</body>
</html>

155
src/html/notice_list.html
View File

@ -0,0 +1,155 @@
@@include("./include/meta.html", {"pageTitle" : "메인 페이지"})
@@include("./include/header.html")
<div class="section notice--visual ">
<div class="container">
<div class="summary">
<h2>고객지원</h2>
<div class="select-group">
<img src="assets/images/notice_logo.png" alt="">
<ul class="select-list">
<li class="sub-depth-1 item-list">
<a href="#" class="first-target">고객지원</a>
<ul class="sub-depth-2">
<li><a href="#">협회소개</a></li>
<li><a href="#">정보탑색사란</a></li>
<li><a href="#">시험공고</a></li>
<li><a href="#">원격강의</a></li>
<li><a href="#">자료실</a></li>
<li><a href="#">고객지원</a></li>
</ul>
</li>
<li class="sub-depth-1 item-list">
<a href="#" class="first-target">공지사항</a>
<ul class="sub-depth-2">
<li><a href="#">공지사항</a></li>
<li><a href="#">탐정관련 기고</a></li>
<li><a href="#">보도자료</a></li>
<li><a href="#">자주묻는질문</a></li>
<li><a href="#">시험관련문의</a></li>
</ul>
</ul>
</div>
</div>
</div>
</div>
<div class="section search-form">
<div class="container">
<div class="search-notice">
<h2>공지사항</h2>
</div>
<form id="search" method="post">
<input type="text" placeholder="검색어를 입력해주세요.">
<a href="#" class="search_img">
<img src="assets/images/search.png" alt="">
</a>
</form>
</div>
</div>
<div class="section board">
<div class="container">
<table class="post_list">
<colgroup>
<col width="120px">
<col width="800px">
<col width="120px" span="2">
</colgroup>
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>작성일</th>
<th>조회수</th>
</tr>
</thead>
<tbody class="tbody">
<tr>
<td>공</td>
<td class="table-left">대탐험 전국영위원회 운영위원 초빙</td>
<td>2019.03.05</td>
<td>30</td>
</tr>
<tr>
<td>공</td>
<td class="table-left">2019년 탐정아카데미 신입</td>
<td>020204</td>
<td>30</td>
</tr>
<tr>
<td>12</td>
<td class="table-left">2019년 탐정아카데미 신입33</td>
<td>2019.05.30</td>
<td>30</td>
</tr>
<tr>
<td>11</td>
<td class="table-left">2019년 탐정아카데미 신입3333</td>
<td>2019.06.30</td>
<td>30</td>
</tr>
<tr>
<td>10</td>
<td class="table-left">2019년 탐정아카데미 신입4444</td>
<td>2019.07.30</td>
<td>30</td>
</tr>
<tr>
<td>9</td>
<td class="table-left">2019년 탐정아카데미 신입5555</td>
<td>2019.08.30</td>
<td>30</td>
</tr>
<tr>
<td>8</td>
<td class="table-left">2019년 탐정아카데미 신입6663</td>
<td>2019.09.30</td>
<td>30</td>
</tr>
<tr>
<td>7</td>
<td class="table-left">2019년 탐정아카데미 신입7777</td>
<td>2019.10.30</td>
<td>30</td>
</tr>
<tr>
<td>6</td>
<td class="table-left">2019년 탐정아카데미 신입8888</td>
<td>2019.11.30</td>
<td>30</td>
</tr>
<tr>
<td>5</td>
<td class="table-left">2019년 탐정아카데미 신입9999</td>
<td>2019.12.30</td>
<td>30</td>
</tr>
</tbody>
</table>
</div>
<div class="noti-pagi-wrap">
<div class="container">
<ul class="notice--pagination">
<li><a href="#"><img src="assets/images/left_pagination.png" alt=""></a></li>
<li><a href="#"><img src="assets/images/left2_pagination.png" alt=""></a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#"><img src="assets/images/right2_pagination.png" alt=""></a></li>
<li><a href="#"><img src="assets/images/right_pagination.png" alt=""></a></li>
</ul>
</div>
</div>
@@include("./include/footer.html")
@@include("./include/tail.html")

143
src/scss/pages/main.scss
View File

@ -466,3 +466,146 @@
} }
} }
} }
//---------NOTICE-LIST
.notice--visual {
background-image: url("../images/notice-visual.png");
background-repeat: no-repeat;
background-size: cover;
.container {
height: 333px;
.summary {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
.select-group {
display: flex;
align-items: center;
position: absolute;
width: 100%;
background: #fff;
left: 0;
bottom: 0;
border-bottom: 1px solid #ebebeb;
.select-list {
display: flex;
align-items: center;
height: 100%;
.sub-depth-1 {
position: relative;
width: 252px;
padding: 18px 26px 18px 17px;
border-right: 1px solid #ebebeb;
background-image: url("../images/notice-drop-btn.png");
background-repeat: no-repeat;
background-position-x: 92%;
background-position-y: center;
&:hover {
.sub-depth-2 {display: block;}
}
.sub-depth-2 {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
width: 100%;
border: 1px solid #cccccc;
li {
a{
display: inline-block;
padding: 10px 0 10px 17px;
&:first-child {padding-top: 15px;}
&:last-child {padding-bottom: 15px;}
}
&:hover {
background: #eaeaef;
}
}
}
}
}
}
}
}
}
//---검색창
.search-form {
.container {
height: 281px;
border-bottom: 1px solid red;
.search-notice {
display: flex;
justify-content: center;
align-items: center;
margin: 60px 0;
h2 {
font-size: 36px;
letter-spacing: -0.04em;
line-height: 0.7em;
}
}
}
#search {
display: flex;
justify-content: center;
background-color: #f7f8f9;
padding: 26px 0;
}
}
//---게시판--
.board {
.container {
.post_list {
width: 100%;
thead {
tr {
th {
padding: 15px;
text-align: center;
}
}
}
.tbody {
tr {
border-bottom: 1px solid #e9e9e9;
td {
padding: 15px;
letter-spacing: -0.02em;
&:not(.table-left) {
text-align: center;
}
}
}
}
}
}
.noti-pagi-wrap {
.container {
.notice--pagination {
display: flex;
justify-content: center;
margin-top: 30px;
margin-bottom: 90px;
li {
display: flex;
align-items: center;
a {
padding: 10px;
}
}
}
}
}
}
Write Preview
Loading…
Cancel
Save