39. (TWOK/UTIL) [Web/ProntEnd] 기능 테스트 전용 html 파일

Notice
Recent Posts
Recent Comments
Link
« 2024/12 »
일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31
Tags more
Archives
Today
Total
관리 메뉴
투케이2K

39. (TWOK/UTIL) [Web/ProntEnd] 기능 테스트 전용 html 파일 - html , css , js , jquery 본문

투케이2K 유틸파일
39. (TWOK/UTIL) [Web/ProntEnd] 기능 테스트 전용 html 파일 - html , css , js , jquery

투케이2K 2022. 4. 18. 08:44
[설 명]
프로그램 : Web / ProntEnd
설 명 : 기능 테스트 전용 html 파일 - html , css , js , jquery
[testHtmlProject : 소스 코드]
<!DOCTYPE HTML>
<html lang="ko">
<head>
    <title>WebTest</title>
    <meta http-equiv="Content-Type" content="text/html; 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, minimum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
    




    <!-- [자바 스크립트 및 j쿼리 파일] -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-latest.min.js"></script> 




    <!-- [내부 CSS 스타일 지정] -->
    <style>


        /* [전체 설정 실시] */
    	* {
            font-family : 'Noto Sans KR' , sans-serif;           
            margin : 0;
            padding : 0;
    	}
    	




        /* [html , body 설정] */
        html, body{			
            width : 100%;          
            height : 100%;
            margin : 0 auto;
            padding : 0;
            border : none;         

            /* [모바일 스크롤 시 부드럽게 처리] */
            overflow:scroll-y; 
            -webkit-overflow-scrolling:touch;
        }
        /* [body 스크롤바 메인 스타일 지정] */
        body::-webkit-scrollbar {           
            width: 20px;                 
            background-color: #c1c1c1;
        }
        /* [body 스크롤바 thumb 스타일 지정] */
        body::-webkit-scrollbar-thumb {                 
            background-color: #444444;
        }





        /* [div 공통 스타일 지정 클래스] : [타이틀 영역] : [p 태그 결합] */
        .divTagTitleClass {
            width : 100%;
            height : 15%;
            margin : 0 auto;
            padding : 0;
            border : 1px solid #000;

            float: top;
            position: relative;
            left: 0%;

            /* [p 태그 텍스트 정렬 설정] */
            display: table;
            table-layout: fixed;
        }





        /* [div 공통 스타일 지정 클래스] : [콘텐츠 영역] : [p 태그 결합] */
        .divTagContentHeightLargeClass {
            width : 80%;
            height : 70%;
            margin : 0 auto;
            padding : 0;
            border : 1px solid #000;

            float: top;
            position: relative;
            left: 0%;

            /* [p 태그 텍스트 정렬 설정] */
            display: table;
            table-layout: fixed;
        }

        



        /* [div 공통 스타일 지정 클래스] : [콘텐츠 영역] : [p 태그 결합] */
        .divTagContentHeightMiddleClass {
            width : 80%;
            height : 50%;
            margin : 0 auto;
            padding : 0;
            border : 1px solid #000;

            float: top;
            position: relative;
            left: 0%;

            /* [p 태그 텍스트 정렬 설정] */
            display: table;
            table-layout: fixed;
        }





        /* [div 공통 스타일 지정 클래스] : [콘텐츠 영역] : [p 태그 결합] */
        .divTagContentHeightSmallClass {
            width : 80%;
            height : 20%;
            margin : 0 auto;
            padding : 0;
            border : 1px solid #000;

            float: top;
            position: relative;
            left: 0%;

            /* [p 태그 텍스트 정렬 설정] */
            display: table;
            table-layout: fixed;
        }





        /* [div 공통 스타일 지정 클래스] : [콘텐츠 영역] : [p 태그 결합] */
        .divTagContentWidthFullClass {
            width : 100%;
            height : 20%;
            margin : 0 auto;
            padding : 0;
            border : 1px solid #000;

            float: top;
            position: relative;
            left: 0%;

            /* [p 태그 텍스트 정렬 설정] */
            display: table;
            table-layout: fixed;
        }





        /* [div 공통 스타일 지정 클래스] : [콘텐츠 영역] : [p 태그 결합] */
        .divTagContentWidthLargeClass {
            width : 80%;
            height : 20%;
            margin : 0 auto;
            padding : 0;
            border : 1px solid #000;

            float: top;
            position: relative;
            left: 0%;

            /* [p 태그 텍스트 정렬 설정] */
            display: table;
            table-layout: fixed;
        }

        



        /* [div 공통 스타일 지정 클래스] : [콘텐츠 영역] : [p 태그 결합] */
        .divTagContentWidthMiddleClass {
        	width : 60%;
        	height : 20%;
        	margin : 0 auto;
        	padding : 0;
        	border : 1px solid #000;

            float: top;
            position: relative;
            left: 0%;

            /* [p 태그 텍스트 정렬 설정] */
            display: table;
            table-layout: fixed;
        }





        /* [div 공통 스타일 지정 클래스] : [콘텐츠 영역] : [p 태그 결합] */
        .divTagContentWidthSmallClass {
            width : 40%;
            height : 20%;
            margin : 0 auto;
            padding : 0;
            border : 1px solid #000;

            float: top;
            position: relative;
            left: 0%;

            /* [p 태그 텍스트 정렬 설정] */
            display: table;
            table-layout: fixed;
        }





        /* [p 태그 공통 스타일 지정 클래스] : [콘텐츠 영역] : [div 결합] */
        .pTagContentLargeClass {
            color : #ffffff;
            text-align : center;
            font-size : 150%;
            font-weight : bold;

            /* [div 태그 내에서 텍스트 정렬] */
            display : table-cell;
            vertical-align : middle;
        } 





        /* [p 태그 공통 스타일 지정 클래스] : [콘텐츠 영역] : [div 결합] */
        .pTagContentMiddleClass {
            color : #ffffff;
            text-align : center;
            font-size : 120%;
            font-weight : bold;

            /* [div 태그 내에서 텍스트 정렬] */
            display : table-cell;
            vertical-align : middle;
        }   





        /* [p 태그 공통 스타일 지정 클래스] : [콘텐츠 영역] : [div 결합] */
        .pTagContentSmallClass {
            color : #ffffff;
            text-align : center;
            font-size : 70%;
            font-weight : bold;

            /* [div 태그 내에서 텍스트 정렬] */
            display : table-cell;
            vertical-align : middle;
        } 
        
        
        
        
        
        /* [p 태그 공통 스타일 지정 클래스] : [텍스트 히든 처리] : [div 결합] */
        .pTagHiddenContentLargeClass {
            color : #ffffff;
            text-align : center;
            font-size : 150%;
            font-weight : bold;

            /* [div 태그 내에서 텍스트 정렬] */
            display : table-cell;
            vertical-align : middle;

            /* [p 태그 텍스트 내용 길면 숨김 처리] */
            overflow : hidden;
            text-overflow : ellipsis;
            white-space : nowrap;
        } 





        /* [p 태그 공통 스타일 지정 클래스] : [텍스트 히든 처리] : [div 결합] */
        .pTagHiddenContentMiddleClass {
            color : #ffffff;
            text-align : center;
            font-size : 120%;
            font-weight : bold;

            /* [div 태그 내에서 텍스트 정렬] */
            display : table-cell;
            vertical-align : middle;

            /* [p 태그 텍스트 내용 길면 숨김 처리] */
            overflow : hidden;
            text-overflow : ellipsis;
            white-space : nowrap;
        }   





        /* [p 태그 공통 스타일 지정 클래스] : [텍스트 히든 처리] : [div 결합] */
        .pTagHiddenContentSmallClass {
            color : #ffffff;
            text-align : center;
            font-size : 70%;
            font-weight : bold;

            /* [div 태그 내에서 텍스트 정렬] */
            display : table-cell;
            vertical-align : middle;

            /* [p 태그 텍스트 내용 길면 숨김 처리] */
            overflow : hidden;
            text-overflow : ellipsis;
            white-space : nowrap;   
        }
                     
    </style>
    




    <!-- [내부 자바스크립트 J쿼리 이벤트 지정] -->    
    <script>

        /* [dom 생성 및 이벤트 상시 대기 실시] */
        document.addEventListener("DOMContentLoaded", ready);
        function ready(){
            console.log("");
            console.log("[window ready] : [start]");            
            console.log("");

            // [접속한 모바일 및 브라우저 확인 함수 호출]
            checkPcAndMobile();
        }





        /* [html 최초 로드 및 이벤트 상시 대기 실시] */
        window.onload = function() {
            console.log("");
            console.log("[window onload] : [start]");
            console.log(""); 
        };





        /* [html 화면 사이즈 변경 이벤트 감지] */
        window.onresize = function() {
            console.log("");
            console.log("[window onresize] : [start]");
            console.log(""); 
        };




        /* [브라우저 및 모바일 접속 체크 실시] */
        function checkPcAndMobile(){
            console.log("");
            console.log("[checkPcAndMobile] : [start]");
            console.log("");

            // [운영체제 종류 선언]
            var filterOs = "win16|win32|win64|mac|macintel";

            // [PC 및 모바일 접속 확인 실시]
            if(navigator.platform){
                if(0 > filterOs.indexOf(navigator.platform.toLowerCase())){
                    console.log("");
                    console.log("[checkPcAndMobile] : [platform] : [Mobile]");
                    console.log("");

                    // [모바일 기기 종류 확인 함수 호출]
                    checkMobileDevice();                    
                }
                else {
                    console.log("");
                    console.log("[checkPcAndMobile] : [platform] : [PC]");
                    console.log("");                    

                    // [접속한 브라우저 확인 함수 호출] 
                    checkBrowser();                   
                }                                                   
            }
            else {
                console.log("");
                console.log("[checkPcAndMobile] : [platform] : [none]");
                console.log("");                
                //alert("none");              
            }           
        };





        /* [접속한 브라우저 확인 함수 정의] */
        function checkBrowser() {
            console.log(""); 
            console.log("[checkBrowser] : [start]");
            console.log(""); 

            /* 에이전트를 사용해서 접속한 브라우저 확인 */
            const Agent = navigator.userAgent.toLowerCase();


            /* 접속한 브라우저 확인 실시 */
            if(Agent.indexOf("edg") != -1){
                console.log(""); 
                console.log("[checkBrowser] : [Browser] : [Edge]");
                console.log(""); 
                return;
            }
            if(Agent.indexOf("chrome") != -1){
                console.log(""); 
                console.log("[checkBrowser] : [Browser] : [Chrome]");
                console.log(""); 
                return;
            }
            if(Agent.indexOf("opera") != -1){
                console.log(""); 
                console.log("[checkBrowser] : [Browser] : [Opera]");
                console.log(""); 
                return;
            }
            if(Agent.indexOf("staroffice") != -1){
                console.log(""); 
                console.log("[checkBrowser] : [Browser] : [Star Office]");
                console.log(""); 
                return;
            }
            if(Agent.indexOf("webtv") != -1){
                console.log(""); 
                console.log("[checkBrowser] : [Browser] : [WebTV]");
                console.log(""); 
                return;
            }
            if(Agent.indexOf("beonex") != -1){
                console.log(""); 
                console.log("[checkBrowser] : [Browser] : [Beonex]");
                console.log(""); 
                return;
            }
            if(Agent.indexOf("chimera") != -1){
                console.log(""); 
                console.log("[checkBrowser] : [Browser] : [Chimera]");
                console.log(""); 
                return;
            }
            if(Agent.indexOf("netpositive") != -1){
                console.log(""); 
                console.log("[checkBrowser] : [Browser] : [NetPositive]");
                console.log(""); 
                return;
            }
            if(Agent.indexOf("phoenix") != -1){
                console.log(""); 
                console.log("[checkBrowser] : [Browser] : [Phoenix]");
                console.log(""); 
                return;
            }
            if(Agent.indexOf("firefox") != -1){
                console.log(""); 
                console.log("[checkBrowser] : [Browser] : [Firefox]");
                console.log(""); 
                return;
            }
            if(Agent.indexOf("safari") != -1){
                console.log(""); 
                console.log("[checkBrowser] : [Browser] : [Safari]");
                console.log(""); 
                return;
            }
            if(Agent.indexOf("skipstone") != -1){
                console.log(""); 
                console.log("[checkBrowser] : [Browser] : [SkipStone]");
                console.log(""); 
                return;
            }
            if(Agent.indexOf("netscape") != -1){
                console.log(""); 
                console.log("[checkBrowser] : [Browser] : [Netscape]");
                console.log(""); 
                return;
            }
            if(Agent.indexOf("mozilla/5.0") != -1){
                console.log(""); 
                console.log("[checkBrowser] : [Browser] : [Mozilla]");
                console.log(""); 
                return;
            }
            if (Agent.indexOf("msie") != -1) { 
                let rv = -1; 
                if (navigator.appName == 'Microsoft Internet Explorer') { 
                    let ua = navigator.userAgent; var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})"); 
                if (re.exec(ua) != null) 
                    rv = parseFloat(RegExp.$1); 
                }
                console.log(""); 
                console.log("[checkBrowser] : [Browser] : [Internet Explorer] : " + rv);
                console.log(""); 
                return;
            }                        
        };




        /* [모바일 기기 체크 실시] */
        function checkMobileDevice(){           
            console.log("");
            console.log("[checkMobileDevice] : [start]");
            console.log("");

            // [모바일 기종 종류 선언]
            var mobileArray = new Array();
            mobileArray.push("iPhone");
            mobileArray.push("iPod");
            mobileArray.push("BlackBerry");
            mobileArray.push("Android");
            mobileArray.push("Windows CE");
            mobileArray.push("LG");
            mobileArray.push("MOT");
            mobileArray.push("SAMSUNG");
            mobileArray.push("SonyEricsson");
            mobileArray.push("webOS");
            mobileArray.push("IEMobile");
            mobileArray.push("Opera Mini");

            // [반복문 수행 실시]
            for(var mobile in mobileArray){
                if(navigator.userAgent.match(mobileArray[mobile]) != null){
                    console.log("");
                    console.log("[checkMobileDevice] : " + mobileArray[mobile]);
                    console.log("");

                    //alert(mobileArray[mobile]);
                    break;                  
                }
            }           
        };





        /* [테스트 함수 정의] */
        function testMain(){           
            console.log("");
            console.log("[testMain] : [start]");
            console.log("");
        };


    </script>
