1. 마크업 기본 구조 템플릿 - 공통
<![CDATA[
<!DOCTYPE html>
<html lang="ko">
<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, maximum-scale=1.0, user-scalable=no">
<title>화면번호</title>
<link rel="stylesheet" href="../../css/swiper-bundle.min.css">
<link rel="stylesheet" href="../../css/mobiscroll.jquery.min.css">
<link rel="stylesheet" href="../../css/semoR_base.css">
<link rel="stylesheet" href="../../css/semoR_common.css">
<link rel="stylesheet" href="../../css/semoR_style.css">
<link rel="stylesheet" href="../../css/semoR_rept.css">
<script src="../../js/jquery-3.5.1.min.js"></script>
<script src="../../js/jquery-ui.min.js"></script>
<script src="../../js/swiper-bundle.min.js"></script>
<script src="../../js/mobiscroll.jquery.min.js"></script>
<script src="../../js/semoR_ui.js"></script>
<script>
$(document).ready(function () {
popCenter(this); //센터팝업 호출
slidePop(this); //슬라이드팝업 호출
});
</script>
</head>
<body>
<!-- wrapper -->
<div class="wrapper">
<!-- header -->
<div class="header">
<h1 class="subTit">본문제목</h1>
<ul class="topMenu">
<li class="left">
<a class="btnBack" href="javascript:;" role="button"><span class="blind">뒤로가기</span></a>
</li>
<li class="right">
<!-- 아이콘버튼 (semoR_base.css 123번째줄부터 참고) -->
</li>
</ul>
</div>
<!-- //header -->
<!-- container -->
<div class="container">
<!-- 컨텐츠 영역 -->
<!-- //컨텐츠 영역 -->
<!-- fixed button -->
<div class="areaBtmFixed">
<div class="areaBodyBtn">
<button type="button" class="btnPointBg pointBgColor">기본케이스</button>
</div>
</div>
<!-- //fixed button -->
</div>
<!-- //container -->
</div>
<!-- //wrapper -->
</body>
</html>
]]>
2. 마크업 기본 구조 템플릿 - rept 보고서
<![CDATA[
<!DOCTYPE html>
<html lang="ko">
<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, maximum-scale=1.0, user-scalable=no">
<title>vwmr_rept_501</title>
<link rel="stylesheet" href="../../css/swiper-bundle.min.css">
<link rel="stylesheet" href="../../css/semoR_base.css">
<link rel="stylesheet" href="../../css/semoR_common.css">
<link rel="stylesheet" href="../../css/semoR_style.css">
<link rel="stylesheet" href="../../css/semoR_rept.css">
<script src="../../js/jquery-3.5.1.min.js"></script>
<script src="../../js/jquery-ui.min.js"></script>
<script src="../../js/swiper-bundle.min.js"></script>
<script src="../../js/chart-3.5.1.min.js"></script>
<script src="../../js/semoR_ui.js"></script>
</head>
<body>
<!-- wrapper -->
<div class="wrapper">
<!-- header -->
<div class="header">
<ul class="topMenu">
<li class="left">
<a class="btnBack" href="javascript:;" role="button"><span class="blind">뒤로가기</span></a>
</li>
<li class="right">
<a class="btnChat" href="javascript:;" role="button"><span class="blind">채팅</span></a>
<a class="btnShare" href="javascript:;" role="button"><span class="blind">공유</span></a>
</li>
</ul>
</div>
<!-- //header -->
<!-- container -->
<div class="container">
<div class="busiReptWrap">
<!-- 샘플일때 - 실보고서 일땐 부모요소인 .areaTopFixed 삭제 -->
<div class="areaTopFixed">
<div class="titArea">
<div class="areaReptLogo">
<img src="../../img/ico_smartTax_v2.png" alt="보고서 로고">
</div>
</div>
</div>
<!-- 보고서 상단공통 -->
<div class="reptMsgWrap">
<h2 class="defTit"><!--보고서명--></h2>
<ul class="reportMsgList">
<li class="pdt0">
<div class="busiInfoWrap">
<ul class="listDot type03 mgb0">
<li>
<p class="tit">사업장명</p>
<div class="areaData">
<span class="data"><!--사업장명--></span>
</div>
</li>
<li>
<p class="tit">과세유형</p>
<div class="areaData">
<span class="data"><!--과세유형--></span>
</div>
</li>
<li>
<p class="tit">귀속 기간</p>
<div class="areaData">
<span class="data"><!--귀속기간--></span>
</div>
</li>
</ul>
</div>
</li>
<li>
<p class="defTxt">
텍스트 영역
</p>
</li>
<li>
<div class="infoArea">
<div class="rCont">
<a href="javascript:;" class="moveLink chat">
<span class="pointColor06">채팅 문의하기</span>
<div class="rCont">
<img class="tsRight" src="../../img/ico_ts_right_gray.png" alt="오른쪽화살표">
</div>
</a>
</div>
</div>
</li>
</ul>
</div>
<!-- //보고서 상단공통 -->
<!-- **************************************************
컨텐츠 영역 ( 보고서별 상이 )
//************************************************** -->
<!-- 보고서 공통 footer -->
<footer class="includeFooter">
<!-- 응원 -->
<div class="cheeringWrap">
<div class="roundBoxWrap type02">
<div class="roundBox">
<strong class="tit">xxx 사장님</strong>
<p class="defTxt02">
좋은 하루 되세요!<br>
작은 응원은 힘이 됩니다 ^^
</p>
<div class="cheerBox">
<ul class="cheerList">
<li>
<a href="javascript:;">
<img src="../../img/ico_cheer01.png" alt="">
<p class="defTxt02">훌륭해요</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="../../img/ico_cheer02.png" alt="">
<p class="defTxt02">감사해요</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="../../img/ico_cheer03.png" alt="">
<p class="defTxt02">좋아요</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="../../img/ico_cheer04.png" alt="">
<p class="defTxt02">아쉬워요</p>
</a>
</li>
<li>
<a href="javascript:;">
<img src="../../img/ico_cheer05.png" alt="">
<p class="defTxt02">별로에요</p>
</a>
</li>
</ul>
<div class="areaLike">
<span class="defTxt02">999+명이 좋아해요</span>
<div class="areaBodyBtn">
<button type="button" class="btnPointBd">
<img src="../../img/ico_cheer01.png" alt="">
<span>좋아요</span>
</button>
<button type="button" class="btnBdGray">의견 보내기</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- //응원 -->
<ul class="reportMsgList">
<li>
<div class="areaStateMsg">
<span class="defTxt02">읽음 : 22.09.06 13:55</span>
</div>
</li>
</ul>
<hr class="grayLine02 mgt15">
<div class="infoRept">
<h4 class="defTit">안내사항</h4>
<p class="defTxt02"> <!-- 사업분석보고서 상권탭은 아래 내용과 상이 -->
모든 보고서는 사장님의 신고 데이터를 기반으로 작성되며, 홈택스
정보에 따라 실제와 오차가 발생할 수 있어 사장님의 사업관리를 위한
참고 자료로 활용해주세요.
</p>
</div>
<!-- 하단 플로팅버튼 -->
<div class="areaFloatingBtn btnTop">
<a href="javascript:;" role="button">
<img src="../../img/ico_ts_up.png" width="9px" alt="">
<p>TOP</p>
</a>
</div>
<!-- //하단 플로팅버튼 -->
</footer>
<!-- //보고서 공통 footer -->
</div>
</div>
<!-- //container -->
</div>
<!-- //wrapper -->
<script>
$(function () {
// 상단 탑버튼 함수
funcGoToTop();
})
</script>
</body>
</html>
]]>