오늘의 코드
역시 팀장님과 함께 붙어서 코드를 작성하니 그래도 겉모습은 다 구현했다. 조금씩의 오류는 나지만 그래도 괜찮다. 팀원까지 4명의 머리가 모이면 뭐라도 해결되지 않을까싶다.
Html 코드
<!DOCTYPE html>
<html lang="ko">
<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 rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reset-css@5.0.1/reset.min.css">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700&display=swap" rel="stylesheet">
<link rel="shortcut icon" href=".../img/web.png" type="image/x-icon">
<link rel="stylesheet" href="../style.css">
<link rel="stylesheet" href="../css/02_card.css">
<link rel="stylesheet" href="../css/project.css">
<link rel="stylesheet" href="../css/04_eco.css">
<link rel="stylesheet" href="../css/icon.css">
<link rel="stylesheet" href="../css/map.css">
<link rel="stylesheet" href="../css/footer.css">
<link rel="stylesheet" href="../css/animate.css">
<script src="https://kit.fontawesome.com/de3ecee9a8.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<title>Resoft</title>
</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: 3809px; transform: translate3d(-1465px, 0px, 0px);"><div class="slide slick-slide slick-cloned" tabindex="-1" role="option" aria-describedby="slick-slide01" style="width: 273px;" data-slick-index="-4" 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 slick-cloned" tabindex="-1" role="option" aria-describedby="slick-slide02" style="width: 273px;" 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">제15회 달서 하프 비대면 마라톤대회<br></p>
<img class="logo" src="../img/달서구청로고.png" alt="[APP]"></div>
</div>
</a>
</div><div class="slide slick-slide slick-cloned" tabindex="-1" role="option" aria-describedby="slick-slide03" style="width: 273px;" 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">제8회 한성백제 비대면 마라톤대회<br></p>
<img class="logo" src="../img/한성백제마라톤.png" alt="[APP]"></div>
</div>
</a>
</div><div class="slide slick-slide slick-cloned" tabindex="-1" role="option" aria-describedby="slick-slide04" style="width: 273px;" 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: 273px;" 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 slick-current slick-active" tabindex="-1" role="option" aria-describedby="slick-slide01" style="width: 273px;" data-slick-index="1" 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">대구인문사회대학<br></p>
<img class="logo" src="../img/inmun_logo.png" alt="[WEB]"></div>
</div>
</a>
</div><div class="slide slick-slide slick-active" tabindex="-1" role="option" aria-describedby="slick-slide02" style="width: 273px;" data-slick-index="2" 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">제15회 달서 하프 비대면 마라톤대회<br></p>
<img class="logo" src="../img/달서구청로고.png" alt="[APP]"></div>
</div>
</a>
</div><div class="slide slick-slide slick-active" tabindex="-1" role="option" aria-describedby="slick-slide03" style="width: 273px;" data-slick-index="3" 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">제8회 한성백제 비대면 마라톤대회<br></p>
<img class="logo" src="../img/한성백제마라톤.png" alt="[APP]"></div>
</div>
</a>
</div><div class="slide slick-slide slick-active" tabindex="-1" role="option" aria-describedby="slick-slide04" style="width: 273px;" 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: 273px;" 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 class="slide slick-slide slick-cloned" tabindex="-1" role="option" aria-describedby="slick-slide01" style="width: 273px;" data-slick-index="6" 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 slick-cloned" tabindex="-1" role="option" aria-describedby="slick-slide02" style="width: 273px;" data-slick-index="7" 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 slick-cloned" tabindex="-1" role="option" aria-describedby="slick-slide03" style="width: 273px;" data-slick-index="8" 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></div></section>
</div>
</div>
<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
<script charset="UTF-8">
new daum.roughmap.Lander({
"timestamp" : "1656645710667",
"key" : "2at79",
"mapWidth" : "100%",
"mapHeight" : "600",
}).render();
</script>
<!-- map.js 적용 -->
<script src="../JS/map.js"></script>
<script src="../js/icon.js"></script>
<script src="../js/scroll.js"></script>
<script src="../js/wow.min.js"></script>
<script>
new WOW().init();
</script>
</body>
</html>CSS 코드
.tit_center {
text-align: center;
float: none;
}
.title .h_tit {
font-size: 42px;
font-weight: 600;
color: navy;
}
.container_slide {
max-width: 1400px;
margin: 55px auto;
clear: both;
}
.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 #ee72d8;
background: #f6f6f636;
-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: #ee72d8;
;
-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;
}
.new_img .logo {
width: 100%;
height: 100%;
align-self: flex-end;
}
.work-title {
height: 100%;
font-size: 20px;
color: #222;
font-weight: 600;
letter-spacing: -0.4px;
line-height: 1.5;
}
.cont {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 100%;
vertical-align: top;
padding: 40px 38px;
}
@media screen and (max-width: 940px) {
.title .h_tit {
font-size: 28px;
}
.slick-slide .new_img {
height: 45vw;
}
}
@media screen and (max-width: 767px) {
.news_wrap {
padding: 100px 20px 40px 20px;
box-sizing: border-box;
height: auto;
}
.slick-slide .new_img {
height: 63vw;
}
}
@media screen and (max-width: 430px) {
.slick-slide .new_img {
height: 95vw;
}
}결과물
만 하루만에 엄청난 발전이다!! 글씨채도 누르면 사진이 확대되는것도 사진의 크기와 형태까지 외부적인 부분들은 다 구현할수 있게 되었다!! 이제 옆으로 넘어가는 형태만 입력할수 있다면 좋겠다...
느낀점
일단 팀프로젝트에서 팀장님이 하드케리하고 있는건 아닌지 살짝 죄책감도 느껴졌지만...그래도 많이 배우고 도움이 되었다. 앞으로도 코딩을 하면서 흥미와 재미를 잃지않고 하도록 노력해봐야겠다!
코딩 신생아