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="../index.html">
<img src="../img/common/logo_resoft.png" alt="메인로고">
</a>
<div id="wrapper">
<nav>
<ul id="wrap_text">
<li class="wrap_tx1"><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">
<div class="img_box"><h1>회사소개</h1></div>
</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/certificate2.jpg"></div>
<div class="pat_img2"><img src="../img/2page/certificate.png"></div>
<div class="pat_img3"><img src="../img/2page/certificate2.jpg"></div>
<div class="pat_img4"><img src="../img/2page/certificate2.jpg"></div>
<div class="pat_img5"><img src="../img/2page/certificate2.jpg"></div>
<div class="pat_img6"><img src="../img/2page/certificate2.jpg"></div>
<div class="pat_img7"><img src="../img/2page/certificate2.jpg"></div>
<div class="pat_img8"><img src="../img/2page/certificate2.jpg"></div>
<div class="pat_img9"><img src="../img/2page/certificate2.jpg"></div>
</section>
<!-- section5 -->
<section id="section5">
<div class="map_text">
<h1>오시는 길</h1><br>
<h2>DIRECTIONS</h2>
</div>
<div id="map" style="width: 72%;;height:50%;top: 19%; left: -1%;; 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(){
const $nvi = $('.nvi');
const $btn = $('.btn');
$btn .click(function () {
if($nvi.hasClass('more'))
$nvi.addClass('magictime tinUpOut');
else if($nvi.hasClass('close'))
$nvi.removeClass('magictime tinUpOut');
});
$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);
}
});
// 조직도 클릭시 애니메이션
$( '.zo_text' ).click( function() {
$( '.zozic' ).fadeToggle();
})
});
// 카카오 맵 API
// 카카오 지도 api
const container = document.getElementById('map'); //지도를 담을 영역의 DOM 레퍼런스
const options = { //지도를 생성할 때 필요한 기본 옵션
center: new kakao.maps.LatLng(35.871691843254716, 128.62496478375644), //지도의 중심좌표.
level: 3 //지도의 레벨(확대, 축소 정도)
};
const map = new kakao.maps.Map(container, options); //지도 생성 및 객체 리턴
// 마커가 표시될 위치입니다
const markerPosition = new kakao.maps.LatLng(35.871691843254716, 128.62496478375644);// 마커가 표시될 위치입니다
const imageSrc = '../img/2page/marker.png', // 마커이미지의 주소입니다
imageSize = new kakao.maps.Size(220, 45), // 마커이미지의 크기입니다
imageOption = {
offset: new kakao.maps.Point(27, 69)
}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
// 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
const markerImage = new kakao.maps.MarkerImage(imageSrc, imageSize, imageOption);
// 마커를 생성합니다
const marker = new kakao.maps.Marker({
position: markerPosition,
image: markerImage
});
// 마커가 지도 위에 표시되도록 설정합니다
marker.setMap(map);
</script>
</body>
</html>*css 수정
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
* {
box-sizing: border-box;
text-decoration: none;
}
html {
scroll-behavior: smooth;
}
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, table, caption, tbody, tfoot, thead, tr, th, td, article,
aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav,
output, ruby, section, summary, time, mark, audio, video {
margin: 0 auto;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
div {
display: block;
}
body {
width: 100%;
max-width: 100%;
line-height: 1;
font-family: 'Noto Sans KR', sans-serif;
}
/* header */
.header{
width: 100%;
position: relative;
}
.navi{
position: fixed;
background-color: #FFFFFF;
z-index: 1;
width: 100%;
height: 80px;
border-bottom: 1px solid black;
}
#wrap_text {
position: fixed;
text-align: end;
right: 21%;
font-weight: 700;
}
#wrap_text a:hover{
color: #184B9F;
}
#wrapper>nav>#wrap_text>.wrap_tx1>.wrap_tx{
color: #184B9F;
}
.wrap_tx1::after {
position: absolute;
content:"";
display: block;
border-bottom: 6px solid #184B9F;
border-radius: 50px;
bottom: 15%;
left: 22%;
width: 57%;
}
.wrap_tx::after {
position: absolute;
content:"";
display: block;
border-bottom: 6px solid #184B9F;
border-radius: 50px;
transition: width 500ms ease-in-out;
bottom: 15%;
left: 22%;
width: 0;
}
.wrap_tx:hover::after {
width: 57%;
}
#wrapper {
position: relative;
left: 0;
top: 0;
padding: 10px 232px 5px;
width: 100%;
box-sizing: border-box;
border-bottom: 1px solid white;
z-index: 10;
background-color: #FFFFFF;
}
.btn{
cursor: pointer;
}
header #wrapper nav > ul > li > a {
display: block;
position: relative;
width: 130px;
height: 70px;
font-size: 20px;
color: black;
line-height: 63px;
top: 0px;
z-index: 10;
text-align: center;
}
#wrapper > nav + div {
position: absolute;
left: 0;
top: 81px;
width: 100%;
height: 200px;
background: rgba(24, 75, 159, .7);
transition: all 0.5s;
z-index: -1;
}
header #wrapper nav > ul >li {
display: inline-block;
position: relative;
}
header #wrapper nav > ul ul li {
line-height: 25px;
padding-left: 0px;
width: 101px;
}
header #wrapper nav > ul ul a {
font-size: 20px;
color: white;
z-index: 10;
}
header #wrapper nav > ul ul {
padding-top: 15px;
position: absolute;
width: 100%;
text-align: left;
height: 230px;
transition: all 0.5s;
padding-left: 26px;
}
header #wrapper nav > ul ul>.wrap_tx2 a{
font-size: 20px;
color: #ffffff;
}
header #wrapper nav > ul ul> .wrap_tx2 {
line-height:25px ;
padding-bottom: 15px;
}
.wrap_tx2 {
opacity: 0;
display: none;
}
.img_wrap img{
position: fixed;
width: 133px;
height: 30px;
}
header >a {
position: fixed;
display: flex;
right: 15%;
top: 25px;
width: 50px;
z-index: 100;
}
.wrap_tx{
position: absolute;
}
header .img_wrap {
position: absolute;
left: 30px;
top: 25px;
z-index: 100;
margin-left: 17.5%;
height: 30px;
}
.display{
top: 80px;
background-size: 100%100%;
background-image: url(../img/common/header_company.png);
filter: opacity(0.8) drop-shadow(0 0 0 rgb(0, 0, 0));
position: relative;
background-position: top;
}
.img_box{
display: flex;
justify-content: center;
align-items: center;
height: 300px;
}
.display>.img_box h1{
position: absolute;
font-size: 40px;
color: #FFFFFF;
}
.close{
opacity: 0;
display: none;
}
.more{
opacity: 1;
}
/* section1 */
#resoft{
position: relative;
width: 100%;
height: 856px;
}
.re_text{
position: absolute;
left: 12%;
top: 13%;
}
.re_text h1{
font-size: 40px;
}
.re_text h2{
font-size: 18px;
color: #C8C8C8;
}
.re_text2{
position: absolute;
width: 97%;
right: 5%;
height: 500px;
top: 30%;
}
.re_text2 h1{
font-size: 24px;
}
.re_text2 h2{
font-size: 20px;
color: #959595;
}
.re_tx,.re_tx2,.re_tx3,.re_tx4,.re_tx5,.re_tx6,.re_tx7{
display: flex;
border-top: 2px solid #C8C8C8;
margin: 0 10% 0 15%;
padding: 22px;
left: 10%;
}
.re_tx h1,.re_tx2 h1,.re_tx3 h1,.re_tx4 h1,.re_tx5 h1,.re_tx6 h1,.re_tx7 h1{
margin: 0;
width: 230px;
}
.re_tx7{
border-bottom: 2px solid #C8C8C8;
}
.re_tx h2{margin: 0;font-weight: 400;}
.re_tx2 h2{margin:0;font-weight: 400;}
.re_tx3 h2{margin: 0;font-weight: 400;}
.re_tx4 h2{margin: 0;font-weight: 400;}
.re_tx5 h2{margin: 0;font-weight: 400;}
.re_tx6 h2{margin: 0;font-weight: 400;}
.re_tx7 h2{margin: 0;font-weight: 400;}
/* section2 */
#yunhyuk{
width: 100%;
height: 1400px;
position: relative;
background-color: #F9F9F9;
}
.yh_text{
position: absolute;
left: 12%;
top: 8%;
}
.yh_text h1{
font-size: 40px;
}
.yh_text h2{
font-size: 18px;
color: #C8C8C8;
}
.yh{
display: flex;
justify-content: center;
}
.timeline {
position: absolute;
margin: 20px auto;
padding: 20px;
top: 16%;
right: 34%;
width: 25%;
}
.outer {
border-left: 6px solid #C8C8C8;
}
.card {
position: relative;
margin: 0 0 20px 20px;
color: #1E1E1E;
font-weight:bold;
}
.jul{
position: relative;
border-top: 1px solid #C8C8C8;
padding-top: 40px;
width: 279%;
padding-left: 90%;
left: -90%;
}
.info >p{
font-size: 20px;
padding: 20px 0 55px 0;
font-weight: 400;
}
.info1 >p{
font-size: 20px;
font-weight: 400;
}
.title {
color: #184B9F;
position: absolute;
left: -110px;
font-size: 32px;
top: -12px;
}
.title::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
background: #184B9F;
border-radius: 999px;
left:79px;
top: 11px;
border: 3px solid #184B9F;
}
.title2{
position: absolute;
font-size: 50px;
color: #000000;
left: -100%;
top: -5%;
}
.title3{
position: absolute;
font-size: 50px;
color: #000000;
left: -51.5%;
top: -5%;
}
.card1 {
position: relative;
margin: 0 0 20px 20px;
color: #1E1E1E;
font-weight:bold;
}
.title4 {
color: #184B9F;
position: absolute;
left: -104px;
font-size: 32px;
top: -24px;
}
.title4::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
background: #184B9F;
border-radius: 999px;
left:79px;
top: 4px;
border: 3px solid #184B9F;
}
/* section3 */
#section3{
position: relative;
width: 100%;
height: 906px;
}
.zo_text{
position: absolute;
left: 12%;
top: 10%;
cursor: pointer;
}
.zo_text:hover{
color: #184B9F;
}
.zo_text h1{
font-size: 40px;
}
.zo_text h2{
font-size: 18px;
color: #C8C8C8;
}
.zozic {
top: 24%;
right: 2%;
max-width: 78%;
min-width: 1038px;
padding: 0 10px;
margin: 0 auto;
position: relative;
}
.zozic h1{
color: #FFFFFF;
font-size: 26px;
padding: 30px;
}
.zozic h2{
font-size: 26px;
padding: 30px;
}
.zozic h3{
font-size: 26px;
font-weight: 500;
}
.rectangle {
position: relative;
padding: 20px;
}
.zo_tx {
text-align: center;
width: 15%;
margin: 0 auto 40px;
background: #184B9F;
border-radius: 20px;
min-width: 177px;
}
.zo_tx::before {
content: "";
position: absolute;
top: 100%;
left: 49.7%;
transform: translateX(-50%);
width: 2px;
height: 70px;
background: #9E9E9E;
}
.zo_tx2 {
position: relative;
display: flex;
}
.zo_tx2::before {
content: "";
position: absolute;
top: 28px;
left: 9.4%;
width: 80.5%;
height: 2px;
background: #9E9E9E;
}
.zo_tx2::after {
display: none;
content: "";
position: absolute;
left: -20px;
bottom: -20px;
width: calc(100% + 20px);
height: 2px;
background: #9E9E9E;
}
.zo_tx2 li {
position: relative;
}
.zo_tx2 > li::before {
content: "";
position: absolute;
bottom: 72%;
left: 46.2%;
transform: translateX(-50%);
width: 2px;
height: 70px;
background: #9E9E9E;
}
.zo_tx3 {
text-align: center;
width: 102%;
top: 28%;
left: -5%;
margin: 0 auto 70px;
border-radius: 20px;
border: 3px solid #184B9F;
}
.zo_tx4 {
position: relative;
top: 25%;
margin: 0 auto;
}
.zo_tx5{
text-align: left;
}
/* section4 */
#section4{
position: relative;
width: 100%;
height: 1454px;
background-color: #F9F9F9;
}
.pat_text{
position: absolute;
left: 12%;
top: 10%;
}
.pat_text h1{
font-size: 40px;
}
.pat_text h2{
font-size: 18px;
color: #C8C8C8;
}
.pat_img{
position: relative;
display: flex;
flex-wrap: wrap;
left: 9%;
top: 20%;
width: calc(100%/1.5);
height: 1150px;
}
.pat_img1{
max-width: 220px;
max-height: 310px;
overflow: hidden;
border: 1px solid #184B9F;
position: absolute;
left: 10%;
top: 0;
}
.pat_img1 img{
max-width: initial;
margin-left: 0%;
margin-top: -9px;
width: 220px;
}
.pat_img2{
max-width: 220px;
max-height: 310px;
overflow: hidden;
border: 1px solid #184B9F;
position: absolute;
left: 40%;
top: 0;
}
.pat_img2 img{
max-width: initial;
margin-left: -44%;
margin-top: -43px;
}
.pat_img3{
max-width: 220px;
max-height: 310px;
overflow: hidden;
border: 1px solid #184B9F;
position: absolute;
left: 69%;
top: 0;
}
.pat_img3 img{
max-width: initial;
margin-left: 0%;
margin-top: -9px;
width: 220px;
}
.pat_img4{
max-width: 220px;
max-height: 310px;
overflow: hidden;
border: 1px solid #184B9F;
position: absolute;
left: 10%;
top: 35%;
}
.pat_img4 img{
max-width: initial;
margin-left: 0%;
margin-top: -9px;
width: 220px;
}
.pat_img5{
max-width: 220px;
max-height: 310px;
overflow: hidden;
border: 1px solid #184B9F;
position: absolute;
left: 40%;
top: 35%;
}
.pat_img5 img{
max-width: initial;
margin-left: 0%;
margin-top: -9px;
width: 220px;
}
.pat_img6{
max-width: 220px;
max-height: 310px;
overflow: hidden;
border: 1px solid #184B9F;
position: absolute;
left: 69%;
top: 35%;
}
.pat_img6 img{
max-width: initial;
margin-left: 0%;
margin-top: -9px;
width: 220px;
}
.pat_img7{
max-width: 220px;
max-height: 310px;
overflow: hidden;
border: 1px solid #184B9F;
position: absolute;
left: 10%;
top: 70%;
}
.pat_img7 img{
max-width: initial;
margin-left: 0%;
margin-top: -9px;
width: 220px;
}
.pat_img8{
max-width: 220px;
max-height: 310px;
overflow: hidden;
border: 1px solid #184B9F;
position: absolute;
left: 40%;
top: 70%;
}
.pat_img8 img{
max-width: initial;
margin-left: 0%;
margin-top: -9px;
width: 220px;
}
.pat_img9{
max-width: 220px;
max-height: 310px;
overflow: hidden;
border: 1px solid #184B9F;
position: absolute;
left: 69%;
top: 70%;
}
.pat_img9 img{
max-width: initial;
margin-left: 0%;
margin-top: -9px;
width: 220px;
}
/* section5 */
.map_tx{
position: absolute;
display: flex;
left: 13%;
top: 70%;
width: 72%;
border-bottom: 2px solid #C8C8C8;
}
.map_tx h3{
font-size: 24px;
margin: 20px 10% 45px 21%;
}
.map_tx h4{
font-size: 20px;
color: #959595;
margin: 20px 0 45px 0;
font-weight: 400;
}
.map_tx2{
position: absolute;
display: flex;
left: 13%;
top: 79%;
width: 72%;
border-bottom: 5px solid #C8C8C8;
}
.map_tx2 h3{
font-size: 24px;
margin: 20px 10% 40px 21.5%;
}
.map_tx2 h4{
font-size: 20px;
color: #959595;
margin: 20px 0px 40px 10px;
font-weight: 400;
}
#section5{
position: relative;
width: 100%;
height: 1344px;
}
.map_text{
position: absolute;
left: 13%;
top: 9%;
}
.map_text h1{
font-size: 40px;
}
.map_text h2{
font-size: 18px;
color: #C8C8C8;
}
/* footer */
#footer{
width: 100%;
height: 250px;
background-color: #E9E9E9;
position: relative;
}
.fot_img{
top: 50px;
left: 240px;
width: 200px;
height: 45px;
position: absolute;
}
.fot_text1{
color: #9E9E9E;
font-size: 16px;
position: absolute;
text-align: left;
top: 71px;
left: 460px;
}
.fot_text1 h1{
font-weight: 300;
}
.fot_text2 h1{
color: #9E9E9E;
font-size: 16px;
position: absolute;
text-align: left;
top: 125px;
left: 240px;
font-weight: 300;
}
.fot_text2 h2{
color: #9E9E9E;
font-size: 16px;
position: absolute;
text-align: left;
top: 125px;
left: 1000px;
font-weight: 300;
}
@media screen and (max-width: 1920px){
.display{
background-size: auto;
}
}
@media screen and (max-width: 1280px){
/* header */
#wrapper{
padding: 10px 232px 5px;
}
.img_box{
width: 100%;
}
.img_wrap img{
right: 75%;
}
.display{
background-image: url(../img/common/header_company1@2x.png);
background-position: 48% 463px;
}
/* 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: 495%;
padding-left: 188%;
}
.timeline{
top: 15%;
right: 41%;
width: 20%;
min-width: 175px;
}
.title2{
left: -214%;
}
.title3{
left: -64.5%;
}
/* section3 */
#section3{
height: 1500px;
}
.zozic{
top: 16%;
max-width: 613px;
min-width: 0;
}
.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: 994px){
#yunhyuk{
height: 1550px;
}
}
@media screen and (max-width: 790px){
.timeline{
left: 33%;
}
}
@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{
background-image: url(../img/common/header_company1.png);
background-position: center;
}
header #wrapper nav > ul > li > a{
width: 130px;
visibility: hidden;
}
.wrap_tx2{
opacity: 1;
display: block;
}
header >a{
right: 3%;
}
.wrap_tx1::after{
width:0;
}
header #wrapper nav > ul ul>.wrap_tx2::after{
position: absolute;
content:"";
display: block;
border-bottom: 1px solid #FFFFFF;
width: 1000%;
left: -341%;
bottom: 78%;
}
/* 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: 1650px;
}
.yh_text{
left: 4%;
}
.jul {
left: -254%;
width: 457%;
padding-left: 254%;
}
.title2 {
left: -307%;
}
.title3 {
left: -139.5%;
}
.timeline{
width: 25%;
left: 49%;
top: 14%;
}
/* 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{
width: 89%;
}
.map_tx{
width: 90%;
left: 4%
}
.map_tx2{
width: 90%;
left: 4%
}
.map_tx h3 {
margin: 20px 4% 45px 3%;
width: 90px;
}
.map_tx h4{
width: 395px;
}
.map_tx2 h3 {
margin: 20px 4% 65px 4%;
width: 74px;
}
/* footer */
#footer{
height: 331px;
}
.fot_img {
top: 15%;
left: 5%;
}
.fot_text1 {
left: 260px;
top: 20%;
}
.fot_text2 h1 {
top: 38%;
left: 5%;
}
.fot_text2 h2 {
top: 75%;
left: 5%;
}
}
@media screen and (max-width: 685px){
.zozic h1{
padding: 25px;
font-size: 20px;
left: -2%;
}
.zo_tx{
min-width: 120px;
width: 30%;
}
.zo_tx2 {
width: 76%;
left: 6%;
min-width: 314px;
}
.zozic h2{
font-size: 20px;
padding: 21px;
}
.zozic h3{
font-size: 20px;
}
.zo_tx::before{
height: 50px;
}
.zo_tx2::before{
top: 9px;
}
.zo_tx2 > li::before{
height: 50px;
bottom: 79%;
}
.zo_tx3 {
margin: 0px auto 25px;
top: 21%
}
}
@media screen and (max-width: 610px){
/* 연혁 */
#yunhyuk {
height: 1600px;
}
.timeline{
top:13%;
left: 48%;
width: 26%;
min-width: 135px;
}
.jul{
padding-top: 77px;
}
.title{
font-size: 20px;
top: 0px;
}
.title::after{
top: -4px;
}
.title2{
font-size: 28px;
left: -318%;
}
.title3{
font-size: 28px;
}
.info >p{
font-size: 15px;
}
.title4{
font-size: 20px;
}
.info1 >p{
font-size: 15px;
}
/* 조직도 */
.zozic h1{
padding: 25px;
font-size: 13px;
left: -2%;
}
.zo_tx{
min-width: 140px;
}
.zo_tx2 {
width: 50%;
left: 4%;
min-width: 314px;
}
.zozic h2{
font-size: 13px;
padding: 21px;
}
.zozic h3{
font-size: 13px;
}
.zo_tx::before{
height: 50px;
}
.zo_tx2::before{
top: 9px;
}
.zo_tx2 > li::before{
height: 50px;
bottom: 75%;
}
.zo_tx3 {
margin: 0px auto 25px;
top: 25%;
}
}
@media screen and (max-width: 532px){
#wrap_text{
right: 0%;
}
}
@media screen and (max-width: 516px){
.pat_img1{
left: 4%;
}
.pat_img2{
left: 51%;
}
.pat_img3{
left: 4%;
}
.pat_img4{
left: 51%;
}
.pat_img5{
left: 4%;
}
.pat_img6{
left: 51%;
}
.pat_img7{
left: 4%;
}
.pat_img8{
left: 51%;
}
.pat_img9{
left: 4%;
}
}
@media screen and (max-width: 482px){
#resoft{
height: 1000px;
}
}
@media screen and (max-width: 430px){
/* HEADER */
header #wrapper nav > ul ul {
padding-top: 0;
}
header #wrapper nav > ul ul>.wrap_tx2 a {
font-size: 20px;
}
#wrapper > nav + div {
height: 190px;
top: 78px;
}
header #wrapper nav > ul ul a{
font-size: 12px;
}
header #wrapper nav > ul > li > a{
font-size: 15px;
width: 80px;
}
.display h1{
font-size: 30px;
left: 36%;
}
header #wrapper nav > ul ul>.wrap_tx2::after{
bottom: 84%;
}
#wrap_text {
right: 10%;
}
/* section1 */
#resoft{
height: 700px;
}
.re_text h1{
font-size: 20px;
}
.re_text h2{
font-size: 9px;
}
.re_tx h1, .re_tx2 h1, .re_tx3 h1, .re_tx4 h1, .re_tx5 h1, .re_tx6 h1, .re_tx7 h1{
font-size: 14px;
width: 114px;
}
.re_text2 h2{
font-size: 10px;
}
.re_text2{
top: 24%;
}
/* section2 */
#yunhyuk {
height: 1200px;
}
.yh_text{
top: 4%;
}
.yh_text h1{
font-size: 20px;
}
.yh_text h2{
font-size: 9px;
}
.timeline{
top: 9%;
left: 48%;
width: 32%;
min-width: 120px;
}
.jul{
padding-top: 77px;
}
.title{
font-size: 16px;
top: 0px;
}
.title::after{
top: -4px;
}
.title2{
font-size: 25px;
left: -325%;
}
.title3{
font-size: 25px;
}
.info >p{
font-size: 11px;
}
.title4{
font-size: 16px;
}
.info1 >p{
font-size: 11px;
}
/* section3 */
#section3 {
height: 1100px;
}
.zo_text {
top: 4%;
}
.zo_text h1 {
font-size: 20px;
}
.zo_text h2 {
font-size: 9px;
}
.zozic {
top: 10%;
}
.zozic h1{
padding: 25px;
font-size: 13px;
left: -2%;
}
.zo_tx{
min-width: 140px;
}
.zo_tx2 {
width: 76%;
left: 6%;
min-width: 314px;
}
.zozic h2{
font-size: 13px;
padding: 21px;
}
.zozic h3{
font-size: 13px;
}
.zo_tx::before{
height: 50px;
}
.zo_tx2::before{
top: 9px;
}
.zo_tx2 > li::before{
height: 50px;
bottom: 75%;
}
.zo_tx3 {
margin: 0px auto 25px;
top: 25%;
}
/* section4 */
#section4 {
height: 1863px;
}
.pat_text{
top: 4%;
}
.pat_text h1 {
font-size: 20px;
}
.pat_text h2 {
font-size: 9px;
}
.pat_img{
top: 9%;
}
.pat_img1{
max-width: 150px;
max-height: 220px;
left: 5%;
}
.pat_img1 img{
width: 152px;
}
.pat_img2{
max-width: 150px;
max-height: 220px;
}
.pat_img2 img{
width: 275px;
margin-left: -41%;
margin-top: -30px;
}
.pat_img3{
max-width: 150px;
max-height: 220px;
top: 29%;
left: 5%;
}
.pat_img3 img{
width: 152px;
}
.pat_img4{
max-width: 150px;
max-height: 220px;
top: 29%
}
.pat_img4 img{
width: 152px;
}
.pat_img5{
max-width: 150px;
max-height: 220px;
top: 59%;
left: 5%;
}
.pat_img5 img{
width: 152px;
}
.pat_img6{
max-width: 150px;
max-height: 220px;
top: 59%;
}
.pat_img6 img{
width: 152px;
}
.pat_img7{
max-width: 150px;
max-height: 220px;
top: 90%;
left: 5%;
}
.pat_img7 img{
width: 152px;
}
.pat_img8{
max-width: 150px;
max-height: 220px;
top: 90%;
}
.pat_img8 img{
width: 152px;
}
.pat_img9{
max-width: 150px;
max-height: 220px;
top: 119%;
left: 5%;
}
.pat_img9 img{
width: 152px;
}
/* section5 */
#section5 {
height: 800px;
}
.map_text{
top: 4%;
}
.map_text h1 {
font-size: 20px;
}
.map_text h2 {
font-size: 9px;
}
.map_tx h3{
font-size: 12px;
}
.map_tx h4{
font-size: 10px;
}
.map_tx2 h3{
font-size: 12px;
margin: 20px 4% 40px 4%;
}
.map_tx2 h4{
font-size: 10px;
margin: 20px 0px 40px 10px;
}
/* footer */
.fot_img {
top: 9%;
left: 5%;
}
.fot_img img{
width: 150px;
}
.fot_text1 {
left: 5%;
top: 25%;
font-size: 11px;
}
.fot_text2 h1 {
top: 41%;
left: 5%;
font-size: 11px;
}
.fot_text2 h2 {
top: 70%;
left: 5%;
font-size: 11px;
}
}2)학습내용 중 어려웠던점
X
3)해결방법
X
4)학습소감
프로젝트는 끝났지만 수정해보고싶은 곳이 있어서 간단하게 수정작업을 하였다.
안녕하세요