오늘의 코드
어제보다는 js코드 파일도 추가하고 css에 @meta코드도 추가했다.
근데 큰 결과물이 달라진것은없다..
<!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"/>
</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: 2583px; transform: translate3d(-1722px, 0px, 0px);">
<div class="slide slick-slide slick-cloned" tabindex="-1" role="option" aria-describedby="slick-slide03" style="width: 267px;" 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: 267px;" 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: 267px;" 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: 267px;" 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: 267px;" 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: 267px;" 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: 267px;" 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 slick-active" tabindex="-1" role="option" aria-describedby="slick-slide00" style="width: 267px;" data-slick-index="5" 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/송파둘레길.png" alt="[APP]"></div>
</div>
</a>
</div><div class="slide slick-slide slick-cloned" tabindex="-1" role="option" aria-describedby="slick-slide01" style="width: 267px;" 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></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(//fonts.googleapis.com/earlyaccess/notosanskr.css);
@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;
}
@font-face {
font-family: 'S-CoreDream-9Black';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-9Black.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'EBSJSKMedium';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/EBSJSKMedium.woff') format('woff');
font-weight: normal;
font-style: normal;
}
*{box-sizing: border-box;}
body{font-family: 'NanumSquareRound'; position: relative; font-weight: 500; }
button{outline: none;}
br{opacity: 0;}
.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 (min-width: 1217px) and (max-width: 1720px){
.b_wrap{max-width: 1550px; margin: 0 auto;}
.b_box{width: 49%; height: 300px; background-color: #000; float: left; margin-bottom: 30px;}
.b_box:HOVER{box-shadow: 0px 7px 25px #c7c7c7; transition: all 0.4s;}
.b_box:NTH-CHILD(odd){margin-right: 1%;}
.b_box h1{box-sizing: border-box; padding: 2.2rem 2rem 1rem; font-size: 1.7rem; font-family: 'InfinitySans-RegularA1';}
.b_box p{box-sizing: border-box; padding: 0rem 2rem; font-size: 1.1rem; letter-spacing: -1px; width: 60%; line-height: 1.5;}
}
@media screen and (max-width:1500px) {
.header .bannerText-wrap{left: 2%;}
.header .banner-wrap .img-wrap{right: 2%;}
.box_wrap img{left: 2%;}
.box_wrap .box_btn{right: 2%;}
}
@media screen and (max-width: 940px){
body {max-width: 767px; overflow-x: hidden;}
.title .h_tit{font-size: 28px;}
.slick-slide .new_img{height: 45vw;}
}
@media screen and (max-width: 767px){
/* 사업영역 */
.main{width: 100%; margin: 0px auto 0;}
.b_wrap{max-width: 100%; margin: 0 auto; height: auto; padding: 40px 0;}
.b_wrap .busi_content_wrap {padding: 60px 20px;}
.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;}
}
@media screen and (max-width: 640px){
.banner_wrap ul li{background: url(/user/main/banner_2_430.png) no-repeat; background-size: 100%; height: 153vw;}
body {max-width: 640px; overflow-x: hidden;}
/* 인문사회 index */
.box_wrap .box_info ul li{flex-direction: column;}
}
결과물
확실히 글씨체에 변화는 눈에띈다. 근데 왜 아직도 아이콘은 세개밖에 안나오는걸까...하 주말동안 여유롭게 알아봐야겠다.
느낀점
F12의 힘은 대단한것같다. 근데 문제는 코드가 그 조그마한 화면에 너무 꽉 들어차있어서 어느부분이 맞고 틀린지를 알아내기 힘들다. 그래도 이것저것 여러방법을 통해 만들어봐야겠다!
코딩 신생아