</head>



<!-- [body 콘텐츠 작성] -->
<body>


<!-- [1] : 테스트 박스 -->
<div id="container_1_div" class="divTagContentWidthLargeClass" style="background-color: #ff0000; top: 2%;"
    onclick="testMain();">
    <p id="container_1_p" class="pTagContentMiddleClass"> container_1_div </p>
</div>  





<!-- [2] : 테스트 박스 -->
<div id="container_2_div" class="divTagContentWidthLargeClass" style="background-color: #00ff00; top: 4%;"
    onclick="testMain();">
    <p id="container_2_p" class="pTagContentMiddleClass"> container_2_div </p>
</div>





<!-- [3] : 테스트 박스 -->
<div id="container_3_div" class="divTagContentWidthLargeClass" style="background-color: #0000ff; top: 6%;"
    onclick="testMain();">
    <p id="container_3_p" class="pTagContentMiddleClass"> container_3_div </p>
</div>   





<!-- [4] : 테스트 박스 -->
<div id="container_4_div" class="divTagContentWidthLargeClass" style="background-color: #ff00ff; top: 8%;"
    onclick="testMain();">
    <p id="container_4_p" class="pTagContentMiddleClass"> container_4_div </p>
</div>   





<!-- [5] : 테스트 박스 -->
<div id="container_5_div" class="divTagContentWidthLargeClass" style="background-color: #000000; top: 10%;"
    onclick="testMain();">
    <p id="container_5_p" class="pTagContentMiddleClass"> container_5_div </p>
