오늘의 코드
드디어 내일이 제출일이다. 오늘 일지는 현재까지 진행한 부분만 작성하지만 애니메이션 구현에 관해서는 더 알아보고자 한다.
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="/node_modules/owl.carousel/dist/assets/owl.carousel.min.css" />
<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">
<link rel="stylesheet" href="../js/project.js">
<link rel="stylesheet" href="../js/owl.carousel.js">
<link rel="stylesheet" href="../css/jquery.bxslider.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>
<script src="/node_modules/jquery/dist/jquery.js"></script>
<script src="/node_modules/owl.carousel/dist/owl.carousel.min.js"></script>
</body>
</html>head부분에 가능한 모든 js와 wow를 연결해두는게 좋다. 오류가 덜 발생한다.
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 {width: 800px}
.slick_slide .slick_list {border:1px solid ;text-align:center;}
.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;
}
}
* {margin:0;padding:0;}
ul,li {list-style:none}
진행상황
현재까지 완성형 홈페이지의 코드를 보면 slick-slide도 쓰이지만 owl.carousel도 보인다. 둘 다 같은 역할을 하는 코드이기에 하나만 선택해서 사용하면 될 듯하다.
느낀점
내일이 완성일이라니 새삼 빠른듯하다. 일지가 8번째인거보니 2주동안 진행한 느낌인데 일주일밖에 안된거 같이 느껴진다.
다음 프로젝트에는 좀 더 시간배분을 잘해야겠다.
코딩 신생아