오늘의 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Resoft</title>
<link rel="stylesheet" type="text/css" href="../css/project.css">
</head>
<body>
<div class="news_wrap">
<div class="news_content_wrap">
<div class="title tit_center">
<h2 class="h_tit">프로젝트</h2>
<p class="subTitleEng">resoft projects</p>
</div>
<div class="btn_wrap">
<!-- <a href="#" class="more"><span>more</span></a> -->
</div>
</div>
<div class="container_slide">
<section class="news_list slider slick-initialized slick-slider">
</div><div class="slide slick-slide" tabindex="-1" role="option" aria-describedby="slick-slide00" style="width: 258px;" data-slick-index="0" aria-hidden="true">
<a href="javascript:void(0);" tabindex="-1">
<div class="new_img" style="height:300px; background-color: #ffffff;">
<div class="cont"><p class="work-title">송파구청 송파둘레길 비대면 걷기대회<br></p>
<img class="logo" src="../img/송파둘레길.png" alt="[APP]"></div>
</div>
</a>
</div><div class="slide slick-slide" tabindex="-1" role="option" aria-describedby="slick-slide01" style="width: 258px;" data-slick-index="1" aria-hidden="true">
<a href="javascript:void(0);" tabindex="-1">
<div class="new_img" style="height:300px; background-color: #ffffff;">
<div class="cont"><p class="work-title">대구인문사회대학<br></p>
<img class="logo" src="../img/inmun_logo.png" alt="[APP]"></div>
</div>
</a>
</div><div class="slide slick-slide" tabindex="-1" role="option" aria-describedby="slick-slide02" style="width: 258px;" data-slick-index="2" aria-hidden="true">
<a href="javascript:void(0);" tabindex="-1">
<div class="new_img" style="height:300px; background-color: #ffffff;">
<div class="cont"><p class="work-title">제15회 달서 하프 비대면 마라톤대회<br></p>
<img class="logo" src="../img/달서구청로고.png" alt="[APP]"></div>
</div>
</a>
</div><div class="slide slick-slide" tabindex="-1" role="option" aria-describedby="slick-slide03" style="width: 258px;" data-slick-index="3" aria-hidden="true">
<a href="javascript:void(0);" tabindex="-1">
<div class="new_img" style="height:300px; background-color: #ffffff;">
<div class="cont"><p class="work-title">제8회 한성백제 비대면 마라톤대회<br></p>
<img class="logo" src="../img/한성백제마라톤.png" alt="[APP]"></div>
</div>
</a>
</div><div class="slide slick-slide slick-current slick-active" tabindex="-1" role="option" aria-describedby="slick-slide04" style="width: 258px;" data-slick-index="4" aria-hidden="false">
<a href="javascript:void(0);" tabindex="0">
<div class="new_img" style="height:300px; background-color: #ffffff;">
<div class="cont"><p class="work-title">2020 대구 마스크 쓰GO 코로나 극복 레이스<br></p>
<img class="logo" src="../img/컬러풀대구로고.jpg" alt="[APP]"></div>
</div>
</a>
</div></div></div></section>
</div>
</div>
</body>
</html>
CSS코드
.news_wrap{width: 100%; padding: 80px 0; background-color: #f8f8f8;}
.news_wrap .news_content_wrap{max-width: 1400px; margin: 0 auto; overflow: hidden;}
.news_wrap .btn_wrap {float: right; margin-top: 20px;}
.news_wrap .btn_wrap .more {
position: relative;
overflow: hidden;
display: inline-block;
width: 140px;
height: 40px;
font-size: 15px;
color: white;
text-align: center;
border: 1px solid var(--pink-color);
background: #f6f6f636;
/* background: transparent; */
/* border-radius: 46px;
-moz-border-radius: 46px;
-webkit-border-radius: 46px;
-o-border-radius: 46px; */
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s;
font-family: 'Montserrat', 'Noto Sans KR';
font-weight: 600;
line-height: 40px;
}
.news_wrap .btn_wrap .more span{position:relative; z-index:1; color:white;}
.news_wrap .btn_wrap .more:before{
display: block;
position: absolute;
top: 0px;
left: -130%;
content: "";
width: 130%;
height: 100%;
border-radius: 0 42px 42px 0;
opacity: 0;
filter: Alpha(opacity = 0);
background: var(--pink-color);
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-ms-transition: all 0.3s;
transition: all 0.3s}
.news_wrap .btn_wrap .more:hover span{color:#fff;}
.news_wrap .btn_wrap .more:hover:before{left:0px; opacity:1.0;filter:Alpha(opacity=100);}
.news_wrap .btn_wrap .more:hover:after{opacity:0;filter:Alpha(opacity=0); visibility:hidden;}
.news_h{padding-top: 50px; margin: 70px 0px 30px 0px;}
.news_list .slide a {display: block;}
.news_list .slide a:hover .new_img img {transform: scale(1.1);}
.new_body {margin: 20px 0;}
.new_body .cate {display: block; font-size: 15px; font-weight: 600; color: white; margin-bottom: 10px; letter-spacing: 1.5px;}
.new_body .news_tit {font-size: 18px; color: white; line-height: 1.4; width: 98%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.container_slide{max-width: 1400px;margin: 55px auto; clear: both;}
/* .slick-slide {margin: 0px 20px;} */
.slick-slide .new_img {overflow: hidden; height: auto;}
.slick-slide .new_img img {width: 100%; transform: scale(1); transition: transform .3s;}
.slick-slider{position: relative;display: block;
box-sizing: border-box;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-ms-touch-action: pan-y;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.slick-list{position: relative;display: block;overflow: hidden;margin: 0;padding: 0;}
.slick-list:focus{outline: none;}
.slick-list.dragging{cursor: pointer;cursor: hand;}
.slick-slider .slick-track,
.slick-slider .slick-list
{
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.slick-track{position: relative;top: 0;left: 0;display: block;}
.slick-track:before,
.slick-track:after
{display: table;content: '';}
.slick-track:after{clear: both;}
.slick-loading .slick-track{visibility: hidden;}
.slick-slide{display: none; float: left; /* height: 100%; */ min-height: 1px; margin: 0 10px;}
[dir='rtl'] .slick-slide{float: right;}
.slick-slide img{display: block;}
.slick-slide.slick-loading img{display: none;}
.slick-slide.dragging img{pointer-events: none;}
.slick-initialized .slick-slide{display: block; outline: none; height: auto;}
.slick-loading .slick-slide{visibility: hidden;}
.slick-vertical .slick-slide{display: block;height: auto;border: 1px solid transparent;}
.slick-arrow.slick-hidden {display: none;}
일단 어제했던 코드에서 반복되고 겹쳐지는 부분들을 최대한 정리했다. 근데 분명 5개의 프로젝트가 뜨면되는데, 어제는 2개만 떴으나 오늘은...또 다 사라졌다. 흠...내일 팀원들에게 SOS를 쳐야겠다.
결과물
처참하군..
느낀점
clone코딩이라고 해서 쉽게생각했는데 아니었다. 더 복잡하다. 내가 쓴 코딩도 아니라서 이게 왜 이곳에 들어와있고 구조가 되었는지를 이해하기 어렵다.
코딩 신생아