여러가지 만들고 있는 페이지 다 다음에 참고하기 위해 올려 놓는다 

 

 

구조는 꽤 쓸만한데 음 아직 완벽히 숙달이 안됬다

 

 

 

 

<html>

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="반응형 웹 페이지 제작 샘플입니다.">
    <meta name="keyword" content="반응형 사이트, 교육사이트">
    <meta name="robots" content="all">
    
    <title>Document</title>
    
    <!-- favicon & icon -->
    <link rel="shortcut icon" href="img/icon/044-buffer.ico">  
    <link rel="buffer-icon" href="img/icon/044-buffer.ico">
    
    <!-- style css -->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/flickity.css">
    
    <!-- font-awsome -->
    <link rel="stylesheet" href="font/awesome/css/font-awesome.css">
    
    
    <!-- webfont -->
    <link href="http://fonts.googleapis.com/earlyaccess/nanumgothic.css" rel="stylesheet" type="text/css">
    
    <!-- html5 Support & ie Version Checker -->
    <script src="setting/html5shiv.js"></script>
    <script src="setting/ie-checker.js"></script>
    
    <!-- jQuery -->
    <script src="setting/jquery-1.9.1.js"></script>
    <script src="setting/flickity.pkgd.min.js"></script>
</head>
<body>
   <header id="header">
       <div class="container">
           <div class="quick">
               <div class="row">
                   <a href="#">메인</a>
                   <a href="#">로그인</a>
               </div>
           </div>
           <div class="title">
               <p>Professional Web Publihser</p>
               <h1><a href="#">TopKnell.co.kr</a></h1>
           </div>
           <div class="icon">
               <ul>
                   <li><a href="#"><i class="fa fa-github" aria-hidden="true"></i><span>아이콘1</span></a></li>
                   <li><a href="#"><i class="fa fa-facebook-square" aria-hidden="true"></i><span>아이콘2</span></a></li>
                   <li><a href="#"><i class="fa fa-flag" aria-hidden="true"></i><span>아이콘3</span></a></li>
                   <li><a href="#"><i class="fa fa-ellipsis-h" aria-hidden="true"></i><span>아이콘4</span></a></li>
               </ul>
           </div>
       </div>
   </header>
   <nav id="nav">
       <div class="container">
           <div class="row">
               <div class="nav clearfix">
                   <h2>Responsive Site</h2>
                   <ul>
                       <li><a href="#">HTML REference 1</a></li>
                       <li><a href="#">HTML REference 2</a></li>
                       <li><a href="#">HTML REference 3</a></li>
                       <li><a href="#">HTML REference 4</a></li>
                       <li><a href="#">HTML REference 5</a></li>
                       <li><a href="#">HTML REference 6</a></li>
                       <li><a href="#">HTML REference 7</a></li>
                       <li><a href="#">HTML REference 8</a></li>
                       <li><a href="#">HTML REference 9</a></li>
                       <li><a href="#">HTML REference 10</a></li>
                       <li><a href="#">HTML REference 11</a></li>
                       <li><a href="#">HTML REference 12</a></li>
                       <li><a href="#">HTML REference 13</a></li>
                       <li><a href="#">HTML REference 14</a></li>
                       <li><a href="#">HTML REference 15</a></li>
                       <li><a href="#">HTML REference 16</a></li>
                       <li><a href="#">HTML REference 17</a></li>
                       <li><a href="#">HTML REference 18</a></li>
                       <li><a href="#">HTML REference 19</a></li>
                       <li><a href="#">HTML REference 20</a></li>
                       <li><a href="#">HTML REference 21</a></li>
                       <li><a href="#">HTML REference 22</a></li>
                       <li><a href="#">HTML REference 23</a></li>
                       <li><a href="#">HTML REference 24</a></li>
                       <li><a href="#">HTML REference 25</a></li>
                       <li><a href="#">HTML REference 26</a></li>
                       <li><a href="#">HTML REference 27</a></li>
                       <li><a href="#">HTML REference 28</a></li>
                       <li><a href="#">HTML REference 29</a></li>
                       <li><a href="#">HTML REference 30</a></li>
                   </ul>
               </div>
           </div>
       </div>
   </nav>
   
    <article id="tit">
        <div class="container">
            <div class="row">
                <div class="tit">
                    <h2>"나는 매뉴다"</h2>
                    <a href="#" class="tit_btn"><i class="fa fa-align-justify" aria-hidden="true"></i><span class="blind">메뉴 펼치기</span></a>
                </div>
            </div>
        </div>
    </article>
    <main>
        <section id="contents">
            <div class="container">
                <h2 class="blind">반응형 사이트 컨텐츠</h2>
                <section id="cont_left">
                    <h3 class="blind">반응형 사이트 왼쪽 컨텐츠</h3>
                    <article class="cbox box1">
                        <h4 class="cbox_tit">MENU1</h4>
                        <p class="cbox_desc">반응형 사이트 메뉴와 관련된 내용입니다</p>
                        <!-- -->
                        <div class="menu">
                           <!-- ul>li*6>a[href="#"] -->
                            <ul>
                                <li><a href="#">1메뉴 <i class="fa fa-angle-double-right"></i></a></li>
                                <li><a href="#">2메뉴 <i class="fa fa-angle-double-right"></i></a></li>
                                <li><a href="#">3메뉴 <i class="fa fa-angle-double-right"></i></a></li>
                                <li><a href="#">4메뉴 <i class="fa fa-angle-double-right"></i></a></li>
                                <li><a href="#">5메뉴 <i class="fa fa-angle-double-right"></i></a></li>
                                <li><a href="#">6메뉴 <i class="fa fa-angle-double-right"></i></a></li>
                            </ul>
                        </div>
                        <!--// -->                    
                    </article>
                    <article class="cbox box2">
                        <h4 class="cbox_tit">Notice</h4>
                        <p class="cbox_desc">반응형 사이트 메뉴와 관련된 내용입니다</p>
                        <!-- notice -->
                        <div class="notice">
                            <h5>Notice</h5>
                            <ul>
                                <li><a href="#">이줄은 한줄 효과입니다.</a></li>
                                <li><a href="#">이줄은 한줄 효과입니다.</a></li>
                                <li><a href="#">이줄은 한줄 효과입니다.</a></li>
                                <li><a href="#">이줄은 한줄 효과입니다.</a></li>
                            </ul>
                            
                            <a class="more" href="#">더보기<i class="fa fa-plus-circle"></i></a>
                        </div>
                        <!--//notice -->                    
                    </article>
                    <article class="cbox box3">
                        <h4 class="cbox_tit">MENU3</h4>
                        <p class="cbox_desc">반응형 사이트 메뉴와 관련된 내용입니다</p>
                        <!-- blog -->
                        <div class="blog">
                            <h5>Figure</h5>
                            <figure>
                                <a href="#" class="blog_img" >
                                    <img  src="img/photo/220xnone/piper-finding-dory-short-pixar_220.jpg"><em>img</em>
                                </a>
                                <figcaption>그림 넣었음</figcaption>
                            </figure>
                        </div>
                        <div class="blog2">
                            <h5>Figure</h5>
                            <figure>
                                <a href="#" class="blog_img" >
                                    <img  src="img/photo/piper-finding-dory-short-pixar.jpg"><em>img</em>
                                </a>
                                <figcaption>그림 넣었음</figcaption>
                            </figure>
                        </div>
                        <!--// blog -->   
                        
                    </article>
                </section>
                <section id="cont_center">
                    <h3 class="blind">반응형 사이트 가운데</h3>
                    <article class="cbox box4">
                        <h4 class="cbox_tit">Slider</h4>
                        <p class="cbox_desc">반응형 사이트 메뉴와 관련된 내용입니다</p>
                        <!-- -->
                        <div class="slider">
                            <!-- Flickity HTML init -->
                            <div class="carousel"
                              data-flickity='{ "imagesLoaded": true ,"autoPlay": 3500, "pauseAutoPlayOnHover": false }'>
                              <img src="/img/photo/piper-finding-dory-short-pixar.jpg" alt="orange tree" />
                              <img src="img/photo/aurora-1197755_1920.jpg" />
                              <img src="img/photo/cat-4542301_1920.jpg" alt="look-out" />
                              <img src="img/photo/wolves-1341881_1920.jpg" alt="One World Trade" />
                              <img src="img/photo/fog-3675871_1920.jpg" alt="drizzle" />
                              <img src="img/photo/wolf-1836875_1920.jpg" alt="cat nose" />
                            </div>


                        </div>
                        <!--// -->
                    </article>
                    <article class="cbox box5">
                        <h4 class="cbox_tit">MENU5</h4>
                        <p class="cbox_desc">반응형 사이트 메뉴와 관련된 내용입니다</p>
                        <!-- square -->
                        <div class="square clearfix">
                            <a href="#"><img src="img/photo/wolves-1341881_1920.jpg" alt="이미지1"></a>
                            <a href="#"><img src="img/photo/aurora-1197755_1920.jpg" alt="이미지2"></a>
                            <a href="#"><img src="img/photo/piper-finding-dory-short-pixar.jpg" alt="이미지3"></a>
                            <a href="#"><img src="img/photo/cat-4542301_1920.jpg" alt="이미지4"></a>
                            <a href="#"><img src="img/photo/fog-3675871_1920.jpg" alt="이미지5"></a>
                            <a href="#"><img src="img/photo/deer-5973385_1920.jpg" alt="이미지6"></a>
                            <a href="#"><img src="img/photo/wolf-1836875_1920.jpg" alt="이미지7"></a>
                            <a href="#"><img src="img/photo/cotton-5601976_1920.jpg" alt="이미지8"></a>
                            <a href="#"><img src="img/photo/snow-2992534_1920.jpg" alt="이미지9"></a>
                            <a href="#"><img src="img/photo/ice-crystal-2871068_1920.jpg" alt="이미지9"></a>
                        </div>
                        <!--// square -->
                    </article>
                    <article class="cbox box6">
                        <h4 class="cbox_tit">video</h4>
                        <p class="cbox_desc">반응형 사이트 메뉴와 관련된 내용입니다</p>
                        <!-- video -->
                        <div class="wrap">
                            <div class="playbox">
                                <video autoplay="autoplay" controls="controls">
                                    <source src="video/Moon%20-%2059026.mp4" type="video/mp4">
                                </video>
                            </div>
                        </div>
                        
                        <!--// video -->
                    </article>
                </section>
                <section id="cont_right">
                    <h3 class="blind">반응형 사이트 오른쪽</h3>
                    <article class="cbox box7">
                        <h4 class="cbox_tit">MENU7</h4>
                        <p class="cbox_desc">반응형 사이트 메뉴와 관련된 내용입니다</p>
                        <!-- -->
                        <!--// -->
                    </article>
                    <article class="cbox box8">
                        <h4 class="cbox_tit">MENU8</h4>
                        <p class="cbox_desc">반응형 사이트 메뉴와 관련된 내용입니다</p>
                        <!-- -->
                        <!--// -->
                    </article>
                    <article class="cbox box9">
                        <h4 class="cbox_tit">MENU9</h4>
                        <p class="cbox_desc">반응형 사이트 메뉴와 관련된 내용입니다</p>
                        <!-- -->
                        <!--// -->
                    </article>


                </section>

            </div>
        </section>            
    </main>
   <footer id="footer">
       <h2>반응형 사이트 푸터</h2>
   </footer>
    
