어제 정리한 금주 작업분
- 폰트 패밀리 noto sans 추가
- 팀원들 작업 코드들 취합
- 호스팅 주소 만들기
- 새 기능 추가 구상
다른 수정사항 발생으로 1, 4번은 천천히 진행
2) 팀원들 작업 코드들 취합
<!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>
<!-- 파비콘 -->
<link rel="shortcut icon" href="./resoft_image/web.png" type="image/x-icon" />
<!-- 기본 css -->
<link rel="stylesheet" type="text/css" href="./style.css" />
<!-- wow 애니메이션 css -->
<link rel="stylesheet" href="./animate.css">
<!-- Slick Slider CDN 주소 -->
<script src="https://code.jquery.com/jquery-latest.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" />
<!-- 구글에서 폰트 불러오기 -->
<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" />
</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 id="gnb_m">
<div class="top_wrap">
<!-- <a href="/"><img src="./resoft_image/리소프트로고.png" alt="로고"></a> -->
</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>
<!-- Slick Slider 플러그인 인식 div-->
<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 Slider 동작 스크립트 -->
<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";
// }
});
});
}
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>
<!-- wow 애니메이션 js -->
<script src="./wow.min.js"></script>
<!-- Fontawesume -->
<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=1a7f995e77bee6df3da12f24643da965"></script>
<script>new WOW().init();</script>
<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>
<!-- 푸터 -->
<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>
</html>3) 호스팅 주소 만들기
깃헙에서 새 레퍼지토리(저장소) 생성 후, 파일을 추가.
저의 깃헙주소로 호스팅 했음
-> https://jang-gwang.github.io/toco/
4) 작업 결과물
앞으로 작업할 것
- 자바스크립트 분리를 어떻게 할 건지 멘토님께 여쭤보고 수정
- 미디어 쿼리 작성 덜 된 부분 마무리
- 앞으로 뭘 할 건지?
어려운 점
- 자바스크립트 내용이 위치에 따라 작동이 되고 안된다는 게 있어서 다음날 멘토님께 질문하기로 함
해결 방법
그 밖에는 딱히 X
소감
코드 취합하고 호스팅 주소 생성하고 멘토님께 여쭤볼 거리들 모임으로 이야기 나눈 정도라 일찍 끝난 날이었던 것 같다.
제로부터 시작하는 프로그래밍&코딩