오늘의 코드
구글 검사에서 각 코드별 파일을 다운받을수 있다는 사실을 알아냈다!!
최대한 모든 파일을 다운받은후에 코드를 가감없이 다 수정했다.
HTML코드
<!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">
<link href="../css/animate.css" rel="stylesheet">
<title>Resoft</title>
<link rel="stylesheet" type="text/css" href="../css/project.css">
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<style>
:host, :root {
--fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free";
}
:host, :root {
--fa-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
}
</style>
</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">
<div class="slide">
<a href="javascript:void(0);">
<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">
<a href="javascript:void(0);">
<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="[WEB]"></div>
</div>
</a>
</div>
<div class="slide">
<a href="javascript:void(0);">
<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">
<a href="javascript:void(0);">
<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">
<a href="javascript:void(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>
</section>
</div>
</div>
<script src="../js/wow.min.js"></script>
<script>
new WOW().init();
</script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
</body>
</html>
CSS코드
@charset "utf-8";
@import url(https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&family=Noto+Sans+KR:wght@400;500;700&display=swap);
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css); .nanumgothic * { font-family: 'Nanum Gothic', sans-serif; }
.nanumsquare { font-family: 'NanumSquare', sans-serif !important; }
@font-face {
font-family: 'NanumSquareRound';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'InfinitySans-BoldA1';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/InfinitySans-BoldA1.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'InfinitySans-RegularA1';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/InfinitySans-RegularA1.woff') format('woff');
font-weight: normal;
font-style: normal;
}
input{outline: none;}
body{ font-family: ''Noto Sans KR', sans-serif'; position: relative; word-break: keep-all;}
hr{border: 3px solid var(--gray-color);}
.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;}
@media screen and (max-width: 940px){
.slick-slide .new_img{height: 45vw;}
}결과물
분명 코드를 다 가져왔다고 생각했는데..이미지가 수평으로 안보인다. 그리고 로고별로 크기도 제각각이다. 그래도 이전에 이미지가 3개밖에 안보이는데에서는 성장한거같다!
느낀점
팀원들이 있어서 그런지 왠지 마음이 놓이는 부분도 있는듯 하다. 나와는 다른 생각과 시선이 있기에 도움이 많이 된다. 내일 모든 팀원들의 코드를 병합해보기로 했다! 또 어떤일들이 발생할지 기대된다ㅎ
코딩 신생아