오늘의 코드 진행
일단 지난번에 이미지 3개만 뜨는 현상에서 크게 변하지는 않았지만. 우선 제목이 폰트와 배치가 바뀌었다!!
하루에 한개씩 나아지고 있는것같다. 팀장과 함께 페이지 구현을 해보기로 했다!
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 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;
}
@media screen and (max-width: 940px){}
.title.h_tit {
font-size: 42px;
font-weight: 600;
color: navy;
font-size: 28px;
}
h2 {
font-size: 18px;
color: #272626;
font-weight: 600;
padding: 20px 0px;
}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
* {
box-sizing: border-box;
}
user agent stylesheet
h2 {
display: block;
font-size: 1.5em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
.tit_center {
text-align: center;
float: none;
}
body {
max-width: 100%;
position: relative;
word-break: keep-all;
position: relative;
}
:host, :root {
--fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free";
}
:root {
--big_icon_width: 100px;
--big_icon_padding: 20px;
--sm_icon_left: calc((var(--big_icon_width) / 2));
--sm_icon_width: 30px;
--sm_icon_X: calc(var(--sm_icon_width) / 2);
--sm_icon_padding_bottom: 25px;
--hr_height: calc(var(--big_icon_padding) + var(--sm_icon_padding_bottom) + (var(--sm_icon_width) * 2) - (var(--sm_icon_width) / 2));
--circle_size: 20px;
--tuition_padding: calc((var(--big_icon_width) / 2) - var(--circle_size) / 2);
--tuition_margin: var(--tuition_padding) 0 var(--tuition_padding) calc(-50vw + 50% - var(--tuition_padding));
}
:root {
--light-gray-color: #f5f5f5;
--md-gray-color: #f0f0f0;
--gray-color: #dddddd;
--font-gray-color: #a3a3a3;
--orange-color: #e66a00;
--padding: 34px;
--img-padding: 10px;
}
:root {
--navy-color: #04088a;
--pink-color: #ee72d8;
}
*{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;}
}
결과물
느낀점
혼자서 코드를 열심히 보고있으나...사소한곳에서 실수가 많아서 오류가 뜨는 경우가 많다. 개별 코드별 속성이 아직 익숙하지 않아서 그런듯하다. 그래도 얼른 완성하고싶다!
코딩 신생아