[ # 2ํ์ฐจ ์ ๋ณด ]
- 2024๋ 1์ 8์ผ 19:00 - 22:00
- Discord ์์ ํตํ๋ก ์จ๋ผ์ธ ์คํฐ๋ ํ์ ์งํ
[ # 2ํ์ฐจ ๊ฐ์ธ ๋ชฉํ ]
๋์๋ฆฌ ํํ์ด์ง FE
- ์ปค๋ฎค๋ํฐ ๊ฒ์ํ ํ์ด์ง ๊ธฐ์ด ๋ฐ ๊ธฐํ ๋งํฌ ์ฐ๊ฒฐ
[ # 2ํ์ฐจ ๊ฐ์ธ ํ๋ ๋ด์ฉ ]
#HTML
<!DOCTYPE html>
<html>
<head>
<!-- Basic -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- Mobile Metas -->
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<!-- Site Metas -->
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<link rel="shortcut icon" href="images/favicon.png" type="">
<title> ARGOS </title>
<!-- bootstrap core css -->
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
<!-- fonts style -->
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap" rel="stylesheet">
<!--owl slider stylesheet -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" />
<!-- font awesome style -->
<link href="css/font-awesome.min.css" rel="stylesheet" />
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet" />
<!-- responsive style -->
<link href="css/responsive.css" rel="stylesheet" />
</head>
<body class="sub_page">
<div class="hero_area">
<div class="hero_bg_box">
<div class="bg_img_box">
<img src="images/hero-bg.png" alt="">
</div>
</div>
<!-- header section strats -->
<header class="header_section">
<div class="container-fluid">
<nav class="navbar navbar-expand-lg custom_nav-container ">
<a class="navbar-brand" href="index.html">
<span>
ARGOS
</span>
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class=""> </span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ">
<li class="nav-item ">
<a class="nav-link" href="index.html">Home </a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="history.html">History</a>
</li>
<li class="nav-item">
<a class="nav-link" href="education.html">Education</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="community.html">Community <span class="sr-only">(current)</span> </a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> <i class="fa fa-user" aria-hidden="true"></i> Login</a>
</li>
<form class="form-inline">
<button class="btn my-2 my-sm-0 nav_search-btn" type="submit">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</form>
</ul>
</div>
</nav>
</div>
</header>
<!-- end header section -->
</div>
<!-- board_list section -->
<section class="board_list section layout_padding">
<div class="board_list_wrap">
<table class="board_list">
<caption>๊ฒ์ํ ๋ชฉ๋ก</caption>
<thead>
<tr>
<th>๋ฒํธ</th>
<th>์ ๋ชฉ</th>
<th>๊ธ์ด์ด</th>
<th>์์ฑ์ผ</th>
<th>์กฐํ</th>
</tr>
</thead>
<tbody>
<tr>
<td class="num">5</td>
<td class="title">
<a href="#">์ปดํจํฐ์ตํฉํ๋ถ ์ต๊ณ </a>
</td>
<td class="writer">๊ด๋ฆฌ์</td>
<td class="date">2024-01-05</td>
<td class="hits">105</td>
</tr>
<tr>
<td class="num">4</td>
<td class="title">
<a href="#">'Hack the world for everyone'</a>
</td>
<td class="writer">๊ด๋ฆฌ์</td>
<td class="date">2003-06-25</td>
<td class="hits">625</td>
</tr>
<tr>
<td class="num">3</td>
<td class="title">
<a href="#">ARGOS = ๊ทธ๋ฆฌ์ค ์ ํ์ ๋์ค๋ '100๊ฐ์ ๋์ ๊ฐ์ง ๋ฌธ์ง๊ธฐ'</a>
</td>
<td class="writer">๊ด๋ฆฌ์</td>
<td class="date">2003-06-25</td>
<td class="hits">625</td>
</tr>
<tr>
<td class="num">2</td>
<td class="title">
<a href="#">ARGOS ๊ณต์ง์ฌํญ</a>
</td>
<td class="writer">๊ด๋ฆฌ์</td>
<td class="date">2003-06-25</td>
<td class="hits">625</td>
</tr>
<tr>
<td class="num">1</td>
<td class="title">
<a href="#">์ถฉ๋จ๋ํ๊ต ์ ๋ณด๋ณดํธ ๋์๋ฆฌ ARGOS์ ์ค์ ๊ฒ์ ํ์ํฉ๋๋ค.</a>
</td>
<td class="writer">๊ด๋ฆฌ์</td>
<td class="date">2003-06-25</td>
<td class="hits">625</td>
</tr>
</tbody>
</table>
<div class="paging">
<a href="#" class="btn">์ฒซ ํ์ด์ง</a>
<a href="#" class="btn">์ด์ ํ์ด์ง</a>
<a href="#" class="num on">1</a>
<a href="#" class="num">2</a>
<a href="#" class="num">3</a>
<a href="#" class="btn">๋ค์ ํ์ด์ง</a>
<a href="#" class="btn">๋ง์ง๋ง ํ์ด์ง</a>
</div>
</div>
</section>
<!-- end board_list section-->
<!-- info section -->
<section class="info_section layout_padding2">
<div class="container">
<div class="row">
<div class="col-md-6 col-lg-3 info_col">
<div class="info_contact">
<h4>
Address
</h4>
<div class="contact_link_box">
<a href="https://map.naver.com/p/entry/place/21033930?c=15.00,0,0,0,dh" target="_blank">
<i class="fa fa-map-marker" aria-hidden="true"></i>
<span>
๋์ ๊ด์ญ์ ์ ์ฑ๊ตฌ ๋ํ๋ก 99 (์ถฉ๋จ๋ํ๊ต) ๊ณต๊ณผ๋ํ 5ํธ๊ด
</span>
</a>
<a href="">
<i class="fa fa-phone" aria-hidden="true"></i>
<span>
Call +01 1234567890
</span>
</a>
<a href="">
<i class="fa fa-envelope" aria-hidden="true"></i>
<span>
sjna@outlook.kr
</span>
</a>
</div>
</div>
<div class="info_social">
<a href="">
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
<a href="">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
<a href="">
<i class="fa fa-linkedin" aria-hidden="true"></i>
</a>
<a href="https://www.instagram.com/cnu_argos/" target="_blank">
<i class="fa fa-instagram" aria-hidden="true"></i>
</a>
</div>
</div>
<div class="col-md-6 col-lg-3 info_col">
<div class="info_detail">
<h4>
Info
</h4>
<p>
ARGOS๋ 2003๋
6์ 25์ผ์ ์ค๋ฆฝ๋ ์ถฉ๋จ๋ํ๊ต ์ปดํจํฐ๊ณตํ๊ณผ ์ ๋ณด๋ณดํธ ์ฐ๊ตฌ ๋์๋ฆฌ์
๋๋ค.
</p>
</div>
</div>
<div class="col-md-6 col-lg-2 mx-auto info_col">
<div class="info_link_box">
<h4>
Links
</h4>
<div class="info_links">
<a class="active" href="index.html">
Home
</a>
<a class="" href="about.html">
About
</a>
<a class="" href="history.html">
History
</a>
<a class="" href="education.html">
Education
</a>
<a class="" href="community.html">
Community
</a>
</div>
</div>
</div>
<div class="col-md-6 col-lg-3 info_col ">
<h4>
Subscribe
</h4>
<form action="#">
<input type="text" placeholder="Enter email" />
<button type="submit">
Subscribe
</button>
</form>
</div>
</div>
</div>
</section>
<!-- end info section -->
<!-- footer section -->
<section class="footer_section">
<div class="container">
<p>
© <span id="displayYear"></span> All Rights Reserved By
<a href="https://html.design/">Free Html Templates</a>
</p>
</div>
</section>
<!-- footer section -->
<!-- jQery -->
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<!-- popper js -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<!-- bootstrap js -->
<script type="text/javascript" src="js/bootstrap.js"></script>
<!-- owl slider -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js">
</script>
<!-- custom js -->
<script type="text/javascript" src="js/custom.js"></script>
<!-- Google Map -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCh39n5U-4IoWpsVGUHWdqB6puEkhRLdmI&callback=myMap">
</script>
<!-- End Google Map -->
</body>
</html>
#CSS
/* TODO : ์ฌ๊ธฐ์๋ถํฐ start */
table {
border-collapse: collapse;
}
caption {
display: none;
}
.board_list_wrap {
padding: 50px;
}
.board_list {
width: 100%;
}
.board_list a {
text-decoration: none;
color: inherit;
}
.board_list tr {
border-bottom: 1px solid #ccc;
}
.board_list th,
.board_list td {
padding: 10px;
text-align: center;
font-size: 14px;
}
.board_list thead tr th {
border-top: 2px solid navy;
}
.board_list .title {
text-align: left;
}
.board_list .title:hover {
text-decoration: underline;
}
.board_list_wrap .paging {
margin-top: 20px;
text-align: center;
font-size: 0;
}
.board_list_wrap .paging a {
display: inline-block;
margin-left: 10px;
padding: 5px 10px;
border: 1px solid #000;
border-radius: 100px;
font-size: 12px;
}
.board_list_wrap .paging a:first-child {
margin-left: 0;
}
.board_list_wrap .paging a.btn {
border: 2px solid #eee;
background: #eee;
}
.board_list_wrap .paging a.num {
border: 1px solid navy;
font-weight: 800;
color: navy;
}
.board_list_wrap .paging a.num.on {
background: navy;
color: #fff;
}'๐ ๊ฐ์ธ ํ๋ ๋ชจ์์ง ๐ > ๐ฉ๐ปโ๐ป `23 -`24 ๋๊ณ ๋ชจ๊ฐ์ฝ ๐ฉ๐ปโ๐ป' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [`23 - `24 ๋๊ณ ๋ชจ๊ฐ์ฝ] Bit๋๊ธฐ 6ํ์ฐจ ๊ฐ์ธ ๋ฆฌ๋ทฐ (0) | 2024.02.05 |
|---|---|
| [`23 - `24 ๋๊ณ ๋ชจ๊ฐ์ฝ] Bit๋๊ธฐ 5ํ์ฐจ ๊ฐ์ธ ๋ฆฌ๋ทฐ (1) | 2024.01.29 |
| [`23 - `24 ๋๊ณ ๋ชจ๊ฐ์ฝ] Bit๋๊ธฐ 4ํ์ฐจ ๊ฐ์ธ ๋ฆฌ๋ทฐ (0) | 2024.01.22 |
| [`23 - `24 ๋๊ณ ๋ชจ๊ฐ์ฝ] Bit๋๊ธฐ 3ํ์ฐจ ๊ฐ์ธ ๋ฆฌ๋ทฐ (0) | 2024.01.15 |
| [`23 - `24 ๋๊ณ ๋ชจ๊ฐ์ฝ] Bit๋๊ธฐ 1ํ์ฐจ ๊ฐ์ธ ๋ฆฌ๋ทฐ (0) | 2024.01.01 |