</div> 


</body>


</html>
저작자표시
'투케이2K 유틸파일' 카테고리의 다른 글

41. (TWOK/UTIL) [Android/Java] A_CookieWebview - 쿠키 설정 및 웹뷰 로드 수행 실시 클래스 (0)	2022.05.09
40. (TWOK/UTIL) [Android/Ios] 브로드 캐스트 알림 및 노티피케이션 알림 채널 등록 , 실시간 알림 확인 (0)	2022.04.19
38. (TWOK/UTIL) [Ios/Swift] Ios 초기 앱 설정 방법 - 타겟 버전 , 퍼미션 권한 , 스키마 등록 , 헤더 파일 등록 (0)	2022.04.14
37. (TWOK/UTIL) [Android/Java] Gradle Scripts - 빌드 설정 관리 (0)	2022.04.14
36. (TWOK/UTIL) [Android/Java] values 폴더 - colors.xml , strings.xml , styles.xml (0)	2022.04.14
'투케이2K 유틸파일' Related Articles
Comments
투케이2K

39. (TWOK/UTIL) [Web/ProntEnd] 기능 테스트 전용 html 파일 - html , css , js , jquery 본문

39. (TWOK/UTIL) [Web/ProntEnd] 기능 테스트 전용 html 파일 - html , css , js , jquery

'투케이2K 유틸파일' 카테고리의 다른 글

티스토리툴바
