"새로 들어온 팀원이 나갔다...크게 함께 시작하기전에 나가서 큰 지장은 없지만 헛헛하네"
프로젝트 페이지 코드 형성
<!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 aria-live="polite" class="slick-list draggable"><div class="slick-track" role="listbox" style="opacity: 1; width: 1946px; transform: translate3d(-1390px, 0px, 0px);"><div class="slide slick-slide slick-cloned" tabindex="-1" role="option" aria-describedby="slick-slide04" 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">2020 대구 마스크 쓰GO 코로나 극복 레이스<br></p>
<img class="logo" src="../img/컬러풀대구로고.jpg" alt="[APP]"></div>
</div>
</a>
</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="[WEB]"></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 class="slide slick-slide slick-cloned" tabindex="-1" role="option" aria-describedby="slick-slide00" style="width: 258px;" data-slick-index="5" 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></div></section>
</div>
</div>
</body>
</html>
결과물
CSS코드
h2 class {
font-display: middle;
}
.slick-slide .new_img{height: 45vw;}
.news_wrap {padding: 100px 20px 40px 20px; box-sizing: border-box; height: auto;}
.new_body .cate {font-size: 14px;}
.new_body .news_tit {font-size: 16px;}
.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;}
어려운점
왜...나에겐 8개의 프로젝트가 떠야하는데 두개밖에 뜨기 않을까?
내일 오전까지 해결해보도록 해야겠다. 오늘은 일단 vlog제출해야하니 여기서 마무리해본다.
느낀점
함께 진행하다보니 확실히 실력차가 눈에띄게 보인다. 그래도 잘기다려주시는 조장님을 만나 다행이다. 제출기한도 늘었으니 좀 더 여유를 가져봐야겠다!!! 천천히 꼼꼼히 다시 확인해봐야겠다!
코딩 신생아