1)학습한 내용
코드 통합 및 기타 세부 조정, 웹호스팅
파트별로 작업한 코드들을 합쳐서 작동이 되는 지 확인을 하고 중복되는 부분이나 필요없는 부분등을 제거하는 시간을 가졌습니다. 그리고나서 github를 통해 개인 호스팅을 하여 업로드 하였습니다.
통합 코드
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">
<title>Resoft</title>
<!-- 파비콘 -->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link rel="shortcut icon" href="./resoft_image/web.png" type="image/x-icon"/>
<!-- 기본 css -->
<link rel="stylesheet" type="text/css" href="./toco.css" />
<!-- wow 애니메이션 css -->
<link rel="stylesheet" href="./animate.css">
<!-- wow 애니메이션 js -->
<script src="./wow.min.js"></script>
<script src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick-theme.min.css" />
<script src="https://kit.fontawesome.com/af2a9fd141.js" crossorigin="anonymous"></script>
<!-- 카카오맵 불러오기 API키 필요 -->
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=c878f6eac0a2c4a708e717a953b9ac76"></script>
<!-- 구글에서 폰트 불러오기 -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<script>new WOW().init();</script>
</head>
<body>
<div class="topBtn">
<button class="move"><i class="fa-solid fa-angle-up"></i></button>
<p>TOP</p>
</div>
<!-- Headder -->
<header class="header">
<div class="wrapper">
<div id="menupc-wrapper">
<div class="top_wrap">
<div class="img-wrap">
<a href="/"><img src="./resoft_image/리소프트로고.png" alt="로고"></a>
</div>
</div>
</div>
</div>
<!-- 헤더 글 내용-->
<div class="banner-wrap">
<div class="bannerText-wrap wow fadeInLeft" data-wow-delay="0.3s"> <!-- 와우 왼쪽 애니메이션 서서히 나타나다가 사라집니다.-->
<div class="bannerText">
<p>Evolution<br /> <!-- 왼쪽 글 내용-->
With New Software
</p>
<p><span>Mobile APP(Android/iOS) Development, </span><span>AI Bigdata Analysis, MetaVerse, </span>
<span><span>Responsive WEBsite, Brand Design Launch, </span><span>ICT Consulting</span></span>
</p>
</div>
<!-- 메인 뇌 -->
</div>
<div class="img-wrap">
<img src="./resoft_image/메인뇌.png" alt="" class="wow fadeInRight" data-wow-delay="0.5s"> <!-- 와우 오른쪽 애니메이션 서서히 나타나다가 사라집니다.-->
</div>
</div>
</header>
<div class="b_wrap">
<div class="busi_content_wrap">
<ul class="business_list">
<div class="flip">
<li class="front flip-item">
<a href="javascript:void(0);">
<p class="title">앱(APP) 개발</p>
<p class="subTitleEng">android/ios app</p>
<div class="img_wrap">
<img src="./resoft_image/앱개발아이콘.png" alt="">
</div>
</a>
</li>
<div class="back flip-item">
<a href='javascript:void(0)' id='test' class="layoutImg"></a>
<img src="./resoft_image/앱개발.jpg" style="height: 100%; width: 100%">
<div class="app-text">
Android 앱 개발 <br>iOS 앱 개발 <br>플랫폼 기획 및 설계
</div>
</div>
</div>
<div class="flip">
<li class="front flip-item">
<a href="javascript:void(0);">
<p class="title">웹(WEB) 구축</p>
<p class="subTitleEng">responsive web</p>
<div class="img_wrap">
<img src="./resoft_image/web.png" alt="웹구축" />
</div>
</a>
</li>
<div class="back flip-item">
<a href='javascript:void(0)' id='test' class="layoutImg"></a>
<img src="./resoft_image/웹구축.jpg" style="height: 100%; width: 100%">
<div class="app-text">
반응형 홈페이지 구축 <br>데이터베이스 구축 <br>빅데이터 구축
</div>
</div>
</div>
<div class="flip">
<li class="front flip-item">
<a href="javascript:void(0);">
<p class="title">AI 기반 기술개발</p>
<p class="subTitleEng">ai bigdata</p>
<div class="img_wrap">
<img src="./resoft_image/bigdata.png" alt="빅데이터분석" />
</div>
</a>
</li>
<div class="back flip-item">
<a href='javascript:void(0)' id='test' class="layoutImg"></a>
<img src="./resoft_image/AI기술개발.jpg" style="height: 100%; width: 100%">
<div class="app-text">
AI 대화형 챗봇 <br>자동 객체인식 검출기 <br>딥러닝 학습 모델
</div>
</div>
</div>
<div class="flip">
<li class="front flip-item">
<a href="javascript:void(0);">
<p class="title">XR 콘텐츠 구현</p>
<p class="subTitleEng">metaverse</p>
<div class="img_wrap">
<img src="./resoft_image/metaverse.png" alt="메타버스" />
</div>
</a>
</li>
<div class="back flip-item">
<a href='javascript:void(0)' id='test' class="layoutImg"></a>
<img src="./resoft_image/XR콘텐츠.jpg" style="height: 100%; width: 100%">
<div class="app-text">
실감형 플랫폼 구축<br>가상현실 콘텐츠 제작<br>게임콘텐츠제작
</div>
</div>
</div>
</ul>
</div>
</div>
<section class="proj-center">
<h1>프로젝트</h1>
<h4>RESOFT PROJECTS</h4>
<div class="proj-box-wrapper">
<div class="proj-box">
<div class="proj-cont">
<p>송파구청 송파둘레길 비대면 걷기대회</p>
<img src="./resoft_image/resoft_center_cardlogo/logo_songpa.jpg" alt="">
</div>
</div>
<div class="proj-box">
<div class="proj-cont">
<p>대구인문사회대학</p><br>
<img src="./resoft_image/resoft_center_cardlogo/logo_inmun.jpg" alt="">
</div>
</div>
<div class="proj-box">
<div class="proj-cont">
<p>제15회 달서 하프 비대면 마라톤대회</p>
<img src="./resoft_image/resoft_center_cardlogo/logo_Dalseo.jpg" alt="">
</div>
</div>
<div class="proj-box">
<div class="proj-cont">
<p>제8회 한성백제 비대면 마라톤대회</p>
<img src="./resoft_image/resoft_center_cardlogo/logo_Great-Beakje.jpg" alt="">
</div>
</div>
<div class="proj-box">
<div class="proj-cont">
<p>2020대구 마스크 쓰GO 코로나 극복 레이스</p>
<img src="./resoft_image/resoft_center_cardlogo/logo_colorful-DAEGU.jpg" alt="">
</div>
</div>
</div>
</section>
<div class="cus_wrap">
<!-- 에코스 봇이 0.3초의 딜래이로 위에서 아래로 서서히 나타납니다. -->
<img src="./resoft_image/에코스봇.png" alt="" class="ecoce-bot wow fadeInDown" data-wow-delay="0.3s">
<!-- 환경부탄소중립기본법 사진이 0.3초의 딜래이로 왼쪽에서 오른쪽으로 서서히 나타납니다. -->
<img src="./resoft_image/환경부탄소중립기본법.png" alt="" class="ministry-Environ-img wow fadeInRight" data-wow-delay="0.3s">
<div class="ecoce-img-wrap">
<!-- 에코스모바일원 사진이 0.3초의 딜래이로 오른쪽에서 왼쪽으로 서서히 나타납니다. -->
<img src="./resoft_image/에코스모바일원.png" alt="" class="ecoce-img wow fadeInLeft" data-wow-delay="0.3s">
</div>
<!-- <p>태그가 0.6초의 딜래이로 왼쪽에서 오른쪽으로 서서히 나타납니다. -->
<div class="eco-clean-earth wow fadeInRight" data-wow-delay="0.6s">
<p>국내 최초<br/>
❛ 탄소중립 실천인증 플랫폼 ❜
</p>
<p>ECO-Clean Earth</p>
</div>
</div>
<!-- slick 동작 js -->
<script>
$( 'document' ).ready( function() {
$( '.proj-box-wrapper' ).slick( {
slidesToShow: 4,
slidesToScroll: 1,
autoplay: true,
autoplaySpeed: 3000,
arrows: false,
responsive: [
{ breakpoint: 940,
settings:{
slidesToShow:3
}
},
{ breakpoint: 680,
settings:{
slidesToShow:2
}
},
{ breakpoint: 430,
settings:{
slidesToShow:1
}
}
]
} );
} );
</script>
<!-- Resoft 로고 부분 -->
<div class="box_wrap">
<div class="img_btn">
<img src="./resoft_image/리소프트로고_big.png" alt="" class="wow fadeInDown" data-wow-delay="0.3s">
</div>
</div>
<!-- 고객사 -->
<div class="clients-img-wrap">
<ul>
<li class="wow fadeInUp customer_list" data-wow-delay="0.1s" >
<div class="img-wrap">
<img src="./resoft_image/대구광역시 건축사회.png" alt="">
</div>
<p>대구광역시 건축사회</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="0.2s">
<div class="img-wrap">
<img src="./resoft_image/minilogo_colorful-DAEGU.png" alt="">
</div>
<p>대구광역시</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="0.3s">
<div class="img-wrap">
<img src="./resoft_image/매일신문.png" alt="">
</div>
<p>매일신문</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="0.4s">
<div class="img-wrap">
<img src="./resoft_image/minilogo_kyungpook.png" alt="">
</div>
<p>경북대학교</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="0.5s">
<div class="img-wrap">
<img src="./resoft_image/대구MBC문화원.png" alt="">
</div>
<p>대구MBC문화원</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="0.6s">
<div class="img-wrap">
<img src="./resoft_image/대구광역시 체육회.png" alt="">
</div>
<p>대구광역시 체육회</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="0.7s">
<div class="img-wrap">
<img src="./resoft_image/대구가톨릭대학교.png" alt="">
</div>
<p>대구가톨릭대학교</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="0.8s">
<div class="img-wrap">
<img src="./resoft_image/송파구청.png" alt="">
</div>
<p>송파구청</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="0.9s">
<div class="img-wrap">
<img src="./resoft_image/국민의힘.png" alt="">
</div>
<p>국민의힘</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="1.8s">
<div class="img-wrap">
<img src="./resoft_image/국제라이온스협회.png" alt="">
</div>
<p>국제라이온스협회</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="1.7s">
<div class="img-wrap">
<img src="./resoft_image/한국전기공사협회.png" alt="">
</div>
<p>한국전기공사협회</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="1.6s">
<div class="img-wrap">
<img src="./resoft_image/즐거운세상.png" alt="">
</div>
<p>(주)즐거운 세상</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="1.5s">
<div class="img-wrap">
<img src="./resoft_image/해양대학교.png" alt="">
</div>
<p>한국해양대학교</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="1.4s">
<div class="img-wrap">
<img src="./resoft_image/상공회의소.png" alt="">
</div>
<p>대구상공회의소</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="1.3s">
<div class="img-wrap">
<img src="./resoft_image/대한건설협회.png" alt="">
</div>
<p>대한건설협회</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="1.2s">
<div class="img-wrap">
<img src="./resoft_image/한국청년회의소.png" alt="">
</div>
<p>한국청년회의소</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="1.1s">
<div class="img-wrap">
<img src="./resoft_image/minilogo_keimyung.png" alt="">
</div>
<p>계명대학교</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="1.0s">
<div class="img-wrap">
<img src="./resoft_image/목포해양대학교.png" alt="">
</div>
<p>목포해양대학교</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="2.0s" data-wow-offset="-30">
<div class="img-wrap">
<img src="./resoft_image/대구공고.png" alt="">
</div>
<p>대구공업고등학교</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="2.1s" data-wow-offset="-30">
<div class="img-wrap">
<img src="./resoft_image/대경산업협회.png" alt="">
</div>
<p>대경ICT산업협회</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="2.2s" data-wow-offset="-30">
<div class="img-wrap">
<img src="./resoft_image/한국조리기능장협회.png" alt="">
</div>
<p>한국조리기능장협회</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="2.3s" data-wow-offset="-30">
<div class="img-wrap">
<img src="./resoft_image/여성기업인협회.png" alt="">
</div>
<p>IT여성기업인협회</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="2.4s" data-wow-offset="-30">
<div class="img-wrap">
<img src="./resoft_image/중소기업융합연합회.png" alt="">
</div>
<p>중소기업융합연합회</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="2.5s" data-wow-offset="-30">
<div class="img-wrap">
<img src="./resoft_image/대구신용보증재단.png" alt="">
</div>
<p>대구신용보증재단</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="2.6s" data-wow-offset="-30">
<div class="img-wrap">
<img src="./resoft_image/달서구청.png" alt="">
</div>
<p>달서구청</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="2.7s" data-wow-offset="-30">
<div class="img-wrap">
<img src="./resoft_image/대구디지털산업진흥회.png" alt="">
</div>
<p>대구디지털산업진흥원</p>
</li>
<li class="wow fadeInUp customer_list" data-wow-delay="2.8s" data-wow-offset="-30">
<div class="img-wrap">
<img src="./resoft_image/로타리클럽.png" alt="">
</div>
<p>국제로타리클럽</p>
</li>
</ul>
<!-- 고객사 더보기 버튼 -->
<button class="load"><i class="fa-solid fa-circle-plus"></i></button>
</div>
<!-- 고객사 미디어 쿼리 구간별 딜레이 설정 -->
<script>
// window.matchMedia()를 이용해서 접속하는 웹브라우저의 가로 크기에 따라 다른 작업을 할 수 있습니다. 반응형 웹디자인을 할 때 유용한 메소드
// 가로가 1217px라면 customer_list를 숨깁니다. hide()
// customer_list의 요소를 list에 보냅니다.
if (window.matchMedia("screen and (max-width: 1217px)").matches) {
$(function () {
$(".customer_list").hide();
var array = [];
var list = document.getElementsByClassName('customer_list');
//array에 list의 길이만큼 반복하여 push()로 배열의 맨 끝에 list[i]번째의 요소를 입력합니다.
for (var i = 0; i < list.length; i++) {
array.push(list[i]);
}
var visiArray = [];
//slice()는 배열의 일부분을 선택하여 새로운 배열을 만듭니다.
//visiArray에 array요소의 0~8까지 입력합니다.
visiArray = array.slice(0, 8);
//CONCAT은 문자열을 이어주는 함수입니다. 예를 들어 CONCAT( first_name, last_name )는 first_name의 값과 last_name의 값을 이어서 출력합니다.
//reverse()는 배열의 원소의 순서를 반대로 만드는 메서드
//즉 array의 8~16 원소를 거꾸로 저장 후 24번째까지 보내기
// array = [0 1 2 3 4 5 6 7 15 14 13 12 11 10 9 8 16 17 18 19 20 21 22 23 24] 이런 순서로 되어있을 것
visiArray = visiArray.concat(array.slice(8, 16).reverse());
visiArray = visiArray.concat(array.slice(16, 24));
var second = 0;
//visiArray의 길이 만큼 i를 증가 반복하여 visiArray의 i번째 있는 요소에 setAttribute를 통해 data-wow-delay의 delay 시간을 0.1초씩 늘려 나오는 시간을 재지정
for (var i = 0; i < visiArray.length; i++) {
second = second + 0.1;
visiArray[i].setAttribute('data-wow-delay', second + 's')
visiArray[i].style.display = 'block';
}
//load버튼의 0번째 인덱스 가져옴
var load = document.getElementsByClassName('load')[0];
//숨겨진 아이콘
//preventDefault는 a 태그나 submit 태그, button등은 누르게 되면 href 를 통해 이동하거나 , 창이 새로고침하여 실행되는데 이러한 동작을 막아줄 수 있습니다.
//hiddenArray에 남은 array의 남은 원소들 보내기
load.addEventListener('click', function (e) {
e.preventDefault();
var hiddenArray = [];
hiddenArray = array.slice(24, 27);
var hSecond = 0;
//남은 원소의 길이 만큼 i를 증가 반복하여 남은 원소의 i번째 있는 요소에 setAttribute를 통해 data-wow-delay의 delay 시간을 0.1초씩 늘려 나오는 시간을 재지정
for (var i = 0; i < hiddenArray.length; i++) {
hSecond = hSecond + 0.1;
hiddenArray[i].setAttribute('data-wow-delay', hSecond + 's');
hiddenArray[i].style.display = 'block';
}
//이벤트가 일어난 후 버튼 안보이게 하기
load.style.display="none";
//Window.scrollTo() 문서의 지정된 위치로 스크롤한다
//window.pageYOffset 화면의 Y축의 상단값
window.scrollTo(0, window.pageYOffset + 1);
window.scrollTo(0, window.pageYOffset - 1);
// if (document.querySelectorAll('.customer_list[style="display:none;"]').length == 0) {
// load.style.display = "none";
// }
});
});
}
//4개 아이콘, 8개와 방식이 같음
if (window.matchMedia("screen and (max-width: 940px)").matches) {
$(function () {
$(".customer_list").hide();
var list = document.getElementsByClassName('customer_list');
var hiddenArray = [];
var openArray = [];
$(".customer_list").slice(0, 12).show();
for (var i = 0; i < list.length; i++) {
if (list[i].style.display == "none") {
hiddenArray.push(list[i]);
} else {
openArray.push(list[i]);
}
}
// 보여진 아이콘
var second = 0
for (var i = 0; i < openArray.length; i++) {
second = second + 0.1
openArray[i].setAttribute('data-wow-delay', second + 's');
}
//숨겨진 아이콘
var hSecond = 0;
$(".load").click(function (e) {
e.preventDefault();
for (var i = 0; i < hiddenArray.length; i++) {
hSecond = hSecond + 0.1;
hiddenArray[i].setAttribute('data-wow-delay', hSecond + 's');
hiddenArray[i].style.display = 'block';
if ($(".customer_list:hidden").length == 0) {
$(".load").hide();
}
};
});
window.scrollTo(0, window.pageYOffset + 1);
window.scrollTo(0, window.pageYOffset - 1);
})
}
function preventClick(e){
e.preventDefault()
}
</script>
<!-- 지도 -->
<div class="map-wrap">
<!-- 카카오맵 부분 -->
<div id="map" class="indexKakaoMap wow fadeIn" data-wow-delay="0.3s"></div>
<!-- 전화번호,팩스번호,이메일,주소 -->
<div class="map-info-wrap indexKakaoMap wow fadeInRight" data-wow-delay="0.5s">
<div class="map-info">
<p>TEL</p>
<a href="tel:053-475-2110 cursor: text; " >
<p>(053) 475-2110</p>
</a>
</div>
<div class="map-info">
<p>FAX</p>
<a href="javascript:void(0) cursor: text;">
<p>(0504) 257-5966</p>
</a>
</div>
<div class="map-info">
<p>E-MAIL</p>
<p>call@resoft.kr</p>
</div>
<div class="map-info">
<p>ADDRESS</p>
<p>(41260) <br>
대구광역시 동구 동대구로 465,
대구스케일업허브(DASH) 704호<br>
(주)리소프트
</p>
</div>
</div>
</div>
<script>
// 카카오 지도 api
var container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
var options = { //지도를 생성할 때 필요한 기본 옵션
center: new kakao.maps.LatLng(35.871691843254716, 128.62496478375644), //지도의 중심좌표.
level: 3 //지도의 레벨(확대, 축소 정도)
};
var map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
// 마커가 표시될 위치입니다
var markerPosition = new kakao.maps.LatLng(35.871691843254716, 128.62496478375644);
var imageSrc = './resoft_image/지도마커.png', // 마커이미지의 주소입니다
imageSize = new kakao.maps.Size(220, 45), // 마커이미지의 크기입니다
imageOption = {
offset: new kakao.maps.Point(27, 69)
}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
var markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption),
markerPosition = new kakao.maps.LatLng(35.871691843254716, 128.62496478375644); // 마커가 표시될 위치입니다
// 마커를 생성합니다
var marker = new kakao.maps.Marker({
position: markerPosition,
image: markerImage
});
// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);
//애니메이션 -> wow로 대체
</script>
<!-- 푸터 -->
<footer>
<div class="footer_wrap">
<!-- 로고 부분 -->
<div class="img-wrap">
<img src="./resoft_image/푸터로고.png" alt="footer_logo">
</div>
<!-- 글 부분 -->
<div class="footer_content">
<p class="footer_content_wht">주식회사 리소프트는 새로운 소프트웨어로 진화하여 여러분께 응답드리고자 노력하겠습니다.</p>
<div class="footer_info_wrap">
<div class="footer_info">
<p><span>상호. </span><span>(주)리소프트</span></p>
<p><span>대표이사. </span><span>오유나</span></p>
<p><span>사업자등록번호. </span><span>722-81-02219</span></p>
<p><span>개인정보책임자. </span><span>이현지</span></p>
<br><br>
<pre></pre>
<p><span>주소. </span><span>(41260) 대구광역시 동구 동대구로 465, 대구스케일업허브(DASH) 704호 (신천동 106)</span></p>
<p><span>전화. </span><a href="tel:053-475-2110" style="cursor:text"><span>(053) 475-2110</span></a><i class="fa-solid fa-pipe"></i>
</p><p><span>팩스. </span><a href="javascript:void(0);" style="cursor: text"><span>(0504)
257-5966</span></a>
</p><p><span>이메일. </span><span>call@resoft.kr</span></p>
</div>
</div><br>
<p class="copyright">Copyright(c) RESOFT CO.LTD. All right reserved.</p>
</div>
</div>
</footer>
<script>
var bannerTextWrap = document.getElementsByClassName('bannerText-wrap')[0]
var width = bannerTextWrap.clientWidth;
var halfWidth = width / 2;
if (window.matchMedia("screen and (max-width: 940px)").matches) {
$(bannerTextWrap).css({ 'left': 'calc(50% - ' + halfWidth + 'px)' });
}
window.addEventListener('resize', function() {
if (window.matchMedia("screen and (max-width: 940px)").matches) {
$(bannerTextWrap).css({ 'left': 'calc(50% - ' + halfWidth + 'px)' });
} else {
bannerTextWrap.style.left = "0";
}
}
);
var moveBtn = document.getElementsByClassName('move')[0];
moveBtn.addEventListener('click', function() {
var offsetY = window.pageYOffset;
if(offsetY !== 0) {
window.scrollTo({
top: 0,
behavior: 'smooth'
})
}
})
</script>
</body>
</html>CSS
@charset "utf-8";
@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;
}
*{box-sizing: border-box;
list-style: none;
text-decoration: none;}
body{font-family: 'NanumSquareRound'; position: relative; font-weight: 500;
margin: 0;
padding: 0;
list-style: none;
list-style-type: none;
}
button{outline: none;}
br{opacity: 0;}
.topBtn{position: fixed; z-index: 99999; bottom: 7%; right: 5%; display: flex; flex-direction: column; align-items: center;}
.topBtn p{font-weight: 500; font-size: 16px; color: #a3a3a3;}
button.move{border-radius: 50%; border: 2px solid #a3a3a3; background: white; cursor: pointer; margin-bottom: 5px;}
button.move i{padding: 5px; font-size: 32px;}
.header{width: 100%; height: 830px; z-index: 9999; position: relative; background: url(./resoft_image/헤더배경.png) no-repeat; background-repeat: round; padding-top: 30px;} /*헤더 배경 */
.header .banner-wrap{height: 100%; max-width: 1400px; margin: 0 auto; position: relative;}
.header .banner-wrap .img-wrap{position: absolute; right: 0; top: 9%;}
.header .bannerText-wrap{color: #f8f8f8; position: absolute; top: 25%; word-break: normal;}
.header .bannerText-wrap button{color: #f8f8f8; font-weight: 600; font-size: 20px; padding: 10px 25px; background: #ffffff2b; cursor: pointer; border: 1px solid;}
.header .bannerText-wrap button:hover{background: transparent}
.header .bannerText{padding-bottom: 80px;}
.header .bannerText p:first-child{font-size: 50px; font-weight: 600; padding-bottom: 35px; line-height: 60px;}
.header .bannerText p:last-child {font-weight: 500; line-height: 20px;}
.header .bannerText p:last-child span:nth-child(3){display: block;}
.wrapper{max-width:100%; position: relative;}
.wrapper .top_wrap > a , .wrapper #gnb_m > a{position: absolute; height: 71px;}
.wrapper .top_wrap > a img{left: 170px; position: absolute; padding: 14px; height: 44px;}
.wrapper .top_wrap > a .header_logo{width: 71px;}
.wrapper .top_wrap > a .header_logo_text{width: 150px; margin-left: 15px;}
.wrapper .top_wrap{max-width:1400px; margin:0 auto; position: relative;z-index: -1;height: 100%;}
.wrapper .top_wrap .img-wrap{display: block; height: auto; position: absolute; top: 25%; padding-left: 15px;}
.wrapper .top_wrap .img-wrap img{width: 240px;}
.back.flip-item {
text-align: center;
line-height: 30px;
width: 100%;
position: relative;
}
.app-text {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
transform: translate(-50%, -50%);
font-size: 20px;
font-family: 'ypseo';
text-align: center;
color: #ffffff;
}
.layoutImg {
display: block;
background: rgba(20, 21, 22, 0.445);
width: 100%;
height: 100%;
position: relative;
margin-bottom: -350px;
}
.b_wrap .busi_content_wrap .business_list .flip:first-child img{width: 170px;}
.b_wrap{padding: 200px 0; overflow: hidden;}
.b_wrap .busi_content_wrap {max-width: 1400px; margin: 0 auto;}
.b_wrap .business_list {width: 100%; display: flex;}
.b_wrap .business_list li a {display: block; position: relative; text-align: center; height: 100%; transition: box-shadow .2s;}
.b_wrap .business_list li a .title {font-size: 23px; margin: 10px 0; font-weight: 500; color: #2e2e2e;}
.subTitleEng {text-transform: uppercase; text-align: center; color: #ee72d8; font-weight: 600; font-size: 15px; letter-spacing: 3px;}
.b_wrap .business_list li a .img_wrap{position: relative; width: 100%; height: 185px}
.b_wrap .business_list li a .img_wrap img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px;}
.b_wrap .busi_content_wrap .business_list .flip:first-child img{width: 140px;}
.b_wrap .business_list .flip{box-sizing: border-box; cursor: pointer; width: calc(100% / 4 - 3%); height: 350px; position: relative; margin: 0 1.5%;}
.b_wrap .business_list .flip .flip-item{backface-visibility: hidden; background: #f6f6f6; transition: 1s; width: 100%; height: 100%;}
.b_wrap .business_list .flip .front{position: absolute; backface-visibility: hidden; transition: 1s; transform: rotateY(0deg);}
.b_wrap .business_list .flip .front a{display: flex; flex-direction: column; justify-content: center; align-items: center;}
.b_wrap .business_list .flip .back {transform: rotateY(-180deg);display: flex; align-items: center; justify-content: space-between;flex-direction: column; }
.b_wrap .business_list .flip:hover .front{transform: rotateY(180deg);}
.b_wrap .business_list .flip:hover .back{transform: rotateY(0deg); }
.proj-center{
text-align: center;
background-color: #f8f8f8;
padding: 55px 0 125px 0;
}
/*프로젝트 타이틀 */
.proj-center h1 {
color: #04088a;
font-size: 2.5rem;
font-weight:bolder;
}
.proj-center h4 {
color: #ee72d8;
letter-spacing: 0.25rem;
margin-top: -1.2rem;
margin-bottom: 4rem;
}
/* slick 부분 */
.proj-box-wrapper {
max-width: 1400px;
margin: 0px auto;
}
.proj-center .proj-box-wrapper .proj-box{
width: 300px;
height: 300px;
background-color: white;
margin-left: 10px;
margin-right: 10px;
cursor: pointer;
}
.proj-center .proj-box-wrapper .proj-box .proj-cont{
font-size: 1.25rem;
font-weight: 600;
width: 254px;
height: 200px;
margin: auto;
top: 9%;
position: relative;
}
.proj-center .proj-box-wrapper .proj-box p {
padding: 0px 20px 0px 20px;
height: auto;
word-break: keep-all;
text-align: left;
}
.proj-center .proj-box-wrapper .proj-box img {
width: 100%;
height: auto;
position: absolute;
top: 40%;
transition: transform 0.3s ease-in-out;
transform: scale(0.9);
}
.proj-center .proj-box-wrapper .proj-box:hover img {
transform: scale(1);
}
/*구 모양 이미지? 왜 있을까요??*/
.cus_wrap {
background: url(./resoft-image/web.pngk) no-repeat;
max-width: 1400px;
height: 1100px;
margin: 0 auto;
display: block;
margin-top: 60px;
margin-bottom: 250px;
position: relative;
background-position: center;
}
/*에코스봇 위치*/
.cus_wrap .ecoce-bot{
position: absolute;
top: 5%;
right: 0;
width: 740px;
}
/*탄소중립기본법 배너*/
.cus_wrap .ministry-Environ-img{
position: absolute;
right: 0;
top: 290px;
width: 350px;
}
/*스마트폰 그림*/
.cus_wrap .ecoce-img-wrap{
position: relative;
height: 100%;
top: 160px;
width: 960px;
}
.cus_wrap .ecoce-img-wrap .ecoce-img{
position: absolute;
left: 0;
width: 100%;
}
/*우측 하단 문구*/
.cus_wrap .eco-clean-earth{
position: absolute;
right: 0;
top: 830px;
text-align: right;
line-height: 45px;
margin-top: 50px;
}
/*우측 하단 문구 : 첫 <p>태그 폰트 사이즈*/
.cus_wrap .eco-clean-earth p:first-child{
font-size: 40px;
font-weight: 600;
}
/*우측 하단 문구 : 마지막 <p>태그 폰트 사이즈*/
.cus_wrap .eco-clean-earth p:last-child{font-size: 30px;}
/* 로고부분 */
.box_wrap{width: 100%; background: #04088a; overflow: hidden; box-sizing: border-box; height: 300px;}
.box_wrap .img_btn{position: relative; height: 100%; max-width: 1400px; margin: 0 auto;}
.box_wrap img{position: absolute; bottom: 0;}
.box_wrap .box_btn{position: absolute; display: flex; gap: 15px; right: 0; bottom: 15%;}
.box_wrap .box_btn button{font-size: 15px; font-weight: 600; border: none; width: 185px; height: 50px;}
.box_wrap .box_btn button:first-child a{color: #ee72d8;}
.box_wrap .box_btn button:last-child a{color: white;}
/* 고객사 */
.clients-img-wrap{text-align: center; max-width: 1400px; margin: 150px auto;}
.clients-img-wrap ul{display: flex; flex-wrap: wrap;}
.clients-img-wrap ul li{color: #a3a3a3; font-size: 18px; width: calc(100% / 9); margin-bottom: 50px; display: flex; flex-direction: column; align-items: center;}
.clients-img-wrap ul li .img-wrap{width: 120px; position: relative; height: 120px; border: 3px solid #dddddd; border-radius: 50%;}
.clients-img-wrap ul li img{max-width: 100%; padding: 20px; margin-bottom: 5px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%)}
.clients-img-wrap ul li .sm-img{max-width: 90%;}
.clients-img-wrap ul li .lg-img{max-width: 110%;}
.clients-img-wrap ul li .lg-img-width{width: 90%;}
.clients-img-wrap ul li p{font-size: 16px; padding-top: 15px; word-break: break-all}
.clients-img-wrap .load{background: transparent; cursor: pointer; border: none; display: none;}
.clients-img-wrap .load i{font-size: 80px; color:#04088a;}
/* -------------------지도 -----------------*/
.indexKakaoMap{
width:65%;
height:45vw;
max-width:1400px;
}
.map-wrap{
margin:200px;
display:flex;
gap:90px;
}
.map-wrap .map-info-wrap{
display:flex;
gap:35px;
flex-direction:column;
font-size:18px;
margin-top:75px;
}
.map-wrap .map-info-wrap .map-info a p,
.map-info-wrap .map-info p:last-child{
color:#7b7b7b;
}
.map-info p:first-child{
font-weight:600;
margin-bottom:15px;
color:black;
}
/* -----------------푸터 -----------------*/
footer{
display:block;
clear:both;
width:100%;
position:relative;
}
.footer_wrap{
background-image:url("./resoft_image/footer2.png");
background-size:cover;
}
.footer_wrap{
margin:0 auto;
padding:80px 50px;
display:flex;
}
.footer_wrap > div{
margin-left:250px;
}
.footer_wrap .footer_content{
margin-left:5%;
width:85%;
display:inline-block;
}
.footer_wrap .footer_content_wht{
color:white;
font-size:19px;
margin-top:0;
margin-bottom:10px;
}
.footer_wrap .footer_content .footer_info_wrap{
color:#b9b9b9;
line-height:25px;
}
.footer_wrap .footer_info{
display:flex;
flex-wrap:wrap;
}
.footer_wrap .footer_info p{
margin:0;
width: calc(100% / 2);
}
.footer_wrap .copyright{
color:#828282;
}
.footer_wrap .footer_info_wrap p a{
color:#b9b9b9;
}
/*동적 화면 크기 조절*/
@media screen and (max-width:1500px) {
.header .bannerText-wrap{ padding-left: 2%;}
.header .banner-wrap .img-wrap{padding-right: 2%;}
/* 명환씨파트 */
.cus_wrap{height: 60vw;}
.cus_wrap .ecoce-bot {top: 5%; width: 53%; right: 2%;}
.cus_wrap .ministry-Environ-img{top: 30%; width: 25%; right: 2%;}
.cus_wrap .ecoce-img-wrap{top: 20%; width: 69%; left: 2%;}
.cus_wrap .eco-clean-earth{top: 90%; right: 2%}
/* 유진씨파트 */
.box_wrap img{left: 2%;}
.box_wrap .box_btn{right: 2%;}
.clients-img-wrap{margin: 130px auto;}
.clients-img-wrap ul{margin: 0 2%;}
}
/* 1300px 기준, 지도의 크기 변화 */
@media screen and (max-width:1300px){
.indexKakaoMap{
height:585px;
}
.map-wrap{
gap:50px;
margin:200px 50px;
}
.marp-wrap .map-info-wrap{
width:40%;
}
}
/* 푸터 로고 옆의 마진 제거 (기본 250px) */
@media screen and (max-width :1299px){
.footer_wrap > div{
margin-left:0;
}
}
@media screen and (max-width:1217px) {
/* 인홍씨파트 */
.header .bannerText p:first-child{font-size: 45px;}
.header .banner-wrap .img-wrap{top: 11%;}
.header .banner-wrap .img-wrap img{width: 580px;}
.header .bannerText p:last-child span:last-child{display: block;}
.header .bannerText p:last-child span:nth-child(2),
.header .bannerText p:last-child span:last-child span:last-child {display: block;}
/* 순정씨 파트 */
/* slick 부분 */
.proj-center .proj-box-wrapper .proj-box .proj-cont{
width: 200px;
}
.proj-center .proj-box-wrapper .proj-box p {
padding: 0px 20px 0px 23px;
}
.proj-center .proj-box-wrapper .proj-box img {
width: 100%;
height: auto;
top: 55%;
}
/* 명환씨파트 */
.cus_wrap .eco-clean-earth p:first-child{font-size: 30px;}
.cus_wrap .eco-clean-earth p:last-child{font-size: 25px;}
/* 유진씨파트 */
.box_wrap .box_btn{bottom: 10%;}
.box_wrap{height: 250px;}
.box_wrap img{width: 50%;}
.clients-img-wrap ul li{width: calc(100% / 8);}
.clients-img-wrap ul li .img-wrap{width: 10vw; height: 10vw;}
.clients-img-wrap ul{margin: 0 5%;}
.clients-img-wrap .load{display: initial;}
/* 제민씨파트 */
.indexKakaoMap{
height:650px;
}
}
@media screen and (max-width: 940px){
/* 인홍씨파트 */
.header{height: 1000px; background: url(./resoft_image/헤더배경940.png) no-repeat; background-position-x: right;}
.header .bannerText{padding-bottom: 50px;}
.header .bannerText p:first-child{font-size: 36px; line-height: 45px;}
.header .bannerText-wrap{top: 45%;}
.header .banner-wrap .img-wrap{left: 50%; right: 0; top: 0; transform: translateX(-50%); width: 500px;}
.header .banner-wrap .img-wrap img{width: 100%;}
.wrapper .top_wrap{display: inline;}
.wrapper .top_wrap>a img{ position: unset;}
.wrapper .top_wrap .img-wrap img {height: 30px; width: 150px;}
/* 순정씨 파트 */
/*프로젝트 타이틀 */
.proj-center h1 {
color: #04088a;
font-size: 1.5rem;
font-weight:bolder;
}
.proj-center .proj-box-wrapper .proj-box p {
padding: 0px 20px 0px 25px;
}
.proj-center .proj-box-wrapper .proj-box img {
width: 100%;
height: auto;
top: 55%;
}
/* 명환씨파트 */
.cus_wrap{height: auto; margin: 60px 2%;}
.cus_wrap .ecoce-bot{width: 75%; position: unset;}
.cus_wrap .ministry-Environ-img{display: none;}
.cus_wrap .ecoce-img-wrap .ecoce-img{position: unset;}
.cus_wrap .ecoce-img-wrap{width: 85%; height: auto; margin: 0 auto; margin-top: 65px; margin-bottom: 30px;}
.cus_wrap .eco-clean-earth{margin: 0; position: unset;}
/* 유진씨파트 */
.box_wrap{height: 400px; text-align: center;}
.box_wrap img{width: 60%; position:unset; margin: 70px 0;}
.box_wrap .box_btn{position: unset; flex-direction: column; align-items: center;}
.box_wrap .box_btn button{width: 60%;}
.clients-img-wrap ul{max-width: 500px; margin: 0 auto;}
.clients-img-wrap ul li{width: calc(100% / 4 - 6%); margin: 0 3% 30px 3%;}
.clients-img-wrap ul li .img-wrap{width: 110px; height: 110px;}
.clients-img-wrap .load i{font-size: 70px;}
/* 제민씨 푸터 */
.footer_wrap .footer_content_wht,
.footer_wrap .copyright{
font-size:16px;
}
.footer_wrap .footer_info_wrap .footer_info{
font-size:14px;
}
}
@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){
/* 인홍씨파트 */
.header .banner-wrap .img-wrap{width: 400px;}
.header{height: 800px;}
.header .bannerText{padding-left: 50px;}
/* 주형씨파트 */
.b_wrap .business_list .flip{height: 300px;}
.b_wrap .business_list .flip{height: 250px;}
.b_wrap .business_list li a .img_wrap{height: 125px;}
.b_wrap .business_list li a .img_wrap img{width: 80px;}
.b_wrap .busi_content_wrap .business_list .flip:first-child img{width: 135px;}
.b_wrap .business_list li a .title{font-size: 20px; }
/* 명환씨파트 */
.cus_wrap .eco-clean-earth{line-height: 35px;}
.cus_wrap .eco-clean-earth p:first-child{font-size: 28px;}
.cus_wrap .eco-clean-earth p:last-child{font-size: 22px;}
.cus_wrap .ecoce-bot{width: 95%;}
.cus_wrap .ecoce-img-wrap{margin-top: 40px; }
/* 제민씨파트
지도와 글의 위치변화, 글의 배치2줄로 변화 */
body{
overflow-x:hidden;
max-width:640px;
}
.indexKakaoMap{
width:90%;
height:600px;
}
.map-wrap{
flex-direction:column-reverse;
margin:0;
margin-bottom:300px;
align-items:center;
}
.map-wrap .map-info-wrap{
flex-wrap:wrap;
flex-direction:row;
margin:0;
gap:0;
width:90%;
}
.map-wrap .map-info-wrap .map-info{
width: calc(100% / 2);
margin-bottom:50px;
}
.map-wrap .map-info p:last-child{
font-size:15px;
}
/* 푸터 로고의 위치변화, 글의 배치 변화*/
.footer_wrap{
display:block;
padding:40px;
}
.footer_wrap .img-wrap{
text-align:center;
margin-bottom:20px;
}
.footer_wrap .img-wrap img{
width:30%;
height:auto;
float:none;
}
.footer-wrap .footer_info{
flex-direction:column;
}
.footer_wrap .footer_content{
margin:0 0 0 28px;
}
.footer_wrap .footer_info p{
width:100%;
line-height:17px;
}
}
/* 유진씨파트 */
@media screen and (max-width: 500px) {
.clients-img-wrap ul li .img-wrap{width: 22vw; height: 22vw;}
}
@media screen and (max-width: 430px){
/* 인홍씨파트 */
.header{height: 640px;}
.header .bannerText p:first-child{font-size: 24px; line-height: 30px; padding-bottom: 22px;}
.header .bannerText p:last-child{line-height: 17px; font-size: 15px;}
.header .bannerText{padding-bottom: 25px;}
.header .bannerText-wrap button{padding: 8px 20px; font-size: 15px;}
.header .banner-wrap .img-wrap{width: 300px;}
/* 순정씨파트 */
.proj-center h4 {
margin-bottom: 2rem;
}
/* slick 부분 */
.proj-center .proj-box-wrapper .proj-box {
margin: 30px;
}
.proj-center .proj-box-wrapper .proj-box .proj-cont{
width: 254px;
}
.proj-center .proj-box-wrapper .proj-box img {
width: 100%;
height: auto;
top: 40%;
}
/* 명환씨파트 */
.cus_wrap .cus_content > h3{font-size: 30px;}
.cus_wrap .cus_content > p{font-size: 22px;}
.cus_wrap .eco-clean-earth p:first-child{font-size: 22px; line-height: 22px;}
.cus_wrap .eco-clean-earth p:last-child{font-size: 20px;}
/* 유진씨파트 */
.box_wrap img{margin: 53px 0;}
.box_wrap{height: 320px;}
.clients-img-wrap ul li p{font-size: 14px;}
.clients-img-wrap ul li img{padding: 12px;}
/* 제민씨파트 지도의 크기 변화 및, 글의 배치 1줄로 변경*/
.map-wrap .map-info-wrap{
flex-direction:column;
}
.map-wrap .map-info-wrap .map-info{
width:100%;
margin-bottom:23px;
}
.map-wrap .map-info-wrap .map-info>p:first-child{
margin-bottom:7px;
}
/* 푸터 글자의 크기, 로고이미지의 크기 변화*/
.footer_wrap{
padding:30px 15px;
}
.footer_wrap .img-wrap img{
width:130px;
height:auto;
}
}그 외에도 플러그인인 wow와 img파일이 있습니다.
https://jamihs.github.io/JAI/resoft.html
2) 학습내용 중 어려웠던 점
X
3) 해결방법
X
4) 학습소감
서로서로 맡은 부분을 하다보니 class이름이나 img이름 등 다른 점들이 많아서 통합하는 부분이 오래 걸려서 확실히 회사나 여러가지 팀플을 할 때는 정해진 양식이 필수로 있어야 한다는 것을 느꼈습니다. 그리고 중복되는 파일들도 확인을 해서 합쳐야 코드낭비가 되지 않을 테니 이것도 제대로 확인이 되어야 되는 과정이었습니다.
JAMIHs