1)학습한 내용
*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 rel="stylesheet" href="./2page.css">
<link rel="stylesheet" href="../1page/magic.css">
<script src="https://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=aefe3289ad8055c77f85adc77808a661"></script>
<title>회사소개</title>
</head>
<body>
<!-- header -->
<header class="header">
<div class="navi">
<a class="img_wrap" href="../1page/1page.html">
<img src="../img/common/logo_resoft.png" alt="메인로고">
</a>
<div id="wrapper">
<nav>
<ul id="wrap_text">
<li><a class="wrap_tx" href="./2page.html">회사소개</a>
<ul class="nvi close">
<li class="wrap_tx2"><a href="../2page/2page.html">회사소개</a></li>
<li><a href="./2page.html#resoft">Resoft소개</a></li>
<li><a href="./2page.html#yunhyuk">연혁</a></li>
<li><a href="./2page.html#section3">조직도</a></li>
<li><a href="./2page.html#section4">특허&인증</a></li>
<li><a href="./2page.html#section5">오시는 길</a></li>
</ul>
</li>
<li><a class="wrap_tx" href="../3page/3page.html">사업현황</a>
<ul class="nvi close">
<li class="wrap_tx2"><a href="../3page/3page.html">사업현황</a></li>
<li><a href="../3page/3page.html#section_ecoce">ECOCE</a></li>
<li><a href="../3page/3page.html#section_moado">MoaDo</a></li>
<li><a href="../3page/3page.html#section_etc">Etc</a></li>
</ul>
</li>
<li><a class="wrap_tx" href="../4page/4page.html">정보마당</a>
<ul class="nvi close">
<li class="wrap_tx2"><a href="../4page/4page.html">정보마당</a></li>
<li><a href="../4page/4page.html#resoft_news">Resoft소식</a></li>
</ul>
</li>
</ul>
</nav>
<div class="nvi close"></div>
</div>
</div>
<a class="btn">
<img src="../img/icon/ic_menu_bk.png" alt="">
</a>
<div class="display">
<img class="first on" src="../img/common/header_company.png">
<h1>회사소개</h1>
</div>
</header>
<!-- section1 -->
<section id="resoft">
<div class="re_text">
<h1>REsoft 소개</h1><br>
<h2>ABOUT US</h2>
</div>
<div class="re_text2">
<div class="re_tx">
<h1>회사명</h1><h2>(주)리소프트</h2>
</div>
<div class="re_tx2">
<h1>설립일</h1><h2>2021년 5월 6일</h2>
</div>
<div class="re_tx3">
<h1>대표이사</h1><h2>오유나</h2>
</div>
<div class="re_tx4">
<h1>주요 사업</h1><h2>모바일 플랫폼 개발</h2>
</div>
<div class="re_tx5">
<h1>본사</h1><h2>대구광역시 동구 동대구로 465, 대구스케일업허브(DASH) 713호</h2>
</div>
<div class="re_tx6">
<h1>부설연구소</h1><h2>대구광역시 수성구 알파시티1로 160, SW융합테크비즈센터(Dnex) 305호</h2>
</div>
<div class="re_tx7">
<h1>연락처</h1><h2>TEL. (053) 475-2110 / FAX. (0504) 257-5966 / E-mail. call@resoft.kr</h2>
</div>
</div>
</section>
<!-- section2 -->
<section id="yunhyuk">
<div class="yh_text">
<h1>연혁</h1><br>
<h2>HISTORY</h2>
</div>
<div class="yh">
<div class="timeline">
<div class="outer">
<div class="card">
<div class="info">
<h3 class="title">1</h3>
<h4 class="title2">2022</h4>
<p></p>
</div>
</div>
<div class="jul">
<div class="card">
<div class="info">
<h3 class="title">12</h3>
<h4 class="title3">2021</h4>
<p>대구여성인력개발센터 MOU 협약 (여성IT인재 현장실습)<br><br><br>
대구가톨릭대학교 계약학과 MOU 협약 (ICTAI융합학과)<br><br><br>
기업부설연구소(연구개발전담부서) 등록</p>
</div>
</div>
<div class="card">
<div class="info">
<h3 class="title">11</h3>
<p>제 38류, 제 45류 상표등록 출원 (Mmate : 제 40-1799224호, 제 40-1799225호)</p>
</div>
</div>
<div class="card">
<div class="info">
<h3 class="title">10</h3>
<p>서울특별시 송파구청 앱 개발 (제8회 한성백제마라톤 비대면 대회)<br><br><br>
대구광역시체육회 앱 개발 (2021 대구 마스크쓰햬 컬러풀 핫플 걷기)<br><br><br>
대구광역시 달서구체육회 앱 개발 (제15회 언택트 달서 하프마라톤 대회) </p>
</div>
</div>
<div class="card">
<div class="info">
<h3 class="title">9</h3>
<p>대구 경북지방중소벤처기업청 여성기업 등록</p>
</div>
</div>
<div class="card">
<div class="info">
<h3 class="title">8</h3>
<p>구미대학교 MOU 협약 (현장실습학기제)</p>
</div>
</div>
</div>
</div>
<div class="card1">
<div class="info1">
<h3 class="title4">5</h3>
<p>(주)리소프트 회사 설립</p>
</div>
</div>
</div>
</div>
</section>
<!-- section3 -->
<section id="section3">
<div class="zo_text">
<h1>조직도</h1><br>
<h2>ORGANIZATION</h2>
</div>
<div class="zozic">
<h1 class="zo_tx rectangle">대표이사</h1>
<ol class="zo_tx2">
<li>
<h2 class="zo_tx3 rectangle">전략기획부</h2>
<ol class="zo_tx4">
<li>
<h3 class="zo_tx5">• 유저 Needs 분석 </h3><br><h3 class="zo_tx5">• 고객 수요 확인</h3><br><h3 class="zo_tx5"> • BM 설계/기획</h3> <br><h3 class="zo_tx5">• 사업화 전략 수립</h3> <br><h3 class="zo_tx5">• 사업계획서 작성</h3>
</li>
</ol>
</li>
<li>
<h2 class="zo_tx3 rectangle">개발부</h2>
<ol class="zo_tx4">
<li>
<h3 class="zo_tx5">• DB 분석/설계</h3><br><h3 class="zo_tx5"> • Cloud 서버 관리</h3> <br><h3 class="zo_tx5">• 기능 정의</h3> <br><h3 class="zo_tx5">• 기능 구현</h3><br> <h3 class="zo_tx5">• 기능 테스트</h3>
</li>
</ol>
</li>
<li>
<h2 class="zo_tx3 rectangle">디자인부</h2>
<ol class="zo_tx4">
<li>
<h3 class="zo_tx5">• 디자인 트랜드 분석</h3><br><h3 class="zo_tx5"> • 브랜드 디자인</h3><br> <h3 class="zo_tx5">• 웹사이트 디자인</h3><br><h3 class="zo_tx5"> • 모바일 앱 디자인</h3><br><h3 class="zo_tx5"> • 상품개발 디자인</h3>
</li>
</ol>
</li>
<li>
<h2 class="zo_tx3 rectangle">마케팅부</h2>
<ol class="zo_tx4">
<li>
<h3 class="zo_tx5">• 서비스 시장조사</h3><br><h3 class="zo_tx5">• 시장동향 분석</h3><br> <h3 class="zo_tx5">• 시장성 검증</h3><br> <h3 class="zo_tx5">• 온라인 채널 운영</h3><br><h3 class="zo_tx5"> • 오프라인 광고</h3>
</li>
</ol>
</li>
<li>
<h2 class="zo_tx3 rectangle">경영지원부</h2>
<ol class="zo_tx4">
<li>
<h3 class="zo_tx5">• 경영 무 지원</h3><br> <h3 class="zo_tx5">• 업무 환경 지원</h3><br><h3 class="zo_tx5"> • 세무 업무 지원</h3>
</li>
</ol>
</li>
</ol>
</div>
</section>
<!-- section4 -->
<section id="section4">
<div class="pat_text">
<h1>특허 & 인증</h1><br>
<h2>CERTIFICATION & PATENT</h2>
</div>
<div class="pat_img">
<div class="pat_img1"><img src="../img/2page/bg_white.png"></div>
<div class="pat_img2"><img src="../img/2page/certificate.png"></div>
<div class="pat_img3"><img src="../img/2page/bg_white.png"></div>
<div class="pat_img4"><img src="../img/2page/bg_white.png"></div>
<div class="pat_img5"><img src="../img/2page/bg_white.png"></div>
<div class="pat_img6"><img src="../img/2page/bg_white.png"></div>
<div class="pat_img7"><img src="../img/2page/bg_white.png"></div>
<div class="pat_img8"><img src="../img/2page/bg_white.png"></div>
<div class="pat_img9"><img src="../img/2page/bg_white.png"></div>
</section>
<!-- section5 -->
<section id="section5">
<div class="map_text">
<h1>오시는 길</h1><br>
<h2>DIRECTIONS</h2>
</div>
<div id="map" style="width:80%;height:50%;top: 20%; left: 3%; z-index: 0;"></div>
<div class="map_tx">
<h3>연락처</h3> <h4>TELL. (053) 475-2110 FAX. (0504) 257-5966 E-MAIL. call@resoft.kr</h4>
</div>
<div class="map_tx2">
<h3>주소</h3> <h4>(41260) 대구광역시 동구 동대구로 465, 대구스케일업허브(DASH) 713호 (주)리소프트</h4>
</div>
</div>
</section>
<!-- footer -->
<footer id="footer">
<div class="fot_img">
<img src="../img/common/logo_resoft.png">
</div>
<div class="fot_text1">
<h1>© RESOFT CO.LTD. All Rights Reserved.</h1>
</div>
<div class="fot_text2">
<h1>상호 : (주)리소프트<br><br> 사업자등록번호 : 722-81-02219 <br><br>주소 : (41260) 대구광역시 동구 동대구로 465, 대구스케일업허브(DASH) 713호 (신천동 106)</h1>
<h2>대표이사 : 오유나 개인정보책임자 : 이현지<br><br>전화 : (053) 475-2110 팩스 : (0504) 257-5966 이메일 : call@resoft.kr</h2>
</div>
</footer>
<!--네비게이션바 추가메뉴-->
<script>
$(document).ready(function(){
$('.btn').click(function () {
if($('.nvi').hasClass('more'))
$('.nvi').addClass('magictime tinUpOut');
else if($('.nvi').hasClass('close'))
$('.nvi').removeClass('magictime tinUpOut');
});
});
$(document).ready(function(){
$('.btn').click(function(){
if($('.nvi').hasClass('close')){
$('.nvi').addClass('magictime tinUpIn');
$('.nvi').addClass('more').removeClass('close');
}else if($('.nvi').hasClass('more')){
setTimeout(function() { $('.nvi').addClass('close').removeClass('more');}, 1000);
}
});
});
</script>
<!-- 카카오 맵 API -->
<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 = '../img/2page/marker.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);
</script>
<script>
$( document ).ready( function() {
$( '.zo_text' ).click( function() {
$( '.zozic' ).fadeToggle();
} )
} );
</script>
</body>
</html>
*css 미디어쿼리작성
@media screen and (max-width: 1280px){
/* header */
#wrapper{
padding: 10px 232px 5px;
}
.img_wrap img{
right: 75%;
}
.display h1{
left: 43%;
}
/* section1 */
.re_text{
left: 10%;
}
.re_tx, .re_tx2, .re_tx3, .re_tx4, .re_tx5, .re_tx6, .re_tx7{
margin: 0 10% 0 10%;
}
.re_tx h1, .re_tx2 h1, .re_tx3 h1, .re_tx4 h1, .re_tx5 h1, .re_tx6 h1, .re_tx7 h1{
width: 215px;
}
/* section2 */
.yh_text{
left: 11%;
top: 8%;
}
.jul{
left: -188%;
width: 390%;
padding-left: 188%;
}
.title2{
left: -209%;
}
.title3{
left: -99.5%;
}
/* section3 */
#section3{
height: 1500px;
}
.zozic{
top: 16%;
max-width: 613px;
}
.zo_text{
left: 11%;
top: 8%;
}
.zo_tx{
width: 36%;
}
.zo_tx2{
flex-wrap: wrap;
left: 12%;
}
.zo_tx2 li{
margin: 0px auto 25px 0;
}
.zo_tx2::before{
left: 15.2%;
width: 50.4%;
}
.zo_tx2 > li::before{
bottom: 72%;
}
.zo_tx3{
margin: 0px auto 44px;
top: 28%;
}
.zo_tx2 > li:nth-child(3)::before{
background: transparent;
}
.zo_tx2 > li:nth-child(4)::before{
background: transparent;
}
.zo_tx2 > li:nth-child(5)::before{
background: transparent;
}
/* section4 */
.pat_text{
left: 11%;
top: 8%;
}
.pat_img{
width: 95%;
left: -1%;
}
/* section5 */
.map_tx h3{
margin: 20px 10% 45px 7%;
}
.map_tx2 h3{
margin: 20px 10% 65px 8%;
}
/* footer */
.fot_img{
top: 20%;
left: 5%;
}
.fot_text1{
top: 28%;
left: 300px;
}
.fot_text2 h1{
top: 45%;
left: 5%;
}
.fot_text2 h2{
top: 45%;
left: 58%;
}
}
@media screen and (max-width: 768px){
/* header */
header #wrapper nav > ul ul {
padding-left: 0;
left: -16%;
}
.img_wrap img {
left: 5%;
margin: 0;
}
.display h1 {
left: 40%;
}
header #wrapper nav > ul > li > a{
width: 130px;
visibility: hidden;
}
.wrap_tx2{
opacity: 1;
display: block;
}
/* section1 */
.re_text {
left: 4%;
}
.re_tx, .re_tx2, .re_tx3, .re_tx4, .re_tx5, .re_tx6, .re_tx7{
margin: 0px 4% 0 4%;
}
.re_tx5 h2 {
width:63% ;
}
.re_tx6 h2 {
width: 67%;
}
.re_tx7 h2 {
width: 67%;
}
/* section2 */
#yunhyuk{
height:1494px ;
}
.yh_text{
left: 4%;
}
.jul {
left: -254%;
width: 457%;
padding-left: 254%;
}
.title2 {
left: -307%;
}
.title3 {
left: -139.5%;
}
/* section3 */
.zo_text {
left: 4%;
}
.zo_tx2{
left: 9%;
}
.zo_tx2 li{
margin: 0px auto 25px 0;
}
/* section4 */
#section4{
height: 2400px;
}
.pat_text {
left: 4%;
}
.pat_img {
width: 100%;
left: -1%;
top: 14%;
}
.pat_img1{
top: 0;
left: 16%;
}
.pat_img2{
top: 0;
left: 57%;
}
.pat_img3{
top: 35%;
left: 16%;
}
.pat_img4{
top: 35%;
left: 57%;
}
.pat_img5{
top: 70%;
left: 16%;
}
.pat_img6{
top: 70%;
left: 57%;
}
.pat_img7{
top: 107%;
left: 16%;
}
.pat_img8{
top: 107%;
left: 57%;
}
.pat_img9{
top: 144%;
left: 16%;
}
/* section5 */
.map_tx h3 {
margin: 20px 4% 45px 3%;
width: 85px;
}
.map_tx2 h3 {
margin: 20px 4% 65px 4%;
width: 69px;
}
/* footer */
#footer{
height: 331px;
}
.fot_img {
top: 20%;
left: 10%;
}
.fot_text1 {
left: 300px;
}
.fot_text2 h1 {
top: 45%;
left: 10%;
}
.fot_text2 h2 {
top: 75%;
left: 10%;
}
}2)학습내용 중 어려웠던점
X
3)해결방법
X
4)학습소감
2페이지는 1페이지 보다 반응형작업하는게 더힘들었던거같다 여백제거작업이 쫌오래걸려서 폰트크기를 줄이고 사이즈들을 대체로 다줄였던거같다
안녕하세요