21.01.26 JSPCommunity 프로젝트(홈 메인페이지 템플릿 디자인)
2021. 1. 26. 23:10ㆍJAVA/JSP Community 사이트 프로젝트
<HTML>
<!-- 폰트어썸 불러오기 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
<!-- 반응형 필수 -->
<meta name="viewport" content="width=device-width, user-scalable=no" />
<!-- 제이쿼리 불러오기 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- 사이트 박스 시작 -->
<section class="site-box min-height-100vh flex flex-column">
<section class="head-bar-section">
<div class="head-bar con flex flex-jc-fe flex-jc-fe">
<div class="head-bar-button"><a href="../home/main">홈</a></div>
<div class="head-bar-button"><a href="../member/doLoginForm">로그인</a></div>
<div class="head-bar-button"><a href="../member/doJoinForm">회원가입</a></div>
</div>
</section>
<!-- 탑바 시작 -->
<div class="top-bar-padding visible-md-up">
</div>
<header class="top-bar visible-md-up ">
<div class="con height-100p flex flex-jc-sb flex-ai-c">
<div class="title">
<a class="" href="#">
<span>Community Site</span>
</a>
</div>
<!-- 메뉴바 시작-->
<section class="menu-bar height-100p">
<nav class="menu-bar_menu height-100p">
<ul class="flex flex-ai-fe height-100p ">
<li title="ABOUT">
<a href="about.html" class="block">
<span>ABOUT</span>
</a>
</li>
<li>
<a class="block">
<span>ARTICLES</span>
</a>
<ul>
<li title="NOTICE">
<a href="notice-list-1.html" class="block">
<span>NOTICE</span>
</a>
</li>
<li title="FREE">
<a href="free-list-1.html" class="block">
<span>FREE</span>
</a>
</li>
</ul>
</li>
<li>
<a class="block">
<span>LINK</span>
</a>
<ul>
<li title="T-STORY">
<a href="https://cjy324.tistory.com/" target="_blank" class="block">
<span>T-STORY</span>
</a>
</li>
<li title="GITHUB">
<a href="https://github.com/cjy324/TIL_Jooyoung#til_jooyoung" target="_blank" class="block">
<span>GITHUB</span>
</a>
</li>
</ul>
</li>
<li title="SEARCH">
<a href="search.html" class="block">
<span>SEARCH</span>
</a>
</li>
<li title="STATISTICS">
<a href="statistics.html" class="block">
<span>STATISTICS</span>
</a>
</li>
</ul>
</nav>
</section>
<!-- 메뉴바 끝 -->
</div>
</header>
<!-- 탑바 끝 -->
<!-- 모바일 탑바 시작 -->
<section class="top-bar-padding flex flex-ai-c visible-sm-down">
<div class="mobile-top-bar_btn-toggle-side-bar flex-as-c visible-sm-down">
<div></div>
<div></div>
<div></div>
</div>
</section>
<header class="mobile-top-bar flex visible-sm-down">
<div class="flex-1-0-0 flex flex-jc-c flex-ai-c">
<div class="title">
<a class="" href="#">
<span>Community Site</span>
</a>
</div>
</div>
</header>
<!-- 모바일 탑바 끝 -->
<!-- 모바일 사이드메뉴바 시작-->
<aside class="mobile-side-bar visible-sm-down">
<nav class="mobile-side-bar_menu flex flex-jc-c">
<ul class="">
<li title="ABOUT">
<a href="about.html" class="block">
<span>ABOUT</span>
</a>
</li>
<li>
<a class="block">
<span>ARTICLES</span>
</a>
<ul>
<li title="NOTICE">
<a href="notice-list-1.html" class="block">
<span>NOTICE</span>
</a>
</li>
<li title="FREE">
<a href="free-list-1.html" class="block">
<span>FREE</span>
</a>
</li>
</ul>
</li>
<li>
<a class="block">
<span>LINK</span>
</a>
<ul>
<li title="T-STORY">
<a href="https://cjy324.tistory.com/" target="_blank" class="block">
<span>T-STORY</span>
</a>
</li>
<li title="GITHUB">
<a href="https://github.com/cjy324/TIL_Jooyoung#til_jooyoung" target="_blank" class="block">
<span>GITHUB</span>
</a>
</li>
</ul>
</li>
<li title="SEARCH">
<a href="search.html" class="block">
<span>SEARCH</span>
</a>
</li>
<li title="STATISTICS">
<a href="statistics.html" class="block">
<span>STATISTICS</span>
</a>
</li>
</ul>
</nav>
</aside>
<!-- 모바일 사이드메뉴바 끝 -->
<!-- 메인 컨텐츠 박스 시작 -->
<main class="main-box flex-grow-1 ">
<section class="main-box-section con ">
<!-- 메인 홈 시작 -->
<div class="section-home flex flex-column">
<div id="section-home-slide">
<div id="wrapper">
<div id="slider-wrap">
<ul id="slider">
<li>
<div>
<h3>공지사항</h3>
<span>NOTICE</span>
</div>
<a href="">
<img src="https://images.unsplash.com/photo-1505744386214-51dba16a26fc?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1467&q=80"></a>
</li>
<li>
<div>
<h3>자유게시판</h3>
<span>FREE BOARD</span>
</div>
<a href="">
<img src="https://images.unsplash.com/photo-1516414447565-b14be0adf13e?ixlib=rb-1.2.1&ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&auto=format&fit=crop&w=1266&q=80"></a>
</li>
<li>
<div>
<h3>News</h3>
<span>ARTICLE BOARD</span>
</div>
<a href="">
<img src="https://images.unsplash.com/photo-1586339949916-3e9457bef6d3?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"></a>
</li>
<li>
<div>
<h3>준비중입니다.</h3>
<span>준비중입니다.</span>
</div>
<a href="">
<img src="https://images.unsplash.com/photo-1611558245524-aff4541a18d2?ixid=MXwxMjA3fDB8MHx0b3BpYy1mZWVkfDE0fEo5eXJQYUhYUlFZfHxlbnwwfHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60"></a>
</li>
</ul>
<!--controls-->
<div class="btns" id="next"><i class="fa fa-arrow-right"></i></div>
<div class="btns" id="previous"><i class="fa fa-arrow-left"></i></div>
<div id="counter"></div>
<div id="pagination-wrap">
<ul>
</ul>
</div>
<!--controls-->
</div>
</div>
</div>
<div class="section-home-list section-home-list1 flex">
<div class="home-list home-list1">
<div><span>공지사항</span></div>
<header></header>
<div class="home-list__cell-body">
<div>
<div class="home-list__cell-id">9</div>
<div class="home-list__cell-writer">홍길동</div>
<div class="home-list__cell-title">
<a href="article_9.html" class="hover-underline">제목9</a>
<span>[5]</span>
</div>
<div class="home-list__cell-hitsCount">10</div>
<div class="home-list__cell-likesCount">3</div>
</div>
<div>
<div class="home-list__cell-id">9</div>
<div class="home-list__cell-writer">홍길동</div>
<div class="home-list__cell-title">
<a href="article_9.html" class="hover-underline">제목9</a>
<span>[5]</span>
</div>
<div class="home-list__cell-hitsCount">10</div>
<div class="home-list__cell-likesCount">3</div>
</div>
<div>
<div class="home-list__cell-id">9</div>
<div class="home-list__cell-writer">홍길동</div>
<div class="home-list__cell-title">
<a href="article_9.html" class="hover-underline">제목9</a>
<span>[5]</span>
</div>
<div class="home-list__cell-hitsCount">10</div>
<div class="home-list__cell-likesCount">3</div>
</div>
<div>
<div class="home-list__cell-id">9</div>
<div class="home-list__cell-writer">홍길동</div>
<div class="home-list__cell-title">
<a href="article_9.html" class="hover-underline">제목9</a>
<span>[5]</span>
</div>
<div class="home-list__cell-hitsCount">10</div>
<div class="home-list__cell-likesCount">3</div>
</div>
</div>
</div>
<div class="home-list_img">
<nav class="flex flex-jc-c">
<a href="../article/list?boardId=1">
<div>
<div class="img-box">
<img src="https://images.unsplash.com/photo-1511067087965-c1b6ce6454d3?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1220&q=80" alt="">
<div class="img-txt">
Notice
</div>
</div>
</div>
</a>
</nav>
</div>
</div>
<div class="section-home-list section-home-list2 flex">
<div class="home-list_img">
<nav class="flex flex-jc-c">
<a href="../article/list?boardId=2">
<div>
<div class="img-box">
<img src="https://images.unsplash.com/photo-1462642109801-4ac2971a3a51?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1266&q=80" alt="">
<div class="img-txt">
Free
</div>
</div>
</div>
</a>
</nav>
</div>
<div class="home-list home-list2 flex flex-column">
<div><span>자유게시판</span></div>
<header></header>
<div class="home-list__cell-body">
<div>
<div class="home-list__cell-id">9</div>
<div class="home-list__cell-writer">홍길동</div>
<div class="home-list__cell-title">
<a href="article_9.html" class="hover-underline">제목9</a>
<span>[5]</span>
</div>
<div class="home-list__cell-hitsCount">10</div>
<div class="home-list__cell-likesCount">3</div>
</div>
<div>
<div class="home-list__cell-id">9</div>
<div class="home-list__cell-writer">홍길동</div>
<div class="home-list__cell-title">
<a href="article_9.html" class="hover-underline">제목9</a>
<span>[5]</span>
</div>
<div class="home-list__cell-hitsCount">10</div>
<div class="home-list__cell-likesCount">3</div>
</div>
<div>
<div class="home-list__cell-id">9</div>
<div class="home-list__cell-writer">홍길동</div>
<div class="home-list__cell-title">
<a href="article_9.html" class="hover-underline">제목9</a>
<span>[5]</span>
</div>
<div class="home-list__cell-hitsCount">10</div>
<div class="home-list__cell-likesCount">3</div>
</div>
<div>
<div class="home-list__cell-id">9</div>
<div class="home-list__cell-writer">홍길동</div>
<div class="home-list__cell-title">
<a href="article_9.html" class="hover-underline">제목9</a>
<span>[5]</span>
</div>
<div class="home-list__cell-hitsCount">10</div>
<div class="home-list__cell-likesCount">3</div>
</div>
</div>
</div>
</div>
<div class="section-home-list section-home-list3 flex">
<div class="home-list home-list3">
<div><span>News 게시판</span></div>
<header></header>
<div class="home-list__cell-body">
<div>
<div class="home-list__cell-id">9</div>
<div class="home-list__cell-writer">홍길동</div>
<div class="home-list__cell-title">
<a href="article_9.html" class="hover-underline">제목9</a>
<span>[5]</span>
</div>
<div class="home-list__cell-hitsCount">10</div>
<div class="home-list__cell-likesCount">3</div>
</div>
<div>
<div class="home-list__cell-id">9</div>
<div class="home-list__cell-writer">홍길동</div>
<div class="home-list__cell-title">
<a href="article_9.html" class="hover-underline">제목9</a>
<span>[5]</span>
</div>
<div class="home-list__cell-hitsCount">10</div>
<div class="home-list__cell-likesCount">3</div>
</div>
<div>
<div class="home-list__cell-id">9</div>
<div class="home-list__cell-writer">홍길동</div>
<div class="home-list__cell-title">
<a href="article_9.html" class="hover-underline">제목9</a>
<span>[5]</span>
</div>
<div class="home-list__cell-hitsCount">10</div>
<div class="home-list__cell-likesCount">3</div>
</div>
<div>
<div class="home-list__cell-id">9</div>
<div class="home-list__cell-writer">홍길동</div>
<div class="home-list__cell-title">
<a href="article_9.html" class="hover-underline">제목9</a>
<span>[5]</span>
</div>
<div class="home-list__cell-hitsCount">10</div>
<div class="home-list__cell-likesCount">3</div>
</div>
</div>
</div>
<div class="home-list_img">
<nav class="flex flex-jc-c">
<a href="../article/list?boardId=3">
<div>
<div class="img-box">
<img src="https://images.unsplash.com/photo-1585719022717-87adb5bc279d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="">
<div class="img-txt">
News
</div>
</div>
</div>
</a>
</nav>
</div>
</div>
</div>
<!-- 메인 홈 끝 -->
</section>
</main>
<!-- 메인 컨텐츠 박스 끝 -->
<!-- 푸터 시작 -->
<footer class="bottom-bar con-min-width">
<div class="con flex flex-ai-c">
<a href="index.html" class="logo logo--mini flex flex-ai-c" title="HOME">
<img class="logo--mini__img" src="images/Dev_J_logo/facebook_cover_photo_1.png" alt="">
</a>
<div class="bottom-bar__site-info">
<span><i class="far fa-envelope"></i> juy32400@gmail.com</span>
<br>
<br>
<span>COPYRIGHT 2020. Dev_J. All rights reserved.</span>
</div>
</div>
</footer>
<!-- 푸터 끝 -->
</section>
<!-- 사이트 박스 끝 --><CSS>
/* 폰트 1*/
@font-face {
font-family: 'IBMPlexSansKR-Regular';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/IBMPlexSansKR-Regular.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* 폰트 2 */
@font-face {
font-family: 'Arita-dotum-Medium';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/Arita-dotum-Medium.woff') format('woff');
font-weight: normal;
font-style: normal;
}
html{
font-family: 'IBMPlexSansKR-Regular';
}
/* 노말라이즈 */
body, ul, li, h1, h2, h3 {
margin:0;
padding:0;
list-style:none;
}
a {
color:inherit;
text-decoration:none;
}
/* 라이브러리 */
.flex {
display:flex;
}
.flex-jc-c {
justify-content:center;
}
.flex-jc-fe {
justify-content:flex-end;
}
.flex-jc-fs {
justify-content:flex-start;
}
.flex-jc-sb{
justify-content:space-between;
}
.flex-jc-sa{
justify-content:space-around;
}
.flex-ai-c {
align-items:center;
}
.flex-ai-fe {
align-items:flex-end;
}
.flex-as-c {
align-self:center;
}
.flex-wrap {
flex-wrap:wrap;
}
.flex-column {
flex-direction:column;
}
.flex-grow-1 {
flex-grow:1;
}
.flex-1-0-0 {
flex:1 0 0;
}
.con {
margin-left:auto;
margin-right:auto;
}
.min-height-100vh {
min-height:100vh;
}
.min-height-50vh {
min-height:50vh;
}
.bd{
border:3px solid;
}
.bd-green {
border:3px solid green;
}
.bd-red {
border:3px solid red;
}
.bd-purple {
border:3px solid purple;
}
.bd-blue {
border:3px solid blue;
}
.bg-pink {
background-color:pink;
}
.bg-red {
background-color:red;
}
.bg-blue {
background-color:blue;
}
.height-100p {
height:100%;
}
.height-70p{
height:70%;
}
.height-500px{
height:500px;
}
.block {
display:block;
}
.hover-underline:hover{
text-decoration:underline;
}
@media ( max-width:720px ) {
.visible-md-up {
display:none !important;
}
}
@media ( min-width:721px ) {
.visible-sm-down {
display:none !important;
}
}
/* 커스텀 */
:root {
--site-width:1200px;
}
.con {
max-width: var(--site-width);
}
/* 탑 헤더 시작 */
.head-bar-section{
font-family: 'Arita-dotum-Medium';
width:100%;
position:fixed;
z-index:500;
}
.head-bar{
}
.head-bar-button{
border:3px solid white;
margin-top:10px;
margin-right:15px;
}
.head-bar-button:after{
display:block;
content: '';
border-bottom: solid 3px red;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
.head-bar-button:hover{
font-weight:bold;
}
.head-bar-button:hover:after{
transform: scaleX(1);
}
/* 탑 헤더 끝 */
/* 탑바 시작 */
:root {
--top-bar__height:100px;
}
.top-bar-padding{
height:var(--top-bar__height);
}
.top-bar{
position:fixed;
width:100%;
background-color:white;
z-index:200;
height:var(--top-bar__height);
border-bottom:4px outset whitesmoke;
}
/* 탑바 끝 */
/* 타이틀 시작 */
.title{
text-align:center;
font-size:2rem;
font-weight:bold;
padding-left:4%;
padding-top:30px;
}
.title> a{
}
/* 타이틀 끝 */
/* 메뉴바 시작 */
.menu-bar{
font-family: 'Arita-dotum-Medium';
font-size:1.1rem;
text-align:center;
z-index:200;
}
.menu-bar_menu ul>li{
}
.menu-bar_menu ul > li > a{
padding:7px;
padding-bottom:5px;
color:black;
}
.menu-bar_menu > ul > li:hover{
box-shadow:7px 7px 7px gray;
transition: all 500ms;
}
.menu-bar_menu > ul > li:hover > a{
font-weight:bold;
}
.menu-bar_menu > ul > li > a:after{
display:block;
content: '';
border-bottom: solid 4px red;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
.menu-bar_menu > ul > li:hover > a:after{
transform: scaleX(1);
}
.menu-bar_menu > ul > li{
width:100px;
position:relative;
}
.menu-bar_menu > ul ul {
visibility:hidden;
position:absolute;
top:100%;
width:100%;
background-color:white;
border-top-width:0;
z-index:10;
box-shadow:7px 7px 7px gray;
}
.menu-bar_menu ul > li:hover > ul{
visibility:visible;
}
.menu-bar_menu ul > li > ul > li:hover >a{
visibility:visible;
font-weight:bold;
}
.menu-bar_menu ul > li > ul > li >a:after{
display:block;
content: '';
border-bottom: solid 4px red;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
.menu-bar_menu ul > li > ul > li:hover > a:after{
transform: scaleX(1);
}
/* 메뉴바 끝 */
/* 모바일 탑바 시작 */
:root {
--mobile-top-bar__btn-toggle-side-bar__dur:.3s;
}
.mobile-top-bar{
height:var(--top-bar__height);
position:fixed;
top:0;
left:0;
width:100%;
background-color:white;
z-index:100;
border-bottom:4px outset whitesmoke;
}
.mobile-top-bar_btn-toggle-side-bar {
width:25px;
height:25px;
position:fixed;
margin-left:10px;
margin-top:30px;
z-index:1000;
cursor:pointer;
}
.mobile-top-bar_btn-toggle-side-bar > div {
position:absolute;
top:0;
left:0;
width:100%;
height:20%;
background-color:black;
transition: top var(--mobile-top-bar__btn-toggle-side-bar__dur), transform var(--mobile-top-bar__btn-toggle-side-bar__dur), opacity var(--mobile-top-bar__btn-toggle-side-bar__dur);
border-radius:2px;
}
.mobile-top-bar_btn-toggle-side-bar > div:nth-child(2) {
top:40%;
}
.mobile-top-bar_btn-toggle-side-bar > div:nth-child(3) {
top:80%;
}
.mobile-top-bar_btn-toggle-side-bar.active > div:nth-child(1),
.mobile-top-bar_btn-toggle-side-bar.active > div:nth-child(3) {
top:40%;
transform:rotate(-45deg);
}
.mobile-top-bar_btn-toggle-side-bar.active > div:nth-child(3) {
transform:rotate(45deg);
}
.mobile-top-bar_btn-toggle-side-bar.active > div:nth-child(2) {
opacity:0;
}
/* 모바일 탑바 끝 */
/* 모바일 사이드메뉴바 시작 */
.mobile-side-bar {
font-family: 'Arita-dotum-Medium';
position:fixed;
top:var(--top-bar__height);
left:-100%;
width:100%;
bottom:0;
color:white;
background-color:rgba(10, 10, 10, 0.8);
transition:left .3s;
display:flex;
align-items:center;
padding-bottom:var(--top-bar__height);
z-index:1000;
}
.mobile-side-bar.active {
left:0;
}
.mobile-side-bar_menu {
width:100%;
text-align:center;
}
.mobile-side-bar_menu ul > li > a{
max-width:200px;
padding:10px;
font-size:1rem;
}
.mobile-side-bar_menu ul > li > a:after{
display:block;
content: '';
border-bottom: solid 3px white;
transform: scaleX(0);
transition: transform 250ms ease-in-out;
}
.mobile-side-bar_menu ul > li:hover > a{
background-color:gray;
color:white;
font-weight:bold;
}
.mobile-side-bar_menu ul > li:hover > a:after{
transform: scaleX(0.7);
}
.mobile-side-bar_menu > ul > li{
width:100%;
}
.mobile-side-bar_menu > ul > li > ul{
display:none;
width:100%;
}
.mobile-side-bar_menu ul > li:hover > ul{
display:block;
color:white;
}
/* 모바일 사이드메뉴바 끝 */
/* 메인 컨텐츠 박스 시작 */
.main-box{
min-height:1000px;
}
.main-box-section{
}
/* 메인 컨텐츠 박스 끝 */
/* 푸터 시작 */
.bottom-bar{
margin-top:30px;
border-top:3px outset gray;
padding:20px;
}
/* 푸터 끝 */
/* 로그인 페이지 시작 */
.section-login{
}
.section-login > form{
background-color:gray;
text-align:center;
border:3px solid gray;
border-radius:10% 10% 10% 10%;
width:300px;
font-size:1.2rem;
font-weight:bold;
}
.section-login > form > div{
padding:5px;
}
.login_cell__title{
color:white;
}
.login_cell__body > input{
font-size:1rem;
font-weight:bold;
padding:5px;
height:35px;
width:95%;
min-width:150px;
border:none;
}
.loginInput_cell{
font-size:1.5rem;
font-weight:bold;
}
/* 로그인 페이지 끝 */
/* 회원가입 페이지 시작 */
.section-join{
padding-top:50px;
}
.section-join > form{
background-color:gray;
text-align:center;
border:3px solid gray;
width:300px;
font-size:1.2rem;
font-weight:bold;
}
.section-join > form > div{
padding:5px;
}
.join_cell__title{
color:white;
}
.join_cell__body > input{
font-size:1rem;
font-weight:bold;
padding:5px;
height:35px;
width:95%;
min-width:150px;
border:none;
}
.joinInput_cell{
font-size:1.5rem;
font-weight:bold;
}
/* 회원가입 페이지 끝 */
/* 회원정보 페이지 시작 */
.section-MyPage{
padding-top:50px;
}
.section-MyPage > .section-MyPage-body{
background-color:gray;
text-align:left;
border:1px solid black;
width:300px;
font-size:1.2rem;
font-weight:bold;
}
.section-MyPage-body > div{
padding:5px;
padding-left:20px;
}
.MyPage_cell__title{
color:white;
}
.MyPage_cell__body{
font-size:1.1rem;
background-color:white;
height:50px;
display:flex;
align-items:center;
}
.MyPage_cell__body > form{
display:none;
}
.infoModifyBtn0.active{
display:none;
}
.infoModifyBtn1.active{
display:none;
}
.infoModifyBtn2.active{
display:none;
}
.infoModifyBtn3.active{
display:none;
}
.infoModifyBtn4.active{
display:none;
}
.oldLoginIdInfo.active{
display:none;
}
.oldNameInfo.active{
display:none;
}
.oldNicknameInfo.active{
display:none;
}
.oldEmailInfo.active{
display:none;
}
.oldPhoneInfo.active{
display:none;
}
.newLoginIdInfo.active{
display:block;
}
.newNameInfo.active{
display:block;
}
.newNicknameInfo.active{
display:block;
}
.newEmailInfo.active{
display:block;
}
.newPhoneInfo.active{
display:block;
}
/* 회원정보 페이지 끝 */
/* 홈 시작 */
.section-home > div{
text-align:center;
font-size:2rem;
height:300px;
margin-top:30px;
}
/** 홈 슬라이드 시작 **/
#section-home-slide{
background-color:red;
height:700px;
box-shadow:10px 10px 10px gray;
}
#wrapper{
width:1200px;
height:100%;
position:relative;
color:#fff;
text-shadow:rgba(0,0,0,0.1) 2px 2px 0px;
}
#slider-wrap{
width:1200px;
height:100%;
position:relative;
overflow:hidden;
}
#slider-wrap ul#slider{
width:1200px;
height:100%;
position:absolute;
top:0;
left:0;
}
#slider-wrap ul#slider li{
float:left;
position:relative;
width:1200px;
height:100%;
}
#slider-wrap ul#slider li > div{
position:absolute;
top:20px;
left:35px;
}
#slider-wrap ul#slider li > div h3{
font-size:36px;
text-transform:uppercase;
}
#slider-wrap ul#slider li > div span{
font-family: Neucha, Arial, sans serif;
font-size:21px;
}
#slider-wrap ul#slider li img{
display:block;
width:100%;
height:100%;
}
/*btns*/
.btns{
position:absolute;
width:50px;
height:60px;
top:50%;
margin-top:-25px;
line-height:57px;
text-align:center;
cursor:pointer;
background:rgba(0,0,0,0.1);
z-index:100;
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;
-webkit-transition: all 0.1s ease;
-moz-transition: all 0.1s ease;
-o-transition: all 0.1s ease;
-ms-transition: all 0.1s ease;
transition: all 0.1s ease;
}
.btns:hover{
background:rgba(0,0,0,0.3);
}
#next{right:-50px; border-radius:7px 0px 0px 7px;}
#previous{left:-50px; border-radius:0px 7px 7px 7px;}
#counter{
top: 30px;
right:35px;
width:auto;
position:absolute;
font-size:1.5rem;
}
#slider-wrap.active #next{right:0px;}
#slider-wrap.active #previous{left:0px;}
/*bar*/
#pagination-wrap{
min-width:20px;
margin-top:630px;
margin-left: auto;
margin-right: auto;
height:15px;
position:relative;
text-align:center;
}
#pagination-wrap ul {
width:100%;
}
#pagination-wrap ul li{
margin:0 4px;
display:inline-block;
width:5px;
height:5px;
border-radius:50%;
background:#fff;
opacity:0.5;
position:relative;
top:0;
}
#pagination-wrap ul li.active{
width:12px;
height:12px;
top:3px;
opacity:1;
box-shadow:rgba(0,0,0,0.1) 1px 1px 0px;
}
/*ANIMATION*/
#slider-wrap ul, #pagination-wrap ul li{
-webkit-transition: all 0.3s cubic-bezier(1,.01,.32,1);
-moz-transition: all 0.3s cubic-bezier(1,.01,.32,1);
-o-transition: all 0.3s cubic-bezier(1,.01,.32,1);
-ms-transition: all 0.3s cubic-bezier(1,.01,.32,1);
transition: all 0.3s cubic-bezier(1,.01,.32,1);
}
/** 홈 슬라이드 끝 **/
/** 홈 이미지박스 시작 **/
.home-list_img{
width:500px;
margin-top:10px;
margin-bottom:10px;
}
.home-list_img > nav > a{
width:90%;
box-sizing:border-box;
}
.img-box{
height:280px;
position:relative;
overflow:hidden;
box-shadow:10px 10px 10px gray;
}
.img-box::before {
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background-color:rgba(0,0,0,0);
transition:background-color 1s;
}
.home-list_img > nav > a:hover .img-box::before {
background-color:rgba(0,0,0,0.3);
z-index:1;
}
.img-txt{
position:absolute;
top:50%;
left:50%;
transform:translateX(-50%) translateY(-50%);
border:4px solid white;
padding:5px;
border-radius:10px;
color:white;
font-weight:bold;
font-size:1.5rem;
transition:opacity 1s;
opacity:0;
}
.img-txt::before{
content:"GO to ";
}
.home-list_img > nav > a:hover .img-txt{
opacity:1;
z-index:1;
}
.img-box > img{
position:relative;
height:100%;
width:100%;
transition:transform 1s;
}
.home-list_img > nav > a:hover .img-box > img{
transform:scale(1.2);
}
/** 홈 이미지박스 끝 **/
/** 홈 리스트박스 시작 **/
:root {
--home-list__cell-id__width:50px;
--home-list__cell-writer__width:100px;
--home-list__cell-hitsCount__width:50px;
--home-list__cell-likesCount__width:50px;
--home-list__cell-title__width:calc(100% - var(--home-list__cell-id__width) - var(--home-list__cell-writer__width) - var(--home-list__cell-hitsCount__width) - var(--home-list__cell-likesCount__width));
}
.section-home-list{
width:100%;
text-align:center;
background-color:rgba(240, 240, 240, 0.5);
padding:10px;
border-radius:20px 20px 20px 20px;
box-shadow:10px 10px 10px gray;
}
.home-list{
width:90%;
font-size:1rem;
margin:auto;
padding-left:20px;
padding-right:20px;
text-align:left;
}
.home-list > div:first-child{
font-weight:bold;
font-size:1.5rem;
width:200px;
border-left:6px solid;
box-shadow:7px 7px 7px gray;
padding-left:10px;
background-color:rgb(153,153,153);
}
.home-list > div:first-child > span{
color:white;
}
.home-list1 > div:first-child{
background-color:rgb(153,153,153);
border-left:6px solid red;
}
.home-list2 > div:first-child{
align-self:flex-end;
}
.home-list > header{
margin-top:20px;
border-bottom:4px solid;
position:relative;
}
.home-list > header::after{
font-weight:bold;
content:"더보기 >>";
position:absolute;
top:-30px;
right:0px;
}
.home-list1 > header{
border-bottom:4px solid red;
}
.home-list2 > header::after{
font-weight:bold;
content:"<< 더보기";
position:absolute;
top:-30px;
left:0px;
}
.home-list > * > div{
display:flex;
justify-content:center;
}
.home-list > * > div > div {
box-sizing:border-box;
text-align:center;
padding-top:10px;
padding-bottom:10px;
}
.home-list__cell-body > div> .home-list__cell-title{
text-align:left;
padding-left:30px;
}
.home-list__cell-id {
width:var(--home-list__cell-id__width);
}
.home-list__cell-writer {
width:var(--home-list__cell-writer__width);
}
.home-list__cell-hitsCount {
width:var(--home-list__cell-hitsCount__width);
}
.home-list__cell-likesCount {
width:var(--home-list__cell-likesCount__width);
}
.home-list__cell-title {
width:var(--home-list__cell-title__width);
}
.home-list > .home-list__cell-body > div {
border-bottom:1px solid black;
}
/** 홈 리스트박스 끝 **/
/* 홈 끝 */
/* 메인 리스트 페이지 시작 */
:root {
--article-list__cell-id__width:100px;
--article-list__cell-reg-date__width:220px;
--article-list__cell-writer__width:150px;
--article-list__cell-hitsCount__width:100px;
--article-list__cell-likesCount__width:100px;
--article-list__cell-title__width:calc(100% - var(--article-list__cell-id__width) - var(--article-list__cell-reg-date__width) - var(--article-list__cell-writer__width) - var(--article-list__cell-hitsCount__width) - var(--article-list__cell-likesCount__width));
}
.section-article-list{
margin-top:150px;
width:100%;
text-align:center;
background-color:rgba(250, 250, 250, 0.4);
}
.article-list{
width:90%;
font-size:1rem;
margin:auto;
margin-top:20px;
}
.article-list-name{
text-align:left;
font-weight:bold;
font-size:1.8rem;
margin-bottom:40px;
}
.article-list > header{
margin-top:20px;
}
.article-list > * > div{
display:flex;
justify-content:center;
}
.article-list > .article-list__cell-body > * > div{
display:flex;
justify-content:center;
}
.article-list > header > div > div {
position:relative;
}
.article-list > header > div > div:not(:last-child):after {
content:"";
position:absolute;
top:50%;
transform:translateY(-50%);
right:0;
width:2px;
height:15px;
background-color:black;
}
.article-list > * > div > div {
box-sizing:border-box;
text-align:center;
padding-top:10px;
padding-bottom:10px;
}
.article-list > .article-list__cell-body > * > div{
box-sizing:border-box;
text-align:center;
padding-top:10px;
padding-bottom:10px;
}
.article-list__cell-body > * > div> .article-list__cell-title{
text-align:left;
padding-left:30px;
}
.article-list__cell-id {
width:var(--article-list__cell-id__width);
}
.article-list__cell-reg-date {
width:var(--article-list__cell-reg-date__width);
}
.article-list__cell-writer {
width:var(--article-list__cell-writer__width);
}
.article-list__cell-hitsCount {
width:var(--article-list__cell-hitsCount__width);
}
.article-list__cell-likesCount {
width:var(--article-list__cell-likesCount__width);
}
.article-list__cell-title {
width:var(--article-list__cell-title__width);
}
.article-list > .article-list__cell-body > * > div {
border-top:1px solid black;
}
/* 메인 리스트 페이지 끝 */
/* 게시물 리스트 하단 메뉴 시작 */
.article-page-menu-section{
margin-top:50px;
padding-bottom:50px;
}
.article-page-menu {
font-size:1rem;
}
.article-page-menu > ul > li > a {
border:1px solid transparent;
padding:7px;
font-weight:bold;
}
.article-page-menu > ul > li:not(:first-child):not(:last-child) > a {
padding-left:0;
padding-right:0;
min-width:30px;
justify-content:center;
}
.article-page-menu > ul > li:not(:first-child):not(:last-child):hover > a {
border-color:#afafaf;
}
.article-page-menu__link--selected {
color:red;
}
.article-page-menu > ul > li:hover > a {
color:red;
}
/* 게시물 리스트 하단 메뉴 끝 */
/* 게시물 상세페이지 시작 */
.section-2{
padding:20px;
padding-top:70px;
font-size:1.1rem;
}
.article-detail-cell__body{
border-top:7px solid black;
border-bottom:7px solid black;
padding:30px;
}
.article-list-bottom-cell > div{
padding:15px;
padding-top:25px;
padding-bottom:5px;
}
.article-detail-cell__title-contents{
padding-right:30px;
}
.article-detail-cell__title-contents > div{
margin:0 7px 0px 10px;
position:relative;
}
.article-detail-cell__title-contents > div:after {
content:"";
position:absolute;
top:50%;
transform:translateY(-50%);
left:-10px;
width:2px;
height:15px;
background-color:black;
}
.article-detail-cell__title{
font-size:2rem;
padding:15px 0 15px 30px;
}
.article-detail-cell__body .tui-editor-contents{
font-size:1.1rem;
}
.article-detail-cell__tag > nav{
margin-right:10px;
padding:5px;
background-color:rgba(200, 200, 200, 1);
border-radius:10px 5px 5px 5px;
}
/* 게시물 상세페이지 끝 */
/* 게시물 상세페이지 하단 메뉴 시작 */
.section-3{
padding-bottom:50px;
}
.article-list-bottom-cell{
font-size:1.2rem;
font-weight:bold;
}
/* 게시물 상세페이지 하단 메뉴 끝 */
/* 맨 위 버튼 시작 */
.top-button{
display:none;
position:fixed;
bottom:40px;
right:20px;
width:70px;
height:30px;
text-align:center;
}
.top-button > div{
width:100%;
height:100%;
font-size:1.1rem;
border-radius:10px;
}
.top-button > div > a{
display:inline-block;
width:100%;
height:85%;
background-color:rgba(220, 220, 220, 0.3);
color:white;
border-radius:10px;
border:3px solid;
padding-top:7px;
}
.top-button > div:hover > a{
background-color:black;
color:white;
}
/* 맨 위 버튼 끝 */