웹 퍼블리싱/HTML & CSS 지식

기본 템플릿

꼬지비 2020. 9. 8. 18:29
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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
    <!-- favicon -->
    <link rel="shortcut icon" type="image/png" href="../image/common/favicon_32.png">
    <link rel="apple-touch-icon" type="image/png" href="../image/common/favicon_72.png">
 
    <link rel="stylesheet" href="../css/swiper.min.css">
    <script src="../assets/jquery.min.js"></script>
  <title>Default Template</title>
    <style>
        @font-face {
      font-family: 'nbg';
      font-style: normal;
    font-weight: 200;
    src: url(../font/NanumBarunGothicUltraLight.eot);
    src: local('Nanum Barun Gothic UltraLight'),
       local('NanumBarunGothicUltraLight'),
       url(../font/NanumBarunGothicUltraLight.eot?#iefix) format('embedded-opentype'),
       url(../font/NanumBarunGothicUltraLight.woff2) format('woff2'),
       url(../font/NanumBarunGothicUltraLight.woff) format('woff'),
       url(../font/NanumBarunGothicUltraLight.ttf) format('truetype');
    }
    /* reset */
    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, input,
    article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video,fieldset {
    margin    : 0;
    padding    : 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    outline:0;
    line-height:auto;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {display: block;}
    a { text-decoration:none; color:inherit; }
    ul,li,ol,dl,dt,dd{ list-style:none;}
    table {    border-collapse: collapse; border-spacing: 0;}
    table th, table td{ vertical-align:middle; }
    table tbody{text-align:center;}
    button { background:transparent; border:0; outline:0; padding:0; margin:0; cursor:pointer; }
    img{width:100%;vertical-align: top;}
    html {
        box-sizing: border-box;
    }
    input{
        -webkit-appearance: none;    
        -moz-appearance: none;
            appearance: none;
            outline: 0;
            box-shadow: none;
            border    : none;
    }
    input, textarea{font-family:'nbg';}
    input::-webkit-input-placeholder{font-family:'nbg' !important;}
    input:-ms-input-placeholder{font-family:'nbg' !important;}
    input:-moz-input-placeholder{font-family:'nbg' !important;}
    input::-moz-input-placeholder{font-family:'nbg' !important;}
    input::placeholder{font-family:'nbg' !important;}
    .clearfix {*zoom:1}
    .clearfix:after {display:block;content:'';clear:both;}
    .left {float:left;}
    .right {float:right;}
    .lock {overflow:hidden;}    
    .txt-bold {font-weight: bold !important;}
    .ellipsis{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
    @media all and (min-width:411px){
    /* Galaxy S5(360 x 640), iPhone X(375 x 812), Pixel2 XL(411 x 823) */
    }
    @media all and (min-width:580px){
    /* iPad(768 x 1024), iPad Pro(1024 x 1366) */
    }
    @media all and (max-width:410px){
    }
    @media all and (max-width:359px){
    /* iPhone 5/SE(320 x 568) */
    }
    </style>
</head>
<body>
  <div class="main-swiper">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide">
                    <h3>공지안내</h3>
                </div>
                <div class="swiper-slide">
                    <h3>휴업 안내</h3>
                </div>                        
            </div>
            <div class="swiper-pagination"></div>
        </div>
    </div>
</body>
<script>
    $(function(){
        var mainSwiper = new Swiper('.main-swiper .swiper-container',{
            spaceBetween:30,
            pagination:{
                el:'.main-swiper .swiper-pagination',
            },
        });
 
        $('.btn-menu').on('click', function(){
            $('.side-menu').show();
            $('body').addClass('lock');
        });    
    });            
</script>
</html>
cs
저작자표시

'웹 퍼블리싱 > HTML & CSS 지식' 카테고리의 다른 글

(CSS) 스크롤바 없애기  (0) 2020.12.10
(CSS) css 애니메이션 시작전/끝나도 적용되게 하는 법, 뭐였지?  (0) 2020.12.09
(CSS) 푸터 최하단에 위치하게 설정  (0) 2020.06.26
(CSS) Placeholder 글자 색상 변경  (0) 2020.03.02
(CSS) 각도 단위 - deg/rad/turn  (0) 2020.01.22

'웹 퍼블리싱/HTML & CSS 지식'의 다른글

  • 현재글기본 템플릿

관련글

티스토리툴바