</body>
</html>

<css reset>

@charset "UTF-8";
/* 여백 초기화 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,figure,figcaption,button{margin:0;padding:0}

/* 테두리 초기화 */
fieldset,img{border:0 none}

/* 리스트 초기화 */
dl,ul,ol,menu,li{list-style:none}

/* 폰트 초기화 */
body,th,td,input,select,textarea,button{font-size:12px;font-family:'나눔 고딕', 'Nanum Gothic', dotum,'돋움',sans-serif;color:#222;}
a{color:#222;text-decoration:none}
a:hover{color:#999;text-decoration:none}
a:active{background-color:transparent}

/* 폰트 스타일 초기화 */
address,caption,cite,code,dfn,em,var{font-style:normal;font-weight:normal}

/* 폰트 두께 초기화 */
h1,h2,h3,h4,h5,h6,strong {font-weight: normal;}

/* blind 효과 */
.blind {position: absolute; left: 0; top: 0; width: 0; height: 0; line-height: 0; font-size: 0;overflow: hidden;}

/* claerfix */
.clearfix{*zoom:1;}
.clearfix:before, .clearfix:after {display: block; content: '';line-height: 0;}
.clearfix:after {clear: both;}

/* 반응형 img */
img {width: 100%; display: block}

<css style>

@charset "UTF-8";

/* font */

@font-face {
    font-family: 'MY';
    src: url(../font/NanumBrushScript-Regular.ttf)
}
/* font-family: 'My',cursive */
@font-face {
    font-family: 'Gothic';
    src: url(../font/NanumGothicCoding-Regular.ttf)
}
/* font-family: 'Gothic',cursive */



/* external css: flickity.css */

* { box-sizing: border-box; }

body { font-family: sans-serif; }

/* force scrollbar, not necessary, but may reduce gaps. Setting a max-height on .carousel also works */
html { overflow-y: scroll; }

.carousel {
  background: #EEE;
}

.carousel img {
  display: block;
  height: 400px;
}


/* layout */
#header {height: 400px; background: no-repeat center top /contain;}
body {background-color: rgba(0,0,0,0.1);}
#tit {background-color: rgba(255,255,255,0.8);border-bottom: 1px solid #999}


/* cont */
#contents {}
#contents .container {border-right: 1px solid #999; border-left: 1px solid #999;}
#cont_left {float: left; width: 250px; }
#cont_center {overflow: hidden; margin-right: 250px; border-right: 1px solid #999; border-left: 1px solid #999; min-height: 1200px}
#cont_right {width: 250px; position: absolute; right: 0;top: 0; }

/* footer */
#footer {width: 100% ;height: 120px;border-top: 1px solid #999;  }

/* container */
.container {position: relative; width: 1280px; margin: 0 auto; background: rgba(0,0,0,0.03);font-size: 10px}



/* row */
.row {padding: 0 15px}


/* quick */
.quick {text-align: right;}
.quick a {color: #fff; padding: 4px 0 4px 10px; display: inline-block; transition: color 0.3s ease;}
.quick a:hover {color: #ccc;}

/* title */
.title {text-align: center; text-transform: uppercase;  font-family: 'My',cursive;margin-top: 50px}
.title p {font-size: 28px; color: #fff; background-color: #202; display: inline; padding: 10px 20px; font-weight: 600; border-radius: 5px;}
.title h1 a {color: #202; background-color: #fff; display: inline-block; font-size: 20px; padding: 5px 20px; transition: 0.3s ease, box-shadow 1.3s ease; text-decoration: none;border-radius: 5px;}
.title h1 a:hover { 
    color: #fff;
    box-shadow: 
        0 0 0 100px rgba(0,0,0,0.8) inset;
}

/* icon */
.icon {text-align: center; margin-top: 40px}
.icon ul { }
.icon li {display: inline; margin: 0 2px;}
.icon li a {position: relative; display: inline-block; width: 50px; height: 50px; background-color: #fff; color: #000; font-size: 26px; border-radius: 50%; }
.icon li a i {line-height: 50px}
.icon li a span {opacity: 0; position: absolute; font-size: 12px; left:50%;transform: translate(-50%); top:-20px; background: #000; color: #fff; padding: 1px 7px; border-radius: 3px; transition: all 0.5s ease-in-out; white-space: nowrap}
.icon li a span:before {content: ''; position: absolute; left: 50%; bottom: -5px; 
    margin-left: -5px;
    border-top : 5px solid black;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    
}
.icon li a:hover span {opacity: 1; top: -25px;}

/* nav */
.nav {padding: 30px 0}
.nav h2 {font-size: 20px; color: black; padding-bottom: 5px; font-family: "MY",cursive;}
.nav li {position: relative; float: left; width: 20%; padding-bottom: 2px; padding-left: 9px; box-sizing: border-box; }
.nav li:before {content: ''; width: 3px; height: 3px; border-radius: 100%; background: black; position: absolute;left: -2px;top: 5px;}
.nav li a {padding: 2px 2px; border-style: 2px;}
.nav li a:hover {background-color: black; color: white; transition: 1s ease; text-decoration: none;border-radius: 5px}


/* tit */
.tit {text-align: center; padding: 10px; }
.tit h2{font-family: "MY",cursive;font-size: 40px}
.tit .tit_btn {position:absolute; right: 10px; top: 5px;position: absolute; display: inline-block; width: 50px; height: 50px; background-color: #fff; color: #000; font-size: 26px; border-radius: 50%;}
.tit .tit_btn i {line-height: 50px}
.tit .tit_btn:hover {background-color: rgba(0,0,0,0.3); color:white; transition: 1s ease;}

/* cbox */
.cbox {padding: 15px; border-bottom: 1px solid #999;}
.cbox .cbox_tit {font-size: 20px; color: black; text-transform: uppercase;font-family: "MY",cursive; padding-bottom: 5px;}
.cbox .cbox_desc {border-bottom: 1px dashed #999; padding-bottom: 15px; margin-bottom: 15px; color: black; line-height: 18px; }
.cbox.box1 { }
.cbox.box2 { }
.cbox.box3 {border-bottom: 0; }
.cbox.box4 { }
.cbox.box5 { }
.cbox.box6 {border-bottom: 0; }
.cbox.box7 { }
.cbox.box8 { }
.cbox.box9 {border-bottom: 0; }

/* menu */
.menu li {position: relative;}
.menu li a {text-align: left;text-indent: 10px;font-size: 20px; font-family: "MY", cursive;text-transform: uppercase; color: black; padding: 7px ; display: block;background-color: white; border-top-left-radius: 20px;border-top-right-radius: 20px; border-bottom-left-radius: 20px;border-bottom-right-radius: 20px ;margin: 5px 5px 5px 0px; box-shadow: 2s ease;transition: 0.3s ease, box-shadow 1.3s ease;}
.menu li a i {position: absolute; right: 20px ;top: 7px }
.menu li a:hover {text-decoration: none; color: white; transition: 1s ease; background-color: black;    box-shadow: 0 0 0 20px rgba(0,0,0,0.8) inset;}



/* notice */
.notice {position: relative}
.notice h5 {font-size: 25px; font-family: "MY" ,cursive; }
.notice li {position: relative; overflow: hidden; text-overflow: ellipsis;white-space: nowrap;padding-left: 6px; line-height: 16px; display: box;}
.notice li:before {content: "";width: 3px;height: 3px; border-radius: 50%;background-color: black;position: absolute;left: 0;top: 7px;}
.notice .more {position: absolute;top: 8px;right: 0;}


/* blog */
.blog h5 {font-size: 14px; color: black; padding-bottom: 3px }
.blog .blog_img {display: block;position: relative}
.blog .blog_img:before {content: ''; width: 100%; height: 100%; position: absolute;left: 0;top: 0;transition: 1s ease-in-out}
.blog .blog_img:hover:before {background-color: rgba(0,0,0,0.45);}
.blog .blog_img em {opacity: 0; position: absolute;left: 50%;top: 50%;color: white;transform: translate(-50%,-50%);transition: 2s;}
.blog .blog_img:hover em {opacity: 1}

.blog2 h5 {font-size: 14px; color: black; padding-bottom: 3px }
.blog2 .blog_img {display: block;position: relative;overflow: hidden}
.blog2 .blog_img:after {content: ''; width: 100%; height: 100%; position: absolute;left: 0;top: 0;transition: 1s ease-in-out}
.blog2 .blog_img:hover:after {background-color: rgba(0,0,0,0.45);}
.blog2 .blog_img img {transform: scale(1,1); transition: 1s ease-in-out}
.blog2 .blog_img:hover img {transform: scale(1.2,1.2);}
.blog2 .blog_img em {opacity: 0; position: absolute;left: 50%;top: 50%;color: white;transform: translate(-50%,-50%);transition: 2s;z-index: 100;}
.blog2 .blog_img:hover em {opacity: 1}

/* slider */
.slider {height: 420px;}


/* video */
.wrap{width:500px; width:100%;}
.playbox {position:relative; padding-top:56%; width:100%;}
video {position: absolute; top: 0;left: 0;width: 100%;height: auto;}

/* square */
.square {height: 170px ; overflow: hidden;}
.square a {position: relative;float: left;width: 19%;margin: 0.5%; height: 45%; top: 0; }
.square a:before {content: 'image';position: absolute; left: 50%;top: 50%; transform: translate(-50%,-50%);opacity: 0;transition: all 1s ease;color: white}
.square a:hover:before {opacity: 1}
.square a img {resize: both;height: 100%;max-width: 100%;float: center; object-fit: cover}

.square a img:hover {filter: drop-shadow(5px 5px 10px black);}
/* mediaquery 320 / 480 / 600 / 768 / 960 / 1024 / 1280 */
@media (max-width: 1280px){
    .container{width: 100%}
    #contents .container{border: 0;}
    
}
@media (max-width: 1024px){
    .nav li {width: 25%;}
}
@media (max-width: 960px){
    .nav li {width: 33.3333%;}
    #cont_center {margin-right: 0; border-right: 0;}
    #cont_right {position: static; width: 100%;border-top: 1px solid #999;}
    .square a {width: 24%;}
}
@media (max-width: 968px){
    
}
@media (max-width: 600px){
    .nav li {width: 50%;}
    #cont_left {float: none; width: 100%;}
    #cont_center {border-bottom: 1px solid #999; min-height: auto;}
    .tit .tit_btn {display: none;}
    #header {height: 300px;}
    .nav {display: none;}
    .cbox.box1 {padding: 0; border-bottom: 0;}
    .cbox.box1 .menu li a i {display: none;}
    .cbox.box1 .cbox_tit {display: none;}
    .cbox.box1 .cbox_desc {display: none;}
    .cbox.box1 .menu ul {overflow: hidden; }
    .cbox.box1 .menu li {float: left; width: 33.333%; text-align: center; box-sizing: border-box;}
    .square a {width: 49%;}
    
    
}
@media (max-width: 480px){
    
}
@media (max-width: 320px){
    
}

img

img.zip
6.12MB
setting.zip
0.09MB
font.zip
3.64MB
css.zip
0.01MB

 

 

 

video 는 안올라감

음 필요한건 다올린듯 나중에 참고하자

'블로그이사하기 > webstoryboy' 카테고리의 다른 글

웹표준에 맞게 했는지 검사하기  (0) 2021.02.03
싸이트 만들기 2  (0) 2021.01.12
싸이트 만들기 webstoryboy 1  (0) 2021.01.12
블로그 이미지

Or71nH

,