├── 1111 ├── .DS_Store ├── css │ └── style.css ├── images │ ├── ad.jpg │ ├── banner01.jpg │ ├── logo.jpg │ ├── s1.jpg │ ├── s2.jpg │ ├── s3.jpg │ └── s4.jpg ├── index.html └── script │ ├── custom.js │ └── jquery.min_1.12.4.js ├── 2222 ├── css │ └── style.css ├── images │ ├── banner01.jpg │ ├── best1.jpg │ ├── best2.jpg │ ├── best3.jpg │ ├── bg1.jpg │ ├── bg2.jpg │ ├── flogo.jpg │ ├── icon1.jpg │ ├── icon2.jpg │ └── logo.jpg ├── index.html └── script │ ├── custom.js │ └── jquery.min.js ├── 3333 ├── .DS_Store ├── css │ └── style.css ├── images │ ├── banner01.jpg │ ├── icon01.jpg │ ├── icon02.jpg │ ├── icon03.jpg │ ├── icon04.jpg │ ├── icon05.jpg │ ├── icon06.jpg │ ├── icon07.jpg │ ├── icon08.jpg │ ├── icon09.jpg │ ├── icon10.jpg │ ├── icon11.jpg │ ├── logo01.jpg │ └── logo02.jpg ├── index.html └── script │ ├── custom.js │ └── jquery.min.js ├── .DS_Store ├── Coding_img1.jpg ├── Coding_img1.psd ├── Coding_img2.jpg ├── Coding_img2.psd ├── Coding_img3.jpg ├── Coding_img3.psd ├── Coding_img4.jpg ├── Coding_img4.psd ├── README.md ├── img ├── 01.레이아웃-유형1(가로).jpg ├── 02.레이아웃-유형2(세로).jpg ├── 03.가로-메뉴-유형1.jpg ├── 04.가로-메뉴-유형2.jpg ├── 05.세로-메뉴-유형1.jpg ├── 06.세로-메뉴-유형2.jpg ├── 07.탭-메뉴-유형.jpg ├── 08.레이어-팝업-유형.jpg ├── 09.이미지-슬라이드(위아래).jpg ├── 10.이미지-슬라이드(좌우).jpg ├── 11.이미지-슬라이드(페이드).jpg ├── 12.실전사이트-만들기1.jpg ├── ban01.jpg ├── ban02.jpg └── ban03.jpg ├── open ├── 01A-1.pdf ├── 02A-2.pdf ├── 03A-3.pdf ├── 04A-4.pdf ├── 05B-1.pdf ├── 06B-2.pdf ├── 07B-3.pdf ├── 08B-4.pdf ├── 09C-1.pdf ├── 10C-2.pdf ├── 11C-3.pdf └── 12C-4.pdf ├── real_sample ├── 1 │ ├── .DS_Store │ ├── css │ │ └── style.css │ └── index.html ├── 2 │ ├── css │ │ └── style.css │ └── index.html └── .DS_Store ├── sample ├── sample264.html ├── sample265.html ├── sample266.html ├── sample267.html ├── sample268.html ├── sample269.html ├── sample270.html ├── sample271.html ├── sample272.html ├── sample273.html ├── sample274.html ├── sample275.html ├── sample276.html ├── sample277.html ├── sample278.html ├── sample314.html ├── sample315.html ├── sample316.html ├── sample317.html └── sample318.html ├── webd01.html ├── webd02.html ├── webd03.html ├── webd04-1.html ├── webd04.html ├── webd05.html ├── webd06.html ├── webd07.html ├── webd08.html ├── webd09.html ├── webd10.html └── webd11.html /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/.DS_Store -------------------------------------------------------------------------------- /1111/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/1111/.DS_Store -------------------------------------------------------------------------------- /1111/css/style.css: -------------------------------------------------------------------------------- 1 | /* reset */ 2 | * {margin: 0; padding: 0; font-size: 16px;} 3 | li {list-style: none;} 4 | a {color: #333; text-decoration: none;} 5 | .clearfix::before, .clearfix::after {display: block; content: ''; clear: both;} 6 | 7 | /* wrap */ 8 | #wrap {width: 1000px; height: 1000px; margin: 0 auto; } 9 | 10 | /* header */ 11 | #header {height: 100px;} 12 | #header h1 {float: left; padding-top: 5px;} 13 | #header h1 img {width: 130px;} 14 | #header .nav {float: right; z-index: 100; position: relative; margin-top: 20px;} 15 | #header .nav li {position: relative; float: left; width: 120px; text-align: center;} 16 | #header .nav li a {display: block; padding: 20px 15px; background: #ccc;} 17 | #header .nav li a:hover {background: #ddd;} 18 | #header .nav li ul.submenu {display: none; position: absolute; left: 0; top: 59px; background: #ddd;} 19 | #header .nav li ul.submenu li a {padding: 10px;} 20 | #header .nav li ul.submenu li a:hover {background: #999;} 21 | 22 | /* banner */ 23 | #banner {width: 1000px; height: 378px; overflow: hidden;} 24 | #banner img {width: 100%;} 25 | .slideList {position: relative;} 26 | .slideList .slideImg {position: relative;} 27 | .slideList .slideImg h2 {position: absolute; left: 50%; top: 50%; 28 | transform: translate(-50%,-50%); background: rgba(0,0,0,0.5); 29 | padding: 10px 30px; border-radius: 25px; color: #fff;} 30 | .slideList .slideImg img {display: block;} 31 | 32 | /* content1 */ 33 | #content1 {margin-top: 15px;} 34 | #content1 .notice {float: left; width: 49%; height: 220px; margin-right: 2%; 35 | border: 1px solid #ccc; box-sizing: border-box;} 36 | #content1 .ad {float: left; width: 49%; margin-right: 0;} 37 | #content1 .ad img {width: 100%; display: block;} 38 | 39 | /* notice */ 40 | .notice {position: relative; padding: 30px;} 41 | .notice ul li {float: left; margin-right: 20px;} 42 | .notice ul li a {font-size: 24px; color: #999; font-weight: bold;} 43 | .notice ul li.active a {color: #000;} 44 | .notice ul li ul {position: absolute; left: 30px; top: 70px;} 45 | .notice ul li ul li {width: 95%; padding: 5px 0;} 46 | .notice ul li ul li a {float: left; width: 60%; font-size: 16px; color: #333; 47 | overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: normal;} 48 | .notice ul li ul li span {float: right; width: 20%;} 49 | .notice .more {position: absolute; right: 30px; top: 35px;} 50 | 51 | /* content2 */ 52 | #content2 {margin-top: 25px;} 53 | #content2 h2 {margin-bottom: 10px;} 54 | #content2 li {float: left; width: 24.25%; margin-right: 1%;} 55 | #content2 li:last-child {margin-right: 0;} 56 | #content2 li img {width: 100%;} 57 | #content2 li span {display: block; padding: 10px 0;} 58 | 59 | /* footer */ 60 | #footer {border-top: 1px solid #ccc; margin-top: 30px; padding: 30px 0;} 61 | #footer address {font-style: normal; color: #666;} 62 | #footer address ul {width: 670px;} 63 | #footer address li {position: relative; display: inline; line-height: 1.7; padding: 0px 15px 0px 10px;} 64 | #footer address li:after {content: ''; width: 1px; height: 13px; background: #666; position: absolute; right: 0; top: 0;} 65 | #footer address li.left {padding-left: 0;} 66 | #footer address p {text-transform: uppercase; padding-top: 30px;} 67 | 68 | /* layer */ 69 | .layer_bg { 70 | display: none; 71 | width: 100%; height: 100%; background: rgba(0,0,0,0.8); 72 | position: fixed; left: 0; top: 0; z-index: 900} 73 | .layer { 74 | width: 500px; height: 500px; background: #ccc; 75 | border: 2px solid #000; 76 | position: absolute; 77 | left: 50%; top: 50%; z-index: 1000; 78 | transform: translate(-50%, -50%); 79 | } 80 | .layer h2 {padding: 20px; font-size: 30px;} 81 | .layer .close {position: absolute; bottom: 20px; right: 30px; font-size: 20px;} 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | -------------------------------------------------------------------------------- /1111/images/ad.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/1111/images/ad.jpg -------------------------------------------------------------------------------- /1111/images/banner01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/1111/images/banner01.jpg -------------------------------------------------------------------------------- /1111/images/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/1111/images/logo.jpg -------------------------------------------------------------------------------- /1111/images/s1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/1111/images/s1.jpg -------------------------------------------------------------------------------- /1111/images/s2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/1111/images/s2.jpg -------------------------------------------------------------------------------- /1111/images/s3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/1111/images/s3.jpg -------------------------------------------------------------------------------- /1111/images/s4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/1111/images/s4.jpg -------------------------------------------------------------------------------- /1111/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 롯데월드 6 | 7 | 8 | 9 | 10 | 11 |
12 | 59 | 60 | 61 | 77 | 78 | 79 |
80 |
81 | 99 | 더보기 + 100 |
101 |
102 | 온종일 혜택 103 |
104 |
105 | 106 | 107 |
108 |

특별한 경험

109 | 135 |
136 | 137 | 138 | 150 | 151 |
152 | 153 | 154 |
155 |
156 |

타이틀

157 | 닫기 158 |
159 |
160 | 161 | 162 | 163 | 164 | 165 | 166 | 167 | 168 | 169 | 170 | 171 | 172 | 173 | -------------------------------------------------------------------------------- /1111/script/custom.js: -------------------------------------------------------------------------------- 1 | (function($){ 2 | //#header .nav li ul.submenu {display:none} 3 | //선택자 {속성: 속성값} 4 | 5 | //$(".submenu").css("display","block"); 6 | //선택자.메서드(속성,속성값) 7 | 8 | //첫번째 유형 9 | // $(".nav > ul > li").mouseover(function(){ //li에 마우스 오버했을 때 10 | // $(this).find(".submenu").css("display","block"); 11 | // }); 12 | 13 | // $(".nav > ul > li").mouseout(function(){ //li에 마우스 아웃했을 때 14 | // $(this).find(".submenu").css("display","none"); 15 | // }); 16 | 17 | //두번째 유형 18 | // $(".nav > ul > li").mouseover(function(){ //li에 마우스 오버했을 때 19 | // $(".nav > ul > li").find(".submenu").css("display","block"); 20 | // }); 21 | 22 | // $(".nav > ul > li").mouseout(function(){ //li에 마우스 아웃했을 때 23 | // $(".nav > ul > li").find(".submenu").css("display","none"); 24 | // }); 25 | 26 | // $(".nav > ul > li").mouseover(function(){ 27 | // $(this).find(".submenu").stop().show(500); 28 | // }); 29 | 30 | // $(".nav > ul > li").mouseout(function(){ 31 | // $(this).find(".submenu").stop().hide(500); 32 | // }); 33 | 34 | //첫번째 유형 35 | $(".nav > ul > li").mouseover(function(){ 36 | $(this).find(".submenu").stop().slideDown(200); 37 | }); 38 | 39 | $(".nav > ul > li").mouseout(function(){ 40 | $(this).find(".submenu").stop().slideUp(200); 41 | }); 42 | 43 | //두번째 유형 44 | //$(".nav > ul > li").mouseover(function(){ 45 | // $(".nav > ul > li").find(".submenu").stop().slideDown(200); 46 | //}); 47 | 48 | //$(".nav > ul > li").mouseout(function(){ 49 | // $(".nav > ul > li").find(".submenu").stop().slideUp(200); 50 | //}); 51 | 52 | 53 | //이미지 슬라이드 54 | //이미지를 top으로 이미지의 height값 만큼 설정 55 | 56 | //$(".slideList").css("top","-300px"); 57 | //$(".slideList").animate({"top":"-300px"},4000); 58 | 59 | //현재 이미지 = 0 -> top: 0; 60 | //두번째 이미지 = 1 -> top: -378px; 61 | //세번째 이미지 = 2 -> top: -756px; 62 | 63 | var currentIndex = 0; //현재 이미지를 변수에 저장 64 | 65 | setInterval(function(){ 66 | if(currentIndex < 2){ 67 | currentIndex++ 68 | } else { 69 | currentIndex = 0; 70 | } 71 | var slidePosition = currentIndex * (-378)+"px"; 72 | 73 | //console.log(slidePosition); 74 | $(".slideList").animate({ top:slidePosition},400); 75 | },3000); 76 | 77 | 78 | //탭메뉴 79 | var tabMenu = $(".notice"); 80 | 81 | tabMenu.find("ul > li > ul").hide(); 82 | tabMenu.find("ul > li.active > ul").show(); 83 | 84 | function tabList(e){ 85 | e.preventDefault(); 86 | var target = $(this); 87 | target.next().show().parent("li").addClass("active").siblings("li").removeClass("active").find("ul").hide(); 88 | }; 89 | 90 | tabMenu.find("ul > li > a").click(tabList).focus(tabList); 91 | 92 | //팝업 93 | $(".ad").click(function(){ 94 | $(".layer_bg").css("display","block"); 95 | }); 96 | $(".layer .close").click(function(){ 97 | $(".layer_bg").css("display","none"); 98 | }); 99 | 100 | })(jQuery); 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | 113 | 114 | 115 | 116 | 117 | 118 | 119 | 120 | -------------------------------------------------------------------------------- /2222/css/style.css: -------------------------------------------------------------------------------- 1 | /* reset */ 2 | * {margin: 0; padding: 0; font-size: 16px;} 3 | a {color: #333; text-decoration: none;} 4 | li {list-style: none;} 5 | .clearfix::before, .clearfix::after {content: ''; display: block; clear: both;} 6 | 7 | /* warp */ 8 | #warp {width: 1000px; margin: 0 auto;} 9 | 10 | /* header */ 11 | #header h1 {float: left; padding: 15px 0 10px;} 12 | #header h1 img {width: 110px;} 13 | #header .nav {float: right; background: #ddd;} 14 | #header .nav li {position: relative; float: left; width: 140px; text-align: center;} 15 | #header .nav li a {display: block; font-size: 20px; font-weight: bold; padding: 24px 20px 20px 20px;} 16 | #header .nav li a:hover {background: #ccc;} 17 | #header .nav li ul.submenu {display: none; position: absolute; left: 0; top: 67px; z-index: 100;} 18 | #header .nav li ul.submenu li a {padding: 10px; background: #888;} 19 | #header .nav li ul.submenu li a:hover {background: #666;;} 20 | 21 | /* banner */ 22 | #banner {height: 389px; overflow: hidden;} 23 | #banner img {width: 100%; display: block;} 24 | 25 | /* 상하 26 | .slideList {position: relative; width: 1000px; height: 389px;} 27 | .slideList .slideImg {position: relative;} 28 | .slideList .slideImg h2 {position: absolute; left: 50%; top: 50%; 29 | transform: translate(-50%,-50%); background: rgba(0,0,0,0.4); padding: 10px 30px; 30 | border-radius: 20px;} 31 | */ 32 | 33 | /* 좌우 */ 34 | .slideList {position: relative; width: 3000px; z-index: 50;} 35 | .slideList .slideImg {position: relative; width: 1000px; float: left;} 36 | .slideList .slideImg h2 {position: absolute; left: 50%; top: 50%; 37 | transform: translate(-50%,-50%); background: rgba(0,0,0,0.4); padding: 10px 30px; 38 | border-radius: 20px;} 39 | 40 | 41 | /* content1 */ 42 | #content1 {margin-top: 20px;} 43 | #content1 .left {float: left; width: 49%; padding: 20px; 44 | background: #f2f2f2 url(../images/bg1.jpg) no-repeat right 20px center; 45 | background-size: 80px; 46 | box-sizing: border-box; margin-right: 2%;} 47 | #content1 .left .title {font-size: 22px; padding-bottom: 5px;} 48 | #content1 .left .desc {font-size: 14px; color: #666; padding-bottom: 15px;} 49 | #content1 .left .btn { 50 | background: url(../images/icon1.jpg) no-repeat left top; 51 | background-size: 20px; 52 | padding-left: 25px; padding-top: 3px; 53 | } 54 | #content1 .right {float: left; width: 49%; padding: 20px; 55 | background: #f2f2f2 url(../images/bg2.jpg) no-repeat right 20px center; 56 | background-size: 80px; 57 | box-sizing: border-box; margin-right: 0;} 58 | #content1 .right .title {font-size: 22px; padding-bottom: 5px;} 59 | #content1 .right .desc {font-size: 14px; color: #666; padding-bottom: 15px;} 60 | #content1 .right .btn { 61 | background: url(../images/icon2.jpg) no-repeat left top; 62 | background-size: 20px; 63 | padding-left: 25px; padding-top: 2px; 64 | } 65 | #content1 .right .btn em {font-size: 13px; color: 999; font-style: normal;} 66 | 67 | 68 | /* content2 */ 69 | #content2 {margin-top: 30px;} 70 | .tab-menu .tab-btn ul {overflow: hidden;} 71 | .tab-menu .tab-btn li {float: left; margin-right: 15px;} 72 | .tab-menu .tab-btn li a {display: block; color: #999; font-size: 24px; padding-bottom: 10px;} 73 | .tab-menu .tab-btn li.active a {color: #000;} 74 | .tab-cont .best figure {float: left; width: 32%; margin-right: 2%;} 75 | .tab-cont .best figure img {width: 100%;} 76 | .tab-cont .best figure:last-child{margin-right: 0;} 77 | 78 | /* footer */ 79 | #footer {padding: 20px 0; background: #202020; margin-top: 30px;} 80 | #footer h2 {float: left; padding-left: 20px;} 81 | #footer h2 img {width: 150px;} 82 | #footer .foot {float: right; padding-right: 30px;} 83 | #footer .foot ul {padding-bottom: 10px;} 84 | #footer .foot ul li {display: inline;} 85 | #footer .foot ul li a {color: #fff; padding-right: 10px;} 86 | #footer .foot address {font-style: normal; color: #ccc;} 87 | 88 | /* layer */ 89 | .layer_bg {display: none; position: fixed; left: 0; top: 0; z-index: 900; 90 | width: 100%; height: 100%; background: rgba(0,0,0,0.8);} 91 | .layer {display: none; position: absolute; left: 30px; top: 30px; z-index: 1000; 92 | width: 500px; height: 500px; border: 3px solid #000; background: #fff;} 93 | .layer h2 {padding: 20px; color: #000;} 94 | .layer .close {position: absolute; bottom: 20px; right: 20px;} 95 | 96 | 97 | 98 | 99 | 100 | 101 | -------------------------------------------------------------------------------- /2222/images/banner01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/2222/images/banner01.jpg -------------------------------------------------------------------------------- /2222/images/best1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/2222/images/best1.jpg -------------------------------------------------------------------------------- /2222/images/best2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/2222/images/best2.jpg -------------------------------------------------------------------------------- /2222/images/best3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/2222/images/best3.jpg -------------------------------------------------------------------------------- /2222/images/bg1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/2222/images/bg1.jpg -------------------------------------------------------------------------------- /2222/images/bg2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/2222/images/bg2.jpg -------------------------------------------------------------------------------- /2222/images/flogo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/2222/images/flogo.jpg -------------------------------------------------------------------------------- /2222/images/icon1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/2222/images/icon1.jpg -------------------------------------------------------------------------------- /2222/images/icon2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/2222/images/icon2.jpg -------------------------------------------------------------------------------- /2222/images/logo.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/2222/images/logo.jpg -------------------------------------------------------------------------------- /2222/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Cookit 6 | 7 | 8 | 9 | 10 | 11 |
12 | 59 | 60 | 76 | 77 | 78 |
79 |
80 |

우리집도 배달되냐?

81 |

너네집은 배달 안된다.

82 | 배송지 검색 83 |
84 | 89 |
90 | 91 |
92 |
93 |
94 | 98 |
99 |
100 |
101 |
102 | 어복쟁반 103 |
104 | 평양식 어복쟁반1 105 |
106 |
107 |
108 | 어복쟁반 109 |
110 | 평양식 어복쟁반1 111 |
112 |
113 |
114 | 어복쟁반 115 |
116 | 평양식 어복쟁반1 117 |
118 |
119 |
120 |
121 |
122 | 어복쟁반 123 |
124 | 평양식 어복쟁반2 125 |
126 |
127 |
128 | 어복쟁반 129 |
130 | 평양식 어복쟁반2 131 |
132 |
133 |
134 | 어복쟁반 135 |
136 | 평양식 어복쟁반2 137 |
138 |
139 |
140 |
141 |
142 |
143 | 144 | 145 | 161 | 162 |
163 | 164 | 165 | 166 |
167 |
168 |

제목

169 | 닫기 170 |
171 | 172 | 173 | 174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | 182 | 183 | -------------------------------------------------------------------------------- /2222/script/custom.js: -------------------------------------------------------------------------------- 1 | //네비게이션 2 | $(".nav > ul > li").mouseover(function(){ 3 | $(this).find(".submenu").stop().slideDown(200); 4 | }); 5 | $(".nav > ul > li").mouseout(function(){ 6 | $(this).find(".submenu").stop().slideUp(200); 7 | }); 8 | 9 | 10 | //currentIndex = 0; 첫번째 이미지 : 0 11 | //currentIndex = 1; 두번째 이미지 : -389 12 | //currentIndex = 2; 세번째 이미지 : -778 13 | 14 | //이미지 슬라이드(상하) 15 | // var currentIndex = 0; //첫번째 이미지 16 | // 17 | // setInterval(function(){ 18 | // if(currentIndex < 2){ 19 | // currentIndex++; 20 | // } else { 21 | // currentIndex = 0; 22 | // } 23 | // var slidePosition = currentIndex * (-389)+"px"; 24 | // $(".slideList").animate({top: slidePosition},400); 25 | // 26 | // },3000); 27 | 28 | //이미지 슬라이드(좌우) 29 | var currentIndex = 0; 30 | 31 | setInterval(function(){ 32 | if(currentIndex < 2){ 33 | currentIndex++; 34 | } else { 35 | currentIndex = 0; 36 | } 37 | var slidePosition = currentIndex * (-1000)+"px"; 38 | $(".slideList").animate({ left:slidePosition },400); 39 | },3000); 40 | 41 | //탭메뉴 42 | var tabBtn = $(".tab-btn > ul > li"); 43 | var tabCont = $(".tab-cont > div"); 44 | 45 | tabCont.hide().eq(0).show(); 46 | 47 | tabBtn.click(function(event){ 48 | event.preventDefault(); 49 | var target = $(this); 50 | var index = target.index(); 51 | //alert(index); 52 | tabBtn.removeClass("active"); 53 | target.addClass("active"); 54 | tabCont.css("display","none"); 55 | tabCont.eq(index).css("display","block"); 56 | }); 57 | 58 | //레이어 팝업 59 | $("#content1 .right").click(function(){ 60 | $(".layer").slideDown(300); 61 | $(".layer_bg").show(); 62 | }); 63 | $(".layer .close").click(function(){ 64 | $(".layer").slideUp(300); 65 | $(".layer_bg").hide(); 66 | }); 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | -------------------------------------------------------------------------------- /3333/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/3333/.DS_Store -------------------------------------------------------------------------------- /3333/css/style.css: -------------------------------------------------------------------------------- 1 | /* reset */ 2 | * {margin: 0; padding: 0;} 3 | a {text-decoration: none; color: #333;} 4 | li {list-style: none;} 5 | .clearfix:before, .clearfix:after {content: ''; display: block; clear: both;} 6 | 7 | /* layout */ 8 | #wrap {width: 1000px; margin: 0 auto; padding-top: 50px;} 9 | #aside {float: left; width: 270px; } 10 | #contents {float: right; width: 700px; } 11 | #footer {float: left; width: 100%; background: #edf2f8} 12 | 13 | /* aside */ 14 | #aside h1 {margin-bottom: 30px;} 15 | #aside h1 img {width: 150px;} 16 | #aside .nav li {position: relative; z-index: 1000; padding-bottom: 5px; background: #f1f1f1; padding: 10px;} 17 | #aside .nav li a {font-size: 23px;} 18 | #aside .nav li a:hover {text-decoration: underline;} 19 | #aside .nav li.active a {color: blueviolet;} 20 | #aside .nav li ul.submenu {display: none; width: 150px; position: absolute; right: -140px; top: 0;} 21 | #aside .nav li ul.submenu li { } 22 | #aside .nav li ul.submenu li a {display: block; font-size: 20px; color: #333; padding: 10px; 23 | border-bottom: 1px solid #ccc;} 24 | #aside .nav li ul.submenu li a:hover {text-decoration: none;} 25 | 26 | /* banner */ 27 | .banner {height: 384px; } 28 | .banner img {width: 100%; display: block;} 29 | .slideList {width: 700px; position: relative;} 30 | .slideList .slideImg {position: absolute; left: 0; top: 0;} 31 | .slideList .slideImg h2 {position: absolute; left: 50%; top: 50%; 32 | transform: translate(-50%,-50%); background: rgba(0,0,0,0.5); padding: 10px 30px; 33 | border-radius: 25px;} 34 | 35 | /* tab */ 36 | .tab {padding: 40px 0; height: 200px; position: relative; width: 100%;} 37 | .tab img {width: 100px;} 38 | .tab ul {text-align: center;} 39 | .tab ul li {display: inline; padding: 5px;} 40 | .tab ul li a {font-size: 24px; color: #999;} 41 | .tab ul li ul {position: absolute; left: 0; top: 100px; width: 100%; overflow: hidden;} 42 | .tab ul li ul li {width: 20%; float: left; box-sizing: border-box;} 43 | .tab ul li ul li a {font-size: 14px;} 44 | .tab ul li ul li a span {display: block;} 45 | .tab ul li.active a {color: #000;} 46 | 47 | /* layer */ 48 | .layer {background: #f7f7f7; padding: 15px;} 49 | .layer > div {position: relative; float: left; width: 32%; 50 | padding: 6% 3%; text-align: center; margin-right: 2%; background: #fff; 51 | border: 2px solid #ccc; box-sizing: border-box; 52 | } 53 | .layer > div:last-child {margin-right: 0;} 54 | .layer > div img {width: 100px; padding: 20px 0;} 55 | .layer > div ul li {text-align: left; padding-bottom: 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} 56 | .layer > div .more {position: absolute; right: 20px; top: 20px; border:1px solid #ccc; 57 | border-radius: 50%; width: 15px; height: 15px;} 58 | 59 | /* #footer */ 60 | #footer {padding: 10px; box-sizing: border-box; margin-top: 20px;} 61 | #footer h2 {float: left;} 62 | #footer h2 img {width: 80px;} 63 | #footer address {float: left; font-style: normal; padding: 20px 0 0 20px;} 64 | #footer .sns {float: right; margin-top: 20px;} 65 | #footer .sns ul {overflow: hidden;} 66 | #footer .sns li {float: left; padding-bottom: 5px;} 67 | #footer .sns li img {width: 60px;} 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | -------------------------------------------------------------------------------- /3333/images/banner01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/3333/images/banner01.jpg -------------------------------------------------------------------------------- /3333/images/icon01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/3333/images/icon01.jpg -------------------------------------------------------------------------------- /3333/images/icon02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/3333/images/icon02.jpg -------------------------------------------------------------------------------- /3333/images/icon03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/3333/images/icon03.jpg -------------------------------------------------------------------------------- /3333/images/icon04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/3333/images/icon04.jpg -------------------------------------------------------------------------------- /3333/images/icon05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/3333/images/icon05.jpg -------------------------------------------------------------------------------- /3333/images/icon06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/3333/images/icon06.jpg -------------------------------------------------------------------------------- /3333/images/icon07.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/3333/images/icon07.jpg -------------------------------------------------------------------------------- /3333/images/icon08.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/3333/images/icon08.jpg -------------------------------------------------------------------------------- /3333/images/icon09.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/3333/images/icon09.jpg -------------------------------------------------------------------------------- /3333/images/icon10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/3333/images/icon10.jpg -------------------------------------------------------------------------------- /3333/images/icon11.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/3333/images/icon11.jpg -------------------------------------------------------------------------------- /3333/images/logo01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/3333/images/logo01.jpg -------------------------------------------------------------------------------- /3333/images/logo02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/3333/images/logo02.jpg -------------------------------------------------------------------------------- /3333/index.html: -------------------------------------------------------------------------------- 1 | f!DOCTYPE html> 2 | fhtml lang="ko"> 3 | fhead> 4 | fmeta charset="UTF-8"> 5 | ftitle>정부 24f/title> 6 | flink rel="stylesheet" href="css/style.css"> 7 | f/head> 8 | fbody> 9 | fdiv id="wrap" class="clearfix"> 10 | faside id="aside"> 11 | fh1>fimg src="images/logo01.jpg" alt="정부24">f/h1> 12 | fnav class="nav"> 13 | ful> 14 | fli class="active">fa href="#">서비스f/a> 15 | ful class="submenu"> 16 | fli>fa href="#">submenu1f/a>f/li> 17 | fli>fa href="#">submenu1f/a>f/li> 18 | fli>fa href="#">submenu1f/a>f/li> 19 | fli>fa href="#">submenu2f/a>f/li> 20 | f/ul> 21 | f/li> 22 | fli>fa href="#">정책정보f/a> 23 | ful class="submenu"> 24 | fli>fa href="#">submenu1f/a>f/li> 25 | fli>fa href="#">submenu1f/a>f/li> 26 | fli>fa href="#">submenu1f/a>f/li> 27 | fli>fa href="#">submenu2f/a>f/li> 28 | f/ul> 29 | f/li> 30 | fli>fa href="#">기관정보f/a> 31 | ful class="submenu"> 32 | fli>fa href="#">submenu1f/a>f/li> 33 | fli>fa href="#">submenu1f/a>f/li> 34 | fli>fa href="#">submenu1f/a>f/li> 35 | fli>fa href="#">submenu2f/a>f/li> 36 | f/ul> 37 | f/li> 38 | fli>fa href="#">고객센터f/a> 39 | ful class="submenu"> 40 | fli>fa href="#">submenu1f/a>f/li> 41 | fli>fa href="#">submenu1f/a>f/li> 42 | fli>fa href="#">submenu1f/a>f/li> 43 | fli>fa href="#">submenu2f/a>f/li> 44 | f/ul> 45 | f/li> 46 | f/ul> 47 | f/nav> 48 | f/aside> 49 | fsection id="contents"> 50 | farticle class="banner"> 51 | fdiv class="slideList"> 52 | fdiv class="slideImg"> 53 | fh2>페이드 효과 이미지1f/h2> 54 | fimg src="images/banner01.jpg" alt="정부!!"> 55 | f/div> 56 | fdiv class="slideImg"> 57 | fh2>페이드 효과 이미지2f/h2> 58 | fimg src="images/banner01.jpg" alt="정부!!"> 59 | f/div> 60 | fdiv class="slideImg"> 61 | fh2>페이드 효과 이미지3f/h2> 62 | fimg src="images/banner01.jpg" alt="정부!!"> 63 | f/div> 64 | f/div> 65 | f/article> 66 | farticle class="tab"> 67 | ful> 68 | fli class="active">fa href="#">자주 찾는 서비스f/a> 69 | ful> 70 | fli>fa href="#">fimg src="images/icon01.jpg" alt="">fspan>주민등록표등폰f/span>f/a>f/li> 71 | fli>fa href="#">fimg src="images/icon02.jpg" alt="">fspan>주민등록표등폰f/span>f/a>f/li> 72 | fli>fa href="#">fimg src="images/icon03.jpg" alt="">fspan>주민등록표등폰f/span>f/a>f/li> 73 | fli>fa href="#">fimg src="images/icon04.jpg" alt="">fspan>주민등록표등폰f/span>f/a>f/li> 74 | fli>fa href="#">fimg src="images/icon05.jpg" alt="">fspan>주민등록표등폰f/span>f/a>f/li> 75 | f/ul> 76 | f/li> 77 | fli>fa href="#">키워드 서비스f/a> 78 | ful style="display: none"> 79 | fli>fa href="#">fimg src="images/icon05.jpg" alt="">fspan>주민등록표등폰2f/span>f/a>f/li> 80 | fli>fa href="#">fimg src="images/icon05.jpg" alt="">fspan>주민등록표등폰2f/span>f/a>f/li> 81 | fli>fa href="#">fimg src="images/icon05.jpg" alt="">fspan>주민등록표등폰2f/span>f/a>f/li> 82 | fli>fa href="#">fimg src="images/icon05.jpg" alt="">fspan>주민등록표등폰2f/span>f/a>f/li> 83 | fli>fa href="#">fimg src="images/icon05.jpg" alt="">fspan>주민등록표등폰2f/span>f/a>f/li> 84 | f/ul> 85 | f/li> 86 | f/ul> 87 | f/article> 88 | farticle class="layer clearfix"> 89 | fdiv> 90 | fh3>공지사항f/h3> 91 | fimg src="images/icon06.jpg" alt="공지사항"> 92 | ful> 93 | fli>언제나 어디서나 언제나 어디서나 언제나 어디서나언제나 어디서나f/li> 94 | fli>언제나 어디서나 언제나 어디서나 언제나 어디서나언제나 어디서나f/li> 95 | fli>언제나 어디서나 언제나 어디서나 언제나 어디서나언제나 어디서나f/li> 96 | f/ul> 97 | fa href="#" class="more">+f/a> 98 | f/div> 99 | fdiv> 100 | fh3>공지사항f/h3> 101 | fimg src="images/icon07.jpg" alt="공지사항"> 102 | ful> 103 | fli>언제나 어디서나 언제나 어디서나 언제나 어디서나언제나 어디서나f/li> 104 | fli>언제나 어디서나 언제나 어디서나 언제나 어디서나언제나 어디서나f/li> 105 | fli>언제나 어디서나 언제나 어디서나 언제나 어디서나언제나 어디서나f/li> 106 | f/ul> 107 | fa href="#" class="more">+f/a> 108 | f/div> 109 | fdiv> 110 | fh3>공지사항f/h3> 111 | fimg src="images/icon08.jpg" alt="공지사항"> 112 | ful> 113 | fli>언제나 어디서나 언제나 어디서나 언제나 어디서나언제나 어디서나f/li> 114 | fli>언제나 어디서나 언제나 어디서나 언제나 어디서나언제나 어디서나f/li> 115 | fli>언제나 어디서나 언제나 어디서나 언제나 어디서나언제나 어디서나f/li> 116 | f/ul> 117 | fa href="#" class="more">+f/a> 118 | f/div> 119 | f/article> 120 | f/section> 121 | ffooter id="footer" class="clearfix"> 122 | fh2>fimg src="images/logo02.jpg" alt="정부24">f/h2> 123 | faddress> 124 | 서울 특별시 세종대로 209 행정안전부fbr> 125 | 정부 콜센터 1588-2188fbr> 126 | Copyright © All right reserved 127 | f/address> 128 | fdiv class="sns"> 129 | ful> 130 | fli>fa href="#">fimg src="images/icon09.jpg" alt="트위터">f/a>f/li> 131 | fli>fa href="#">fimg src="images/icon10.jpg" alt="네이버">f/a>f/li> 132 | fli>fa href="#">fimg src="images/icon11.jpg" alt="페이스북">f/a>f/li> 133 | f/ul> 134 | f/div> 135 | f/footer> 136 | f/div> 137 | 138 | fscript src="script/jquery.min.js">f/script> 139 | fscript src="script/custom.js">f/script> 140 | f/body> 141 | f/html> 142 | 143 | 144 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | -------------------------------------------------------------------------------- /3333/script/custom.js: -------------------------------------------------------------------------------- 1 | //세로 메뉴 2 | $(".nav > ul > li").hover( 3 | function(){ 4 | $(this).find(".submenu").stop().slideDown(); 5 | },function(){ 6 | $(this).find(".submenu").stop().slideUp(); 7 | }); 8 | 9 | //slideList > slideImg (1) eq(0) 10 | //slideList > slideImg (2) eq(1) 11 | //slideList > slideImg (3) eq(2) 12 | 13 | //이미지 슬라이드 14 | $(".slideList").children("div:gt(0)").hide(); 15 | 16 | var currentIndex = 0; 17 | //var currentIndex = 1; 18 | //var currentIndex = 2; 19 | 20 | setInterval(function(){ 21 | var next = (currentIndex + 1) % 3; 22 | $(".slideList").find("div").eq(currentIndex).fadeOut(); 23 | $(".slideList").find("div").eq(next).fadeIn(); 24 | 25 | console.log("currentIndex="+ currentIndex); 26 | console.log("next="+ next); 27 | //currentIndex = 0 28 | //next = 1 29 | 30 | currentIndex = next; 31 | },3000); 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /Coding_img1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/Coding_img1.jpg -------------------------------------------------------------------------------- /Coding_img1.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/Coding_img1.psd -------------------------------------------------------------------------------- /Coding_img2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/Coding_img2.jpg -------------------------------------------------------------------------------- /Coding_img2.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/Coding_img2.psd -------------------------------------------------------------------------------- /Coding_img3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/Coding_img3.jpg -------------------------------------------------------------------------------- /Coding_img3.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/Coding_img3.psd -------------------------------------------------------------------------------- /Coding_img4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/Coding_img4.jpg -------------------------------------------------------------------------------- /Coding_img4.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/Coding_img4.psd -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | 3 |

웹디자인 기능사 실기 따라하면 딴다.

4 | 18 | 19 | 23 | 24 | 25 | 41 | -------------------------------------------------------------------------------- /img/01.레이아웃-유형1(가로).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/img/01.레이아웃-유형1(가로).jpg -------------------------------------------------------------------------------- /img/02.레이아웃-유형2(세로).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/img/02.레이아웃-유형2(세로).jpg -------------------------------------------------------------------------------- /img/03.가로-메뉴-유형1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/img/03.가로-메뉴-유형1.jpg -------------------------------------------------------------------------------- /img/04.가로-메뉴-유형2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/img/04.가로-메뉴-유형2.jpg -------------------------------------------------------------------------------- /img/05.세로-메뉴-유형1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/img/05.세로-메뉴-유형1.jpg -------------------------------------------------------------------------------- /img/06.세로-메뉴-유형2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/img/06.세로-메뉴-유형2.jpg -------------------------------------------------------------------------------- /img/07.탭-메뉴-유형.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/img/07.탭-메뉴-유형.jpg -------------------------------------------------------------------------------- /img/08.레이어-팝업-유형.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/img/08.레이어-팝업-유형.jpg -------------------------------------------------------------------------------- /img/09.이미지-슬라이드(위아래).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/img/09.이미지-슬라이드(위아래).jpg -------------------------------------------------------------------------------- /img/10.이미지-슬라이드(좌우).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/img/10.이미지-슬라이드(좌우).jpg -------------------------------------------------------------------------------- /img/11.이미지-슬라이드(페이드).jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/img/11.이미지-슬라이드(페이드).jpg -------------------------------------------------------------------------------- /img/12.실전사이트-만들기1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/img/12.실전사이트-만들기1.jpg -------------------------------------------------------------------------------- /img/ban01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/img/ban01.jpg -------------------------------------------------------------------------------- /img/ban02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/img/ban02.jpg -------------------------------------------------------------------------------- /img/ban03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/img/ban03.jpg -------------------------------------------------------------------------------- /open/01A-1.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/open/01A-1.pdf -------------------------------------------------------------------------------- /open/02A-2.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/open/02A-2.pdf -------------------------------------------------------------------------------- /open/03A-3.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/open/03A-3.pdf -------------------------------------------------------------------------------- /open/04A-4.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/open/04A-4.pdf -------------------------------------------------------------------------------- /open/05B-1.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/open/05B-1.pdf -------------------------------------------------------------------------------- /open/06B-2.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/open/06B-2.pdf -------------------------------------------------------------------------------- /open/07B-3.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/open/07B-3.pdf -------------------------------------------------------------------------------- /open/08B-4.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/open/08B-4.pdf -------------------------------------------------------------------------------- /open/09C-1.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/open/09C-1.pdf -------------------------------------------------------------------------------- /open/10C-2.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/open/10C-2.pdf -------------------------------------------------------------------------------- /open/11C-3.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/open/11C-3.pdf -------------------------------------------------------------------------------- /open/12C-4.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/open/12C-4.pdf -------------------------------------------------------------------------------- /real_sample/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/real_sample/.DS_Store -------------------------------------------------------------------------------- /real_sample/1/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webstoryboy/webd/11a8452932d72be46c2f5bf780c41990baa7bb7a/real_sample/1/.DS_Store -------------------------------------------------------------------------------- /real_sample/1/css/style.css: -------------------------------------------------------------------------------- 1 | /* reset */ 2 | * {margin: 0; padding: 0;} 3 | .clearfix::before, .clearfix::after {display: block; content: ''; clear: both;} 4 | 5 | /* 레이아웃 */ 6 | #wrap {width: 1200px; margin: 0 auto;} 7 | 8 | /* header */ 9 | #header {} 10 | #header .logo {float: left; width: 250px; height: 100px; background: #888;} 11 | #header .nav {float: left; width: 950px; height: 100px; background: #777;} 12 | 13 | /* banner */ 14 | #banner {height: 300px; background: #666;} 15 | 16 | /* contents */ 17 | #contents {} 18 | #contents > div {float: left; width: 400px; height: 200px;} 19 | #contents > div.cont1 {background: #555;} 20 | #contents > div.cont2 {background: #444;} 21 | #contents > div.cont3 {background: #333;} 22 | 23 | /* footer */ 24 | #footer {} 25 | #footer .foot1 {float: left; width: 200px; height: 100px; background: #888;} 26 | #footer .foot2 {float: left; width: 800px; height: 100px; background: #777;} 27 | #footer .foot3 {float: left; width: 200px; height: 100px; background: #666;} 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /real_sample/1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 산업대학교 6 | 7 | 8 | 9 |
10 | 14 | 15 | 16 | 19 | 20 | 21 |
22 |

공지사항

23 |

갤러리

24 |

팝업

25 |
26 | 27 | 28 | 33 | 34 |
35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /real_sample/2/css/style.css: -------------------------------------------------------------------------------- 1 | /* reset */ 2 | * {margin: 0; padding: 0;} 3 | .clearfix::before, .clearfix::after {display: block; content: ''; clear: both;} 4 | 5 | /* 레이아웃 */ 6 | #wrap {width: 1200px; margin: 0 auto;} 7 | #side {float:left; width: 300px; height: 850px; background: #ccc;} 8 | #content {float: left; width: 900px; height: 850px; background: #ddd;} 9 | 10 | /* header */ 11 | #side .logo {width: 300px; height: 150px; background: #999;} 12 | #side .nav {width: 300px; height: 700px; background: #888;} 13 | 14 | /* banner */ 15 | #banner {width: 900px; height: 450px; background: #777;} 16 | 17 | /* contents */ 18 | #contents {} 19 | #contents > div {float: left; width: 33.33333%; height: 300px;} 20 | #contents > div.cont1 {background: #666;} 21 | #contents > div.cont2 {background: #555;} 22 | #contents > div.cont3 {background: #444;} 23 | 24 | /* footer */ 25 | #footer {} 26 | #footer .foot1 {float: left; width: 200px; height: 100px; background: #333;} 27 | #footer .foot2 {float: left; width: 700px; height: 50px; background: #222;} 28 | #footer .foot3 {float: left; width: 700px; height: 50px; background: #111;} 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /real_sample/2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 대한은행 6 | 7 | 8 | 9 |
10 | 14 |
15 | 18 | 19 | 20 |
21 |

공지사항

22 |

갤러리

23 |

팝업

24 |
25 | 26 | 27 |
28 |

로고

29 |

하단메뉴

30 |

Copyright

31 |
32 | 33 |
34 |
35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /sample/sample264.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 |
6 |
7 |
8 |
9 | 14 |
15 |
16 |
17 |

18 | 웹 디자인 기능사 실기 합격을 위한 영상입니다.
19 | 따라하면 누구나 딸 수 있는 자격증입니다.
20 | 끝까지 완주하시고 자격증 꼭 취득하세요^^ 21 |

22 |
23 |

24 | 25 | 26 | 32 | 35 |

36 | 37 |
38 | 39 |
40 |

41 | 사용프로그램
42 | brackets GO 43 |

44 |
45 |

46 | 샘플 보기 GO
47 | 소스 다운로드 GO
48 |

49 |
50 | 51 |

인스타그램 보기 GO

52 |

포폴 만들기 스터디 모임 GO

53 |
54 | 55 |

56 | 도움이 되셨다면 구독과 좋아요!! click
57 | 모르거나 궁금한 사항은 언제든지 댓글로 부탁드립니다.
58 | 댓글은 영상을 제작하는데 많은 힘이 됩니다.
59 | 다 보셨으면. 꼭! 댓글 부탁드립니다. 60 |

61 |
62 | 63 | 64 |
65 | 66 |
67 |

68 | 공개자료
69 | 01A-1, 70 | 02A-2, 71 | 03A-3, 72 | 04A-4, 73 | 05B-1, 74 | 06B-2, 75 | 07B-3, 76 | 08B-4, 77 | 09C-1, 78 | 10C-2, 79 | 11C-3, 80 | 12C-4
81 |

82 |
83 |

84 | 웹 퍼블리셔가 되기 위한 튜토리얼 순서
85 | 1. 웹 표준 사이트 만들기(2019) GO
86 | 2. 반응형 사이트 만들기(2019) GO
87 | 3. 메가박스 사이트 만들기(2019) - 디자인 GO
88 | 4. 메가박스 사이트 만들기(2019) - 코딩 GO
89 | ...추후 제공

90 | 91 | + 웹디자인 기능사 GO 92 |

93 | 94 |
95 | 96 |
97 |
98 |
99 |
100 | 101 |
102 |
103 |
104 | 109 |
110 |
111 | 

112 | 
113 | 
114 | 
115 | 
116 | 
117 | 
118 | 
119 | 
120 | 
121 | 
122 | 
123 | 
124 | 
125 | 
126 | 
127 | 
128 | 
129 | 
130 | 
131 | 
132 | 
133 | 
134 | 
135 | 
136 | 
137 | 
138 | 
139 | 
140 | 
141 | 
142 | 
143 | 
144 | 
145 | 
146 | 
147 | 
148 | 
149 | 
150 |
151 |
152 | 153 |
154 | 

155 | 
156 | 
157 | 
158 | 
159 | 
160 | 
161 | 
162 | 
163 | 
164 | 
165 | 
166 | 
167 | 
168 | 
169 | 
170 | 
171 | 
172 | 
173 | 
174 | 
175 | 
176 | 
177 | 
178 | 
179 | 
180 | 
181 | 
182 | 
183 | 
184 | 
185 | 
186 | 
187 | 
188 | 
189 | 
190 | 
191 | 
192 | 
193 | 
194 | 
195 | 
196 | 
197 | 
198 | 
199 | 
200 | 
201 | 
202 | 
203 |
204 |
205 | 206 |
207 | 

208 | 
209 | 
210 | 
211 | 
212 | 
213 | 
214 | 
215 | 
216 | 
217 | 
218 | 
219 | 
220 | 
221 | 
222 | 
223 | 
224 | 
225 | 
226 |     
227 | 
228 | 
229 | 
230 | 
231 | 
232 | 
233 | 
234 | 
235 | 
236 | 
237 | 
238 | 
239 | 
240 | 
241 | 
242 | 
243 | 
244 | 
245 | 
246 |
247 |
248 | 249 |
250 |
251 |
252 | 253 |
254 | -------------------------------------------------------------------------------- /sample/sample265.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 |
6 |
7 |
8 |
9 | 14 |
15 |
16 |
17 |

18 | 웹 디자인 기능사 실기 합격을 위한 영상입니다.
19 | 따라하면 누구나 딸 수 있는 자격증입니다.
20 | 끝까지 완주하시고 자격증 꼭 취득하세요^^ 21 |

22 |
23 |

24 | 25 | 26 | 32 | 35 |

36 | 37 |
38 | 39 |
40 |

41 | 사용프로그램
42 | brackets GO 43 |

44 |
45 |

46 | 샘플 보기 GO
47 | 소스 다운로드 GO
48 |

49 |
50 | 51 |

인스타그램 보기 GO

52 |

포폴 만들기 스터디 모임 GO

53 |
54 | 55 |

56 | 도움이 되셨다면 구독과 좋아요!! click
57 | 모르거나 궁금한 사항은 언제든지 댓글로 부탁드립니다.
58 | 댓글은 영상을 제작하는데 많은 힘이 됩니다.
59 | 다 보셨으면. 꼭! 댓글 부탁드립니다. 60 |

61 |
62 | 63 | 64 |
65 | 66 |
67 |

68 | 공개자료
69 | 01A-1, 70 | 02A-2, 71 | 03A-3, 72 | 04A-4, 73 | 05B-1, 74 | 06B-2, 75 | 07B-3, 76 | 08B-4, 77 | 09C-1, 78 | 10C-2, 79 | 11C-3, 80 | 12C-4
81 |

82 |
83 |

84 | 웹 퍼블리셔가 되기 위한 튜토리얼 순서
85 | 1. 웹 표준 사이트 만들기(2019) GO
86 | 2. 반응형 사이트 만들기(2019) GO
87 | 3. 메가박스 사이트 만들기(2019) - 디자인 GO
88 | 4. 메가박스 사이트 만들기(2019) - 코딩 GO
89 | ...추후 제공

90 | 91 | + 웹디자인 기능사 GO 92 |

93 | 94 |
95 | 96 |
97 |
98 |
99 |
100 | 101 |
102 |
103 |
104 | 108 |
109 |
110 | 
<!DOCTYPE html>
111 | <html lang="ko">
112 | <head>
113 |     <meta charset="UTF-8">
114 |     <title>산업대학교</title>
115 |     <link rel="stylesheet" href="css/style.css">
116 | </head>
117 | <body>
118 |     <div id="wrap">
119 |         <header id="header" class="clearfix">
120 |             <h1 class="logo">로고</h1>
121 |             <div class="nav">메뉴</div>
122 |         </header>
123 |         <!-- //header -->
124 |         
125 |         <section id="banner">
126 |             <h2>이미지 슬라이드</h2>
127 |         </section>
128 |         <!-- //banner -->
129 |         
130 |         <section id="contents" class="clearfix">
131 |             <div class="cont1"><h3>공지사항</h3></div>
132 |             <div class="cont2"><h3>갤러리</h3></div>
133 |             <div class="cont3"><h3>팝업</h3></div>
134 |         </section>
135 |         <!-- //contents -->
136 |             
137 |         <footer id="footer" class="clearfix">
138 |             <div class="foot1"><h3>로고</h3></div>
139 |             <div class="foot2"><h3>Copyright</h3></div>
140 |             <div class="foot3"><h3>SNS</h3></div>
141 |         </footer>
142 |         <!-- //footer -->
143 |     </div>
144 |     <!-- //wrap -->
145 | </body>
146 | </html>
147 | 
148 | 
149 | 
150 | 
151 | 
152 | 
153 | 
154 | 
155 | 
156 | 
157 | 
158 | 
159 | 
160 | 
161 | 
162 | 
163 | 
164 | 
165 | 
166 | 
167 | 
168 | 
169 | 
170 | 
171 | 
172 | 
173 | 
174 | 
175 | 
176 | 
177 | 
178 | 
179 | 
180 | 
181 | 
182 | 
183 | 
184 | 
185 | 
186 | 
187 | 
188 | 
189 | 
190 | 
191 | 
192 |
193 |
194 | 195 |
196 | 
/* reset */
197 | * {margin: 0; padding: 0;}
198 | .clearfix::before, .clearfix::after {display: block; content: ''; clear: both;}
199 | 
200 | /* 레이아웃 */
201 | #wrap {width: 1200px; margin: 0 auto;}
202 | 
203 | /* header */
204 | #header {}
205 | #header .logo {float: left; width: 250px; height: 100px; background: #888;}
206 | #header .nav {float: left; width: 950px; height: 100px; background: #777;}
207 | 
208 | /* banner */
209 | #banner {height: 300px; background: #666;}
210 | 
211 | /* contents */
212 | #contents {}
213 | #contents > div {float: left; width: 400px; height: 200px;}
214 | #contents > div.cont1 {background: #555;}
215 | #contents > div.cont2 {background: #444;}
216 | #contents > div.cont3 {background: #333;}
217 | 
218 | /* footer */
219 | #footer {}
220 | #footer .foot1 {float: left; width: 200px; height: 100px; background: #888;}
221 | #footer .foot2 {float: left; width: 800px; height: 100px; background: #777;}
222 | #footer .foot3 {float: left; width: 200px; height: 100px; background: #666;}
223 | 
224 | 
225 | 
226 | 
227 | 
228 | 
229 | 
230 | 
231 | 
232 | 
233 | 
234 | 
235 | 
236 | 
237 | 
238 | 
239 | 
240 | 
241 | 
242 | 
243 | 
244 | 
245 | 
246 | 
247 | 
248 | 
249 | 
250 | 
251 | 
252 | 
253 | 
254 | 
255 | 
256 | 
257 | 
258 | 
259 | 
260 | 
261 | 
262 | 
263 | 
264 | 
265 | 
266 | 
267 | 
268 | 
269 | 
270 | 
271 | 
272 | 
273 | 
274 | 
275 | 
276 | 
277 | 
278 |
279 |
280 | 281 | 282 |
283 |
284 |
285 | 286 |
287 | -------------------------------------------------------------------------------- /sample/sample266.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 |
6 |
7 |
8 |
9 | 14 |
15 |
16 |
17 |

18 | 웹 디자인 기능사 실기 합격을 위한 영상입니다.
19 | 따라하면 누구나 딸 수 있는 자격증입니다.
20 | 끝까지 완주하시고 자격증 꼭 취득하세요^^ 21 |

22 |
23 |

24 | 25 | 26 | 32 | 35 |

36 | 37 |
38 | 39 |
40 |

41 | 사용프로그램
42 | brackets GO 43 |

44 |
45 |

46 | 샘플 보기 GO
47 | 소스 다운로드 GO
48 |

49 |
50 | 51 |

인스타그램 보기 GO

52 |

포폴 만들기 스터디 모임 GO

53 |
54 | 55 |

56 | 도움이 되셨다면 구독과 좋아요!! click
57 | 모르거나 궁금한 사항은 언제든지 댓글로 부탁드립니다.
58 | 댓글은 영상을 제작하는데 많은 힘이 됩니다.
59 | 다 보셨으면. 꼭! 댓글 부탁드립니다. 60 |

61 |
62 | 63 | 64 |
65 | 66 |
67 |

68 | 공개자료
69 | 01A-1, 70 | 02A-2, 71 | 03A-3, 72 | 04A-4, 73 | 05B-1, 74 | 06B-2, 75 | 07B-3, 76 | 08B-4, 77 | 09C-1, 78 | 10C-2, 79 | 11C-3, 80 | 12C-4
81 |

82 |
83 |

84 | 웹 퍼블리셔가 되기 위한 튜토리얼 순서
85 | 1. 웹 표준 사이트 만들기(2019) GO
86 | 2. 반응형 사이트 만들기(2019) GO
87 | 3. 메가박스 사이트 만들기(2019) - 디자인 GO
88 | 4. 메가박스 사이트 만들기(2019) - 코딩 GO
89 | ...추후 제공

90 | 91 | + 웹디자인 기능사 GO 92 |

93 | 94 |
95 | 96 |
97 |
98 |
99 |
100 | 101 |
102 |
103 |
104 | 108 |
109 |
110 | 
<!DOCTYPE html>
111 | <html lang="ko">
112 | <head>
113 |     <meta charset="UTF-8">
114 |     <title>산업대학교</title>
115 |     <link rel="stylesheet" href="css/style.css">
116 | </head>
117 | <body>
118 |     <div id="wrap">
119 |         <header id="header" class="clearfix">
120 |             <h1 class="logo">로고</h1>
121 |             <div class="nav">메뉴</div>
122 |         </header>
123 |         <!-- //header -->
124 |         
125 |         <section id="banner">
126 |             <h2>이미지 슬라이드</h2>
127 |         </section>
128 |         <!-- //banner -->
129 |         
130 |         <section id="contents" class="clearfix">
131 |             <div class="cont1"><h3>공지사항</h3></div>
132 |             <div class="cont2"><h3>갤러리</h3></div>
133 |             <div class="cont3"><h3>팝업</h3></div>
134 |         </section>
135 |         <!-- //contents -->
136 |             
137 |         <footer id="footer" class="clearfix">
138 |             <div class="foot1"><h3>로고</h3></div>
139 |             <div class="foot2"><h3>Copyright</h3></div>
140 |             <div class="foot3"><h3>SNS</h3></div>
141 |         </footer>
142 |         <!-- //footer -->
143 |     </div>
144 |     <!-- //wrap -->
145 | </body>
146 | </html>
147 | 
148 | 
149 | 
150 | 
151 | 
152 | 
153 | 
154 | 
155 | 
156 | 
157 | 
158 | 
159 | 
160 | 
161 | 
162 | 
163 | 
164 | 
165 | 
166 | 
167 | 
168 | 
169 | 
170 | 
171 | 
172 | 
173 | 
174 | 
175 | 
176 | 
177 | 
178 | 
179 | 
180 | 
181 | 
182 | 
183 | 
184 | 
185 | 
186 | 
187 | 
188 | 
189 | 
190 | 
191 | 
192 |
193 |
194 | 195 |
196 | 
/* reset */
197 | * {margin: 0; padding: 0;}
198 | .clearfix::before, .clearfix::after {display: block; content: ''; clear: both;}
199 | 
200 | /* 레이아웃 */
201 | #wrap {width: 1200px; margin: 0 auto;}
202 | 
203 | /* header */
204 | #header {}
205 | #header .logo {float: left; width: 250px; height: 100px; background: #888;}
206 | #header .nav {float: left; width: 950px; height: 100px; background: #777;}
207 | 
208 | /* banner */
209 | #banner {height: 300px; background: #666;}
210 | 
211 | /* contents */
212 | #contents {}
213 | #contents > div {float: left; width: 400px; height: 200px;}
214 | #contents > div.cont1 {background: #555;}
215 | #contents > div.cont2 {background: #444;}
216 | #contents > div.cont3 {background: #333;}
217 | 
218 | /* footer */
219 | #footer {}
220 | #footer .foot1 {float: left; width: 200px; height: 100px; background: #888;}
221 | #footer .foot2 {float: left; width: 800px; height: 100px; background: #777;}
222 | #footer .foot3 {float: left; width: 200px; height: 100px; background: #666;}
223 | 
224 | 
225 | 
226 | 
227 | 
228 | 
229 | 
230 | 
231 | 
232 | 
233 | 
234 | 
235 | 
236 | 
237 | 
238 | 
239 | 
240 | 
241 | 
242 | 
243 | 
244 | 
245 | 
246 | 
247 | 
248 | 
249 | 
250 | 
251 | 
252 | 
253 | 
254 | 
255 | 
256 | 
257 | 
258 | 
259 | 
260 | 
261 | 
262 | 
263 | 
264 | 
265 | 
266 | 
267 | 
268 | 
269 | 
270 | 
271 | 
272 | 
273 | 
274 | 
275 | 
276 | 
277 | 
278 |
279 |
280 | 281 | 282 |
283 |
284 |
285 | 286 |
287 | -------------------------------------------------------------------------------- /sample/sample267.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 |
6 |
7 |
8 |
9 | 14 |
15 |
16 |
17 |

18 | 웹 디자인 기능사 실기 합격을 위한 영상입니다.
19 | 따라하면 누구나 딸 수 있는 자격증입니다.
20 | 끝까지 완주하시고 자격증 꼭 취득하세요^^ 21 |

22 |
23 |

24 | 25 | 26 | 32 | 35 |

36 | 37 |
38 | 39 |
40 |

41 | 사용프로그램
42 | brackets GO 43 |

44 |
45 |

46 | 샘플 보기 GO
47 | 소스 다운로드 GO
48 |

49 |
50 | 51 |

인스타그램 보기 GO

52 |

포폴 만들기 스터디 모임 GO

53 |
54 | 55 |

56 | 도움이 되셨다면 구독과 좋아요!! click
57 | 모르거나 궁금한 사항은 언제든지 댓글로 부탁드립니다.
58 | 댓글은 영상을 제작하는데 많은 힘이 됩니다.
59 | 다 보셨으면. 꼭! 댓글 부탁드립니다. 60 |

61 |
62 | 63 | 64 |
65 | 66 |
67 |

68 | 공개자료
69 | 01A-1, 70 | 02A-2, 71 | 03A-3, 72 | 04A-4, 73 | 05B-1, 74 | 06B-2, 75 | 07B-3, 76 | 08B-4, 77 | 09C-1, 78 | 10C-2, 79 | 11C-3, 80 | 12C-4
81 |

82 |
83 |

84 | 웹 퍼블리셔가 되기 위한 튜토리얼 순서
85 | 1. 웹 표준 사이트 만들기(2019) GO
86 | 2. 반응형 사이트 만들기(2019) GO
87 | 3. 메가박스 사이트 만들기(2019) - 디자인 GO
88 | 4. 메가박스 사이트 만들기(2019) - 코딩 GO
89 | ...추후 제공

90 | 91 | + 웹디자인 기능사 GO 92 |

93 | 94 |
95 | 96 |
97 |
98 |
99 |
100 | 101 |
102 |
103 |
104 | 108 |
109 |
110 | 
<!DOCTYPE html>
111 | <html>
112 | <head>
113 |     <meta charset="UTF-8">
114 |     <title>대한은행</title>
115 |     <link rel="stylesheet" href="css/style.css">
116 | </head>
117 | <body>
118 |     <div id="wrap" class="clearfix">
119 |         <aside id="side">
120 |             <h1 class="logo">로고</h1>
121 |             <nav class="nav">메뉴</nav>
122 |         </aside>
123 |         <section id="content">
124 |             <section id="banner">
125 |                 <h2>이미지 슬라이드</h2>
126 |             </section>
127 |             <!-- //banner -->
128 |             
129 |             <section id="contents" class="clerafix">
130 |                 <div class="cont1"><h3>공지사항</h3></div>
131 |                 <div class="cont2"><h3>갤러리</h3></div>
132 |                 <div class="cont3"><h3>팝업</h3></div>
133 |             </section>
134 |             <!-- //contents -->
135 |             
136 |             <footer id="footer" class="clearfix">
137 |                 <div class="foot1"><h3>로고</h3></div>
138 |                 <div class="foot2"><h3>하단메뉴</h3></div>
139 |                 <div class="foot3"><h3>Copyright</h3></div>
140 |             </footer>
141 |             <!-- //contents -->
142 |         </section>
143 |     </div>
144 | </body>
145 | </html>
146 | 
147 | 
148 | 
149 | 
150 | 
151 | 
152 |  
153 | 
154 | 
155 | 
156 | 
157 | 
158 | 
159 | 
160 | 
161 | 
162 | 
163 | 
164 | 
165 | 
166 | 
167 | 
168 | 
169 | 
170 | 
171 | 
172 | 
173 | 
174 | 
175 | 
176 | 
177 | 
178 | 
179 | 
180 | 
181 | 
182 | 
183 | 
184 | 
185 | 
186 | 
187 | 
188 | 
189 | 
190 | 
191 | 
192 | 
193 | 
194 | 
195 | 
196 | 
197 | 
198 |
199 |
200 | 201 |
202 | 
/* reset */
203 | * {margin: 0; padding: 0;}
204 | .clearfix::before, .clearfix::after {display: block; content: ''; clear: both;}
205 | 
206 | /* 레이아웃 */
207 | #wrap {width: 1200px; margin: 0 auto;}
208 | #side {float:left; width: 300px; height: 850px; background: #ccc;}
209 | #content {float: left; width: 900px; height: 850px; background: #ddd;}
210 | 
211 | /* header */
212 | #side .logo {width: 300px; height: 150px; background: #999;}
213 | #side .nav {width: 300px; height: 700px; background: #888;}
214 | 
215 | /* banner */
216 | #banner {width: 900px; height: 450px; background: #777;}
217 | 
218 | /* contents */
219 | #contents {}
220 | #contents > div {float: left; width: 33.33333%; height: 300px;}
221 | #contents > div.cont1 {background: #666;}
222 | #contents > div.cont2 {background: #555;}
223 | #contents > div.cont3 {background: #444;}
224 | 
225 | /* footer */
226 | #footer {}
227 | #footer .foot1 {float: left; width: 200px; height: 100px; background: #333;}
228 | #footer .foot2 {float: left; width: 700px; height: 50px; background: #222;}
229 | #footer .foot3 {float: left; width: 700px; height: 50px; background: #111;}
230 | 
231 | 
232 | 
233 | 
234 | 
235 | 
236 | 
237 | 
238 | 
239 | 
240 | 
241 | 
242 | 
243 | 
244 | 
245 | 
246 | 
247 | 
248 | 
249 | 
250 | 
251 | 
252 | 
253 | 
254 | 
255 | 
256 | 
257 | 
258 | 
259 | 
260 | 
261 | 
262 | 
263 | 
264 | 
265 | 
266 | 
267 | 
268 | 
269 | 
270 | 
271 | 
272 | 
273 | 
274 | 
275 | 
276 | 
277 | 
278 | 
279 | 
280 | 
281 | 
282 | 
283 | 
284 | 
285 | 
286 | 
287 | 
288 | 
289 | 
290 | 
291 | 
292 | 
293 | 
294 | 
295 |
296 |
297 | 298 | 299 |
300 |
301 |
302 | 303 |
304 | -------------------------------------------------------------------------------- /sample/sample274.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 |
6 |
7 |
8 |
9 | 15 |
16 |
17 |
18 |

19 | 웹 디자인 기능사 실기 합격을 위한 영상입니다.
20 | 따라하면 누구나 딸 수 있는 자격증입니다.
21 | 끝까지 완주하시고 자격증 꼭 취득하세요^^ 22 |

23 |
24 |

25 | 26 | 27 | 33 | 36 |

37 | 38 |
39 | 40 |
41 |

42 | 사용프로그램
43 | brackets GO 44 |

45 |
46 |

47 | 샘플 보기 GO
48 | 소스 다운로드 GO
49 |

50 |
51 | 52 |

인스타그램 보기 GO

53 |

포폴 만들기 스터디 모임 GO

54 |
55 | 56 |

57 | 도움이 되셨다면 구독과 좋아요!! click
58 | 모르거나 궁금한 사항은 언제든지 댓글로 부탁드립니다.
59 | 댓글은 영상을 제작하는데 많은 힘이 됩니다.
60 | 다 보셨으면. 꼭! 댓글 부탁드립니다. 61 |

62 |
63 | 64 | 65 |
66 | 67 |
68 |

69 | 공개자료
70 | 01A-1, 71 | 02A-2, 72 | 03A-3, 73 | 04A-4, 74 | 05B-1, 75 | 06B-2, 76 | 07B-3, 77 | 08B-4, 78 | 09C-1, 79 | 10C-2, 80 | 11C-3, 81 | 12C-4
82 |

83 |
84 |

85 | 웹 퍼블리셔가 되기 위한 튜토리얼 순서
86 | 1. 웹 표준 사이트 만들기(2019) GO
87 | 2. 반응형 사이트 만들기(2019) GO
88 | 3. 메가박스 사이트 만들기(2019) - 디자인 GO
89 | 4. 메가박스 사이트 만들기(2019) - 코딩 GO
90 | ...추후 제공

91 | 92 | + 웹디자인 기능사 GO 93 |

94 | 95 |
96 | 97 |
98 |

99 | 샘플
100 | 레이아웃 유형1 GO
101 | 레이아웃 유형2 GO
102 | 가로유형1 GO
103 | 가로유형2 GO
104 | 가로유형3 GO
105 | 세로유형1 GO
106 | 세로유형2 GO
107 | 탭메뉴유형 GO
108 | 레이어팝업유형 GO
109 |

110 |
111 | 112 |
113 |
114 |
115 |
116 | 117 |
118 |
119 |
120 | 126 |
127 |
128 | 
<!DOCTYPE html>
129 | <html lang="ko">
130 | <head>
131 |     <meta charset="UTF-8">
132 |     <title>웹 디자인 기능사</title>
133 | 
134 |     <style>
135 |         /* reset */
136 |         * {margin: 0; padding: 0; font-size: 24px; font-weight: bold; color: #fff;}
137 |         a {color: #333; text-decoration: none;}
138 |         li {list-style: none;}
139 |         table {border-spacing: 0;}
140 |         .clearfix::before, .clearfix::after {display: block; content:''; clear:both;}
141 |         
142 |         #wrap {width: 1200px; margin: 0px auto;}
143 |         
144 |         /* header */
145 |         #header {text-align: center;}
146 |         #header .logo {float: left; width:250px; height:100px; line-height: 100px; background: #d1c4e9;}
147 |         #header .nav {float: right; width:950px; height:100px; line-height: 100px; background: #b39ddb;}
148 | 
149 |         /* banner */
150 |         #banner {text-align: center; height: 400px; line-height: 400px; background: #9575cd;}
151 | 
152 |         /* contents */
153 |         #contents {text-align: center;}
154 |         #contents > div {float: left; width: 33.333333%; height: 247px; line-height: 247px;}
155 |         #contents > div.cont1 {background: #7e57c2;}
156 |         #contents > div.cont2 {background: #673ab7;}
157 |         #contents > div.cont3 {background: #5e35b1 ;}
158 | 
159 |         /* footer */
160 |         #footer {height: 100px; line-height: 100px; text-align: center; }
161 |         #footer .foot1 {float: left; width: 200px; background: #5e35b1;}
162 |         #footer .foot2 {float: left; width: 800px; background: #512da8;}
163 |         #footer .foot3 {float: left; width: 200px; background: #4527a0;}
164 |         
165 |         /****** 레이어 팝업 *******/
166 |         .layer { }
167 | 
168 |     </style>
169 | </head>
170 | <body>
171 |     
172 |     <div id="wrap">
173 |         <header id="header" class="clearfix">
174 |             <h1 class="logo">로고</h1>
175 |             <nav class="nav">메뉴</nav>
176 |         </header>
177 |         <!-- //header -->
178 | 
179 |         <section id="banner">
180 |             <h2>이미지 슬라이드</h2>
181 |         </section>
182 |         <!-- //banner -->
183 | 
184 |         <section id="contents" class="clearfix">
185 |             <div class="cont1"><h3>공지사항</h3></div>
186 |             <div class="cont2"><h3>갤러리</h3></div>
187 |             <div class="cont3"><h3 class="layerPopup">팝업</h3></div>
188 |         </section>
189 |         <!-- //contents -->
190 | 
191 |         <footer id="footer">
192 |             <div class="foot1"><h3>로고</h3></div>
193 |             <div class="foot2"><h3>Copyright</h3></div>
194 |             <div class="foot3"><h3>SNS</h3></div>
195 |         </footer>
196 |         <!-- //footer -->
197 |     </div>
198 |     
199 |     <!----- 레이어 팝업 ------>
200 |     
201 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
202 |     <script>
203 | 
204 |     </script>
205 | </body>
206 | 
207 | </html>
208 | 
209 | 
210 | 
211 | 
212 | 
213 | 
214 | 
215 | 
216 | 
217 | 
218 |  
219 | 
220 | 
221 | 
222 | 
223 | 
224 | 
225 | 
226 | 
227 | 
228 | 
229 | 
230 | 
231 | 
232 | 
233 | 
234 | 
235 | 
236 | 
237 | 
238 | 
239 | 
240 | 
241 | 
242 | 
243 | 
244 | 
245 | 
246 | 
247 | 
248 | 
249 | 
250 | 
251 | 
252 | 
253 | 
254 | 
255 | 
256 | 
257 | 
258 | 
259 | 
260 | 
261 | 
262 | 
263 | 
264 |
265 |
266 | 267 |
268 | 
<div id="wrap">
269 |     <header id="header" class="clearfix">
270 |         <h1 class="logo">로고</h1>
271 |         <nav class="nav">메뉴</nav>
272 |     </header>
273 |     <!-- //header -->
274 | 
275 |     <section id="banner">
276 |         <h2>이미지 슬라이드</h2>
277 |     </section>
278 |     <!-- //banner -->
279 | 
280 |     <section id="contents" class="clearfix">
281 |         <div class="cont1"><h3>공지사항</h3></div>
282 |         <div class="cont2"><h3>갤러리</h3></div>
283 |         <div class="cont3"><h3 class="layerPopup">팝업</h3></div>
284 |     </section>
285 |     <!-- //contents -->
286 | 
287 |     <footer id="footer">
288 |         <div class="foot1"><h3>로고</h3></div>
289 |         <div class="foot2"><h3>Copyright</h3></div>
290 |         <div class="foot3"><h3>SNS</h3></div>
291 |     </footer>
292 |     <!-- //footer -->
293 | </div>
294 | 
295 | <!----- 레이어 팝업 ------>
296 | <div class="layer-bg"></div>
297 | <div class="layer">
298 |     <h2>타이틀</h2>
299 |     <a href="#" class="close">닫기</a>
300 | </div>
301 | 
302 | 
303 | 
304 | 
305 | 
306 | 
307 | 
308 | 
309 | 
310 | 
311 | 
312 | 
313 | 
314 | 
315 | 
316 | 
317 | 
318 | 
319 | 
320 | 
321 | 
322 | 
323 | 
324 | 
325 | 
326 | 
327 | 
328 | 
329 | 
330 | 
331 | 
332 | 
333 | 
334 | 
335 | 
336 | 
337 | 
338 | 
339 | 
340 | 
341 | 
342 | 
343 | 
344 | 
345 | 
346 | 
347 | 
348 | 
349 | 
350 | 
351 | 
352 | 
353 | 
354 | 
355 | 
356 | 
357 | 
358 | 
359 | 
360 | 
361 | 
362 | 
363 | 
364 | 
365 |
366 |
367 | 368 | 369 |
370 | 
/* reset */
371 | * {margin: 0; padding: 0; font-size: 24px; font-weight: bold; color: #fff;}
372 | a {color: #333; text-decoration: none;}
373 | li {list-style: none;}
374 | table {border-spacing: 0;}
375 | .clearfix::before, .clearfix::after {display: block; content:''; clear:both;}
376 | 
377 | #wrap {width: 1200px; margin: 0px auto;}
378 | 
379 | /* header */
380 | #header {text-align: center;}
381 | #header .logo {float: left; width:250px; height:100px; line-height: 100px; background: #d1c4e9;}
382 | #header .nav {float: right; width:950px; height:100px; line-height: 100px; background: #b39ddb;}
383 | 
384 | /* banner */
385 | #banner {text-align: center; height: 400px; line-height: 400px; background: #9575cd;}
386 | 
387 | /* contents */
388 | #contents {text-align: center;}
389 | #contents > div {float: left; width: 33.333333%; height: 247px; line-height: 247px;}
390 | #contents > div.cont1 {background: #7e57c2;}
391 | #contents > div.cont2 {background: #673ab7;}
392 | #contents > div.cont3 {background: #5e35b1 ;}
393 | 
394 | /* footer */
395 | #footer {height: 100px; line-height: 100px; text-align: center;}
396 | #footer .foot1 {float: left; width: 200px; background: #5e35b1;}
397 | #footer .foot2 {float: left; width: 800px; background: #512da8;}
398 | #footer .foot3 {float: left; width: 200px; background: #4527a0;}
399 | 
400 | /****** 레이어 팝업 *******/
401 | .layer {
402 |     display: none;
403 |     width: 500px; height: 500px; background: #fff;
404 |     border: 2px solid #000;
405 |     position: absolute;
406 |     left: 50%; top: 50%; z-index: 1000;
407 |     margin-left: -250px; margin-top: -250px;
408 | }
409 | .layer h2 {padding: 20px; color: #000;}
410 | .layer .close {position: absolute; bottom: 20px; right: 20px;}
411 | .layer-bg {
412 |     display: none;
413 |     width: 100%; height: 100%; background: rgba(0,0,0,0.6);
414 |     position: absolute; left: 0; top: 0; z-index: 500;
415 | }
416 | 
417 | 
418 | 
419 | 
420 | 
421 | 
422 | 
423 | 
424 | 
425 | 
426 | 
427 | 
428 | 
429 | 
430 | 
431 | 
432 | 
433 | 
434 | 
435 | 
436 | 
437 | 
438 | 
439 | 
440 | 
441 | 
442 | 
443 | 
444 | 
445 | 
446 | 
447 | 
448 | 
449 | 
450 | 
451 | 
452 | 
453 | 
454 | 
455 | 
456 | 
457 | 
458 | 
459 | 
460 | 
461 | 
462 | 
463 | 
464 | 
465 | 
466 | 
467 | 
468 | 
469 | 
470 | 
471 | 
472 | 
473 | 
474 | 
475 | 
476 | 
477 | 
478 | 
479 | 
480 | 
481 |
482 |
483 | 484 | 485 |
486 | 
$(".layerPopup").click(function(){
487 |     //$(".layer").css("display","block");
488 |     $(".layer").show();
489 |     $(".layer-bg ").show();
490 | });
491 | $(".layer .close").click(function(){
492 |     //$(".layer").css("display","none");
493 |     $(".layer").hide();
494 |     $(".layer-bg ").hide();
495 | });
496 | 
497 | 
498 | 
499 | 
500 | 
501 | 
502 | 
503 | 
504 | 
505 | 
506 | 
507 | 
508 | 
509 | 
510 | 
511 | 
512 | 
513 | 
514 | 
515 | 
516 | 
517 | 
518 | 
519 | 
520 | 
521 | 
522 | 
523 | 
524 | 
525 | 
526 | 
527 | 
528 | 
529 | 
530 | 
531 | 
532 | 
533 | 
534 | 
535 | 
536 | 
537 | 
538 | 
539 | 
540 | 
541 | 
542 | 
543 | 
544 | 
545 | 
546 | 
547 | 
548 | 
549 | 
550 | 
551 | 
552 | 
553 | 
554 | 
555 | 
556 | 
557 | 
558 | 
559 | 
560 |
561 |
562 | 563 | 564 |
565 |
566 |
567 | 568 |
569 | -------------------------------------------------------------------------------- /sample/sample275.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 |
6 |
7 |
8 |
9 | 15 |
16 |
17 |
18 |

19 | 웹 디자인 기능사 실기 합격을 위한 영상입니다.
20 | 따라하면 누구나 딸 수 있는 자격증입니다.
21 | 끝까지 완주하시고 자격증 꼭 취득하세요^^ 22 |

23 |
24 |

25 | 26 | 27 | 33 | 36 |

37 | 38 |
39 | 40 |
41 |

42 | 사용프로그램
43 | brackets GO 44 |

45 |
46 |

47 | 샘플 보기 GO
48 | 소스 다운로드 GO
49 |

50 |
51 | 52 |

인스타그램 보기 GO

53 |

포폴 만들기 스터디 모임 GO

54 |
55 | 56 |

57 | 도움이 되셨다면 구독과 좋아요!! click
58 | 모르거나 궁금한 사항은 언제든지 댓글로 부탁드립니다.
59 | 댓글은 영상을 제작하는데 많은 힘이 됩니다.
60 | 다 보셨으면. 꼭! 댓글 부탁드립니다. 61 |

62 |
63 | 64 | 65 |
66 | 67 |
68 |

69 | 공개자료
70 | 01A-1, 71 | 02A-2, 72 | 03A-3, 73 | 04A-4, 74 | 05B-1, 75 | 06B-2, 76 | 07B-3, 77 | 08B-4, 78 | 09C-1, 79 | 10C-2, 80 | 11C-3, 81 | 12C-4
82 |

83 |
84 |

85 | 웹 퍼블리셔가 되기 위한 튜토리얼 순서
86 | 1. 웹 표준 사이트 만들기(2019) GO
87 | 2. 반응형 사이트 만들기(2019) GO
88 | 3. 메가박스 사이트 만들기(2019) - 디자인 GO
89 | 4. 메가박스 사이트 만들기(2019) - 코딩 GO
90 | ...추후 제공

91 | 92 | + 웹디자인 기능사 GO 93 |

94 | 95 |
96 | 97 |
98 |

99 | 샘플
100 | 레이아웃 유형1 GO
101 | 레이아웃 유형2 GO
102 | 가로유형1 GO
103 | 가로유형2 GO
104 | 가로유형3 GO
105 | 세로유형1 GO
106 | 세로유형2 GO
107 | 탭메뉴유형 GO
108 | 레이어팝업유형 GO
109 | 이미지 슬라이드유형1 GO
110 | 이미지 슬라이드유형2 GO
111 | 이미지 슬라이드유형3 GO
112 |

113 |
114 | 115 |
116 |
117 |
118 |
119 | 120 |
121 |
122 |
123 | 129 |
130 |
131 | 
<!DOCTYPE html>
132 | <html lang="ko">
133 | <head>
134 |     <meta charset="UTF-8">
135 |     <title>웹 디자인 기능사</title>
136 | 
137 |     <style>
138 |         /* reset */
139 |         * {margin: 0; padding: 0; font-size: 24px; font-weight: bold; color: #fff;}
140 |         a {color: #333; text-decoration: none;}
141 |         li {list-style: none;}
142 |         table {border-spacing: 0;}
143 |         .clearfix::before, .clearfix::after {display: block; content:''; clear:both;}
144 |         
145 |         #wrap {width: 1200px; margin: 0px auto;}
146 |         
147 |         /* header */
148 |         #header {text-align: center;}
149 |         #header .logo {float: left; width:250px; height:100px; line-height: 100px; background: #d1c4e9;}
150 |         #header .nav {float: right; width:950px; height:100px; line-height: 100px; background: #b39ddb;}
151 | 
152 |         /* banner */
153 |         #banner { }
154 | 
155 |         /* contents */
156 |         #contents {text-align: center;}
157 |         #contents > div {float: left; width: 33.333333%; height: 247px; line-height: 247px;}
158 |         #contents > div.cont1 {background: #7e57c2;}
159 |         #contents > div.cont2 {background: #673ab7;}
160 |         #contents > div.cont3 {background: #5e35b1;}
161 | 
162 |         /* footer */
163 |         #footer {height: 100px; line-height: 100px; text-align: center;}
164 |         #footer .foot1 {float: left; width: 200px; background: #5e35b1;}
165 |         #footer .foot2 {float: left; width: 800px; background: #512da8;}
166 |         #footer .foot3 {float: left; width: 200px; background: #4527a0;}
167 |     </style>
168 | </head>
169 | <body>
170 |     
171 |     <div id="wrap">
172 |         <header id="header" class="clearfix">
173 |             <h1 class="logo">로고</h1>
174 |             <nav class="nav">메뉴</nav>
175 |         </header>
176 |         <!-- //header -->
177 | 
178 |         <section id="banner">
179 | 
180 |         </section>
181 |         <!-- //banner -->
182 | 
183 |         <section id="contents" class="clearfix">
184 |             <div class="cont1"><h3>공지사항</h3></div>
185 |             <div class="cont2"><h3>갤러리</h3></div>
186 |             <div class="cont3"><h3 class="layerPopup">팝업</h3></div>
187 |         </section>
188 |         <!-- //contents -->
189 | 
190 |         <footer id="footer">
191 |             <div class="foot1"><h3>로고</h3></div>
192 |             <div class="foot2"><h3>Copyright</h3></div>
193 |             <div class="foot3"><h3>SNS</h3></div>
194 |         </footer>
195 |         <!-- //footer -->
196 |     </div>
197 |     
198 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
199 |     <script>
200 | 
201 |     </script>
202 | </body>
203 | 
204 | </html>
205 | 
206 | 
207 | 
208 | 
209 | 
210 | 
211 | 
212 | 
213 | 
214 | 
215 | 
216 |  
217 | 
218 | 
219 | 
220 | 
221 | 
222 | 
223 | 
224 | 
225 | 
226 | 
227 | 
228 | 
229 | 
230 | 
231 | 
232 | 
233 | 
234 | 
235 | 
236 | 
237 | 
238 | 
239 | 
240 | 
241 | 
242 | 
243 | 
244 | 
245 | 
246 | 
247 | 
248 | 
249 | 
250 | 
251 | 
252 | 
253 | 
254 | 
255 | 
256 | 
257 | 
258 | 
259 | 
260 | 
261 | 
262 |
263 |
264 | 265 |
266 | 
<div id="wrap">
267 |     <header id="header" class="clearfix">
268 |         <h1 class="logo">로고</h1>
269 |         <nav class="nav">메뉴</nav>
270 |     </header>
271 |     <!-- //header -->
272 | 
273 |     <section id="banner">
274 |         <div class="slideList">
275 |             <div class="slideImg">
276 |                 <h2>이미지1</h2>
277 |                 <img src="img/ban01.jpg" alt="이미지1">
278 |             </div>
279 |             <div class="slideImg">
280 |                 <h2>이미지2</h2>
281 |                 <img src="img/ban02.jpg" alt="이미지2">
282 |             </div>
283 |             <div class="slideImg">
284 |                 <h2>이미지3</h2>
285 |                 <img src="img/ban03.jpg" alt="이미지3">
286 |             </div>
287 |         </div> 
288 |     </section>
289 |     <!-- //banner -->
290 | 
291 |     <section id="contents" class="clearfix">
292 |         <div class="cont1"><h3>공지사항</h3></div>
293 |         <div class="cont2"><h3>갤러리</h3></div>
294 |         <div class="cont3"><h3 class="layerPopup">팝업</h3></div>
295 |     </section>
296 |     <!-- //contents -->
297 | 
298 |     <footer id="footer">
299 |         <div class="foot1"><h3>로고</h3></div>
300 |         <div class="foot2"><h3>Copyright</h3></div>
301 |         <div class="foot3"><h3>SNS</h3></div>
302 |     </footer>
303 |     <!-- //footer -->
304 | </div>
305 | 
306 | 
307 | 
308 | 
309 | 
310 | 
311 | 
312 | 
313 | 
314 | 
315 | 
316 | 
317 | 
318 | 
319 | 
320 | 
321 | 
322 | 
323 | 
324 | 
325 | 
326 | 
327 | 
328 | 
329 | 
330 | 
331 | 
332 | 
333 | 
334 | 
335 | 
336 | 
337 | 
338 | 
339 | 
340 | 
341 | 
342 | 
343 | 
344 | 
345 | 
346 | 
347 | 
348 | 
349 | 
350 | 
351 | 
352 | 
353 | 
354 | 
355 | 
356 | 
357 | 
358 | 
359 | 
360 | 
361 | 
362 | 
363 | 
364 | 
365 | 
366 | 
367 | 
368 | 
369 |
370 |
371 | 372 | 373 |
374 | 
/* reset */
375 | * {margin: 0; padding: 0; font-size: 24px; font-weight: bold; color: #fff;}
376 | a {color: #333; text-decoration: none;}
377 | li {list-style: none;}
378 | table {border-spacing: 0;}
379 | .clearfix::before, .clearfix::after {display: block; content:''; clear:both;}
380 | 
381 | #wrap {width: 1200px; margin: 0px auto;}
382 | 
383 | /* header */
384 | #header {text-align: center;}
385 | #header .logo {float: left; width:250px; height:100px; line-height: 100px; background: #d1c4e9;}
386 | #header .nav {float: right; width:950px; height:100px; line-height: 100px; background: #b39ddb;}
387 | 
388 | /* banner */
389 | #banner {width: 1200px; text-align: center; height: 360px; overflow: hidden;}
390 | 
391 | /* slider */
392 | .slideList {position: relative; width: 1200px; height: 360px;}
393 | .slideList .slideImg {position: relative;}
394 | .slideList .slideImg h2 {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); background: rgba(255,255,255,0.5); padding: 10px 30px; border-radius: 25px;}
395 | .slideList .slideImg img {display: block;}
396 | 
397 | /* contents */
398 | #contents {text-align: center;}
399 | #contents > div {float: left; width: 33.333333%; height: 247px; line-height: 247px;}
400 | #contents > div.cont1 {background: #7e57c2;}
401 | #contents > div.cont2 {background: #673ab7;}
402 | #contents > div.cont3 {background: #5e35b1;}
403 | 
404 | /* footer */
405 | #footer {height: 100px; line-height: 100px; text-align: center;}
406 | #footer .foot1 {float: left; width: 200px; background: #5e35b1;}
407 | #footer .foot2 {float: left; width: 800px; background: #512da8;}
408 | #footer .foot3 {float: left; width: 200px; background: #4527a0;}
409 | 
410 | 
411 | 
412 | 
413 | 
414 | 
415 | 
416 | 
417 | 
418 | 
419 | 
420 | 
421 | 
422 | 
423 | 
424 | 
425 | 
426 | 
427 | 
428 | 
429 | 
430 | 
431 | 
432 | 
433 | 
434 | 
435 | 
436 | 
437 | 
438 | 
439 | 
440 | 
441 | 
442 | 
443 | 
444 | 
445 | 
446 | 
447 | 
448 | 
449 | 
450 | 
451 | 
452 | 
453 | 
454 | 
455 | 
456 | 
457 | 
458 | 
459 | 
460 | 
461 | 
462 | 
463 | 
464 | 
465 | 
466 | 
467 | 
468 | 
469 | 
470 | 
471 | 
472 | 
473 | 
474 |
475 |
476 | 477 | 478 |
479 | 
var currentIndex = 0;
480 | 
481 | setInterval(function(){
482 |     if(currentIndex < 2){
483 |         currentIndex++;
484 |     } else {
485 |         currentIndex = 0;
486 |     }
487 |     var slidePosition = currentIndex * (-360)+"px";
488 | 
489 |     $(".slideList").animate({ top: slidePosition},400);
490 | },3000);
491 | 
492 | 
493 | 
494 | 
495 | 
496 | 
497 | 
498 | 
499 | 
500 | 
501 | 
502 | 
503 | 
504 | 
505 | 
506 | 
507 | 
508 | 
509 | 
510 | 
511 | 
512 | 
513 | 
514 | 
515 | 
516 | 
517 | 
518 | 
519 | 
520 | 
521 | 
522 | 
523 | 
524 | 
525 | 
526 | 
527 | 
528 | 
529 | 
530 | 
531 | 
532 | 
533 | 
534 | 
535 | 
536 | 
537 | 
538 | 
539 | 
540 | 
541 | 
542 | 
543 | 
544 | 
545 | 
546 | 
547 | 
548 | 
549 | 
550 | 
551 | 
552 | 
553 | 
554 | 
555 |
556 |
557 | 558 | 559 |
560 |
561 |
562 | 563 |
564 | -------------------------------------------------------------------------------- /sample/sample276.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 |
6 |
7 |
8 |
9 | 15 |
16 |
17 |
18 |

19 | 웹 디자인 기능사 실기 합격을 위한 영상입니다.
20 | 따라하면 누구나 딸 수 있는 자격증입니다.
21 | 끝까지 완주하시고 자격증 꼭 취득하세요^^ 22 |

23 |
24 |

25 | 26 | 27 | 33 | 36 |

37 | 38 |
39 | 40 |
41 |

42 | 사용프로그램
43 | brackets GO 44 |

45 |
46 |

47 | 샘플 보기 GO
48 | 소스 다운로드 GO
49 |

50 |
51 | 52 |

인스타그램 보기 GO

53 |

포폴 만들기 스터디 모임 GO

54 |
55 | 56 |

57 | 도움이 되셨다면 구독과 좋아요!! click
58 | 모르거나 궁금한 사항은 언제든지 댓글로 부탁드립니다.
59 | 댓글은 영상을 제작하는데 많은 힘이 됩니다.
60 | 다 보셨으면. 꼭! 댓글 부탁드립니다. 61 |

62 |
63 | 64 | 65 |
66 | 67 |
68 |

69 | 공개자료
70 | 01A-1, 71 | 02A-2, 72 | 03A-3, 73 | 04A-4, 74 | 05B-1, 75 | 06B-2, 76 | 07B-3, 77 | 08B-4, 78 | 09C-1, 79 | 10C-2, 80 | 11C-3, 81 | 12C-4
82 |

83 |
84 |

85 | 웹 퍼블리셔가 되기 위한 튜토리얼 순서
86 | 1. 웹 표준 사이트 만들기(2019) GO
87 | 2. 반응형 사이트 만들기(2019) GO
88 | 3. 메가박스 사이트 만들기(2019) - 디자인 GO
89 | 4. 메가박스 사이트 만들기(2019) - 코딩 GO
90 | ...추후 제공

91 | 92 | + 웹디자인 기능사 GO 93 |

94 | 95 |
96 | 97 |
98 |

99 | 샘플
100 | 레이아웃 유형1 GO
101 | 레이아웃 유형2 GO
102 | 가로유형1 GO
103 | 가로유형2 GO
104 | 가로유형3 GO
105 | 세로유형1 GO
106 | 세로유형2 GO
107 | 탭메뉴유형 GO
108 | 레이어팝업유형 GO
109 | 이미지 슬라이드유형1 GO
110 | 이미지 슬라이드유형2 GO
111 | 이미지 슬라이드유형3 GO
112 |

113 |
114 | 115 |
116 |
117 |
118 |
119 | 120 |
121 |
122 |
123 | 129 |
130 |
131 | 
<!DOCTYPE html>
132 | <html lang="ko">
133 | <head>
134 |     <meta charset="UTF-8">
135 |     <title>웹 디자인 기능사</title>
136 | 
137 |     <style>
138 |         /* reset */
139 |         * {margin: 0; padding: 0; font-size: 24px; font-weight: bold; color: #fff;}
140 |         a {color: #333; text-decoration: none;}
141 |         li {list-style: none;}
142 |         table {border-spacing: 0;}
143 |         .clearfix::before, .clearfix::after {display: block; content:''; clear:both;}
144 |         
145 |         #wrap {width: 1200px; margin: 0px auto;}
146 |         
147 |         /* header */
148 |         #header {text-align: center;}
149 |         #header .logo {float: left; width:250px; height:100px; line-height: 100px; background: #d1c4e9;}
150 |         #header .nav {float: right; width:950px; height:100px; line-height: 100px; background: #b39ddb;}
151 | 
152 |         /* banner */
153 |         #banner { }
154 | 
155 |         /* contents */
156 |         #contents {text-align: center;}
157 |         #contents > div {float: left; width: 33.333333%; height: 247px; line-height: 247px;}
158 |         #contents > div.cont1 {background: #7e57c2;}
159 |         #contents > div.cont2 {background: #673ab7;}
160 |         #contents > div.cont3 {background: #5e35b1;}
161 | 
162 |         /* footer */
163 |         #footer {height: 100px; line-height: 100px; text-align: center; }
164 |         #footer .foot1 {float: left; width: 200px; background: #5e35b1;}
165 |         #footer .foot2 {float: left; width: 800px; background: #512da8;}
166 |         #footer .foot3 {float: left; width: 200px; background: #4527a0;}
167 |     </style>
168 | </head>
169 | <body>
170 |     
171 |     <div id="wrap">
172 |         <header id="header" class="clearfix">
173 |             <h1 class="logo">로고</h1>
174 |             <nav class="nav">메뉴</nav>
175 |         </header>
176 |         <!-- //header -->
177 | 
178 |         <section id="banner">
179 |             
180 |         </section>
181 |         <!-- //banner -->
182 | 
183 |         <section id="contents" class="clearfix">
184 |             <div class="cont1"><h3>공지사항</h3></div>
185 |             <div class="cont2"><h3>갤러리</h3></div>
186 |             <div class="cont3"><h3 class="layerPopup">팝업</h3></div>
187 |         </section>
188 |         <!-- //contents -->
189 | 
190 |         <footer id="footer">
191 |             <div class="foot1"><h3>로고</h3></div>
192 |             <div class="foot2"><h3>Copyright</h3></div>
193 |             <div class="foot3"><h3>SNS</h3></div>
194 |         </footer>
195 |         <!-- //footer -->
196 |     </div>
197 |     
198 |     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
199 |     <script>
200 |        
201 |     </script>
202 | </body>
203 | 
204 | </html>
205 | 
206 | 
207 | 
208 | 
209 | 
210 | 
211 | 
212 | 
213 | 
214 | 
215 | 
216 | 
217 |  
218 | 
219 | 
220 | 
221 | 
222 | 
223 | 
224 | 
225 | 
226 | 
227 | 
228 | 
229 | 
230 | 
231 | 
232 | 
233 | 
234 | 
235 | 
236 | 
237 | 
238 | 
239 | 
240 | 
241 | 
242 | 
243 | 
244 | 
245 | 
246 | 
247 | 
248 | 
249 | 
250 | 
251 | 
252 | 
253 | 
254 | 
255 | 
256 | 
257 | 
258 | 
259 | 
260 | 
261 | 
262 | 
263 |
264 |
265 | 266 |
267 | 
<div id="wrap">
268 |     <header id="header" class="clearfix">
269 |         <h1 class="logo">로고</h1>
270 |         <nav class="nav">메뉴</nav>
271 |     </header>
272 |     <!-- //header -->
273 | 
274 |     <section id="banner">
275 |         <div class="slideList">
276 |             <div class="slideImg">
277 |                 <h2>페이드 효과 이미지1</h2>
278 |                 <img src="img/ban01.jpg" alt="이미지1">
279 |             </div>
280 |             <div class="slideImg">
281 |                 <h2>페이드 효과 이미지2</h2>
282 |                 <img src="img/ban02.jpg" alt="이미지2">
283 |             </div>
284 |             <div class="slideImg">
285 |                 <h2>페이드 효과 이미지3</h2>
286 |                 <img src="img/ban03.jpg" alt="이미지3">
287 |             </div>
288 |         </div>
289 |     </section>
290 |     <!-- //banner -->
291 | 
292 |     <section id="contents" class="clearfix">
293 |         <div class="cont1"><h3>공지사항</h3></div>
294 |         <div class="cont2"><h3>갤러리</h3></div>
295 |         <div class="cont3"><h3 class="layerPopup">팝업</h3></div>
296 |     </section>
297 |     <!-- //contents -->
298 | 
299 |     <footer id="footer">
300 |         <div class="foot1"><h3>로고</h3></div>
301 |         <div class="foot2"><h3>Copyright</h3></div>
302 |         <div class="foot3"><h3>SNS</h3></div>
303 |     </footer>
304 |     <!-- //footer -->
305 | </div>
306 | 
307 | 
308 | 
309 | 
310 | 
311 | 
312 | 
313 | 
314 | 
315 | 
316 | 
317 | 
318 | 
319 | 
320 | 
321 | 
322 | 
323 | 
324 | 
325 | 
326 | 
327 | 
328 | 
329 | 
330 | 
331 | 
332 | 
333 | 
334 | 
335 | 
336 | 
337 | 
338 | 
339 | 
340 | 
341 | 
342 | 
343 | 
344 | 
345 | 
346 | 
347 | 
348 | 
349 | 
350 | 
351 | 
352 | 
353 | 
354 | 
355 | 
356 | 
357 | 
358 | 
359 | 
360 | 
361 | 
362 | 
363 | 
364 | 
365 | 
366 | 
367 | 
368 | 
369 | 
370 |
371 |
372 | 373 | 374 |
375 | 
 /* reset */
376 | * {margin: 0; padding: 0; font-size: 24px; font-weight: bold; color: #fff;}
377 | a {color: #333; text-decoration: none;}
378 | li {list-style: none;}
379 | table {border-spacing: 0;}
380 | .clearfix::before, .clearfix::after {display: block; content:''; clear:both;}
381 | 
382 | #wrap {width: 1200px; margin: 0px auto;}
383 | 
384 | /* header */
385 | #header {text-align: center;}
386 | #header .logo {float: left; width:250px; height:100px; line-height: 100px; background: #d1c4e9;}
387 | #header .nav {float: right; width:950px; height:100px; line-height: 100px; background: #b39ddb;}
388 | 
389 | /* banner */
390 | #banner {width: 1200px; text-align: center; height: 360px; overflow: overflow: hidden;}
391 | 
392 | /* slide */
393 | .slideList {position: relative; width: 1200px; height: 360px; overflow: hidden;}
394 | .slideList .slideImg {position: relative;}
395 | .slideList .slideImg h2 {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(255,255,255,0.5); padding: 10px 30px; border-radius: 25px;}
396 | .slideList .slideImg img {display: block;}
397 | 
398 | /* contents */
399 | #contents {text-align: center;}
400 | #contents > div {float: left; width: 33.333333%; height: 247px; line-height: 247px;}
401 | #contents > div.cont1 {background: #7e57c2;}
402 | #contents > div.cont2 {background: #673ab7;}
403 | #contents > div.cont3 {background: #5e35b1;}
404 | 
405 | /* footer */
406 | #footer {height: 100px; line-height: 100px; text-align: center;}
407 | #footer .foot1 {float: left; width: 200px; background: #5e35b1;}
408 | #footer .foot2 {float: left; width: 800px; background: #512da8;}
409 | #footer .foot3 {float: left; width: 200px; background: #4527a0;}
410 | 
411 | 
412 | 
413 | 
414 | 
415 | 
416 | 
417 | 
418 | 
419 | 
420 | 
421 | 
422 | 
423 | 
424 | 
425 | 
426 | 
427 | 
428 | 
429 | 
430 | 
431 | 
432 | 
433 | 
434 | 
435 | 
436 | 
437 | 
438 | 
439 | 
440 | 
441 | 
442 | 
443 | 
444 | 
445 | 
446 | 
447 | 
448 | 
449 | 
450 | 
451 | 
452 | 
453 | 
454 | 
455 | 
456 | 
457 | 
458 | 
459 | 
460 | 
461 | 
462 | 
463 | 
464 | 
465 | 
466 | 
467 | 
468 | 
469 | 
470 | 
471 | 
472 | 
473 | 
474 | 
475 |
476 |
477 | 478 | 479 |
480 | 
$(".slideList").children("div:gt(0)").hide();
481 | var current = 0;
482 | 
483 | setInterval(function(){
484 |     var next = (current+1) % 3;
485 |     $(".slideList").find("div").eq(current).fadeOut();
486 |     $(".slideList").find("div").eq(next).fadeIn();
487 |     current = next;
488 | },3000);
489 | 
490 | 
491 | 
492 | 
493 | 
494 | 
495 | 
496 | 
497 | 
498 | 
499 | 
500 | 
501 | 
502 | 
503 | 
504 | 
505 | 
506 | 
507 | 
508 | 
509 | 
510 | 
511 | 
512 | 
513 | 
514 | 
515 | 
516 | 
517 | 
518 | 
519 | 
520 | 
521 | 
522 | 
523 | 
524 | 
525 | 
526 | 
527 | 
528 | 
529 | 
530 | 
531 | 
532 | 
533 | 
534 | 
535 | 
536 | 
537 | 
538 | 
539 | 
540 | 
541 | 
542 | 
543 | 
544 | 
545 | 
546 | 
547 | 
548 | 
549 | 
550 | 
551 | 
552 | 
553 |
554 |
555 | 556 | 557 |
558 |
559 |
560 | 561 |
562 | -------------------------------------------------------------------------------- /sample/sample278.html: -------------------------------------------------------------------------------- 1 |
2 |
3 |
4 | 5 |
6 |
7 |
8 |
9 | 15 |
16 |
17 |
18 |

19 | 웹 디자인 기능사 실기 합격을 위한 영상입니다.
20 | 따라하면 누구나 딸 수 있는 자격증입니다.
21 | 끝까지 완주하시고 자격증 꼭 취득하세요^^ 22 |

23 |
24 |

25 | 29 | 30 |

31 |
32 | 33 |
34 |

35 | 사용프로그램
36 | brackets GO 37 |

38 |
39 |

40 | 샘플 보기 GO
41 | 소스 다운로드 GO
42 | 이미지 다운로드 GO
43 |

44 |
45 | 46 |

인스타그램 보기 GO

47 |

포폴 만들기 스터디 모임 GO

48 |
49 | 50 |

51 | 도움이 되셨다면 구독과 좋아요!! click
52 | 모르거나 궁금한 사항은 언제든지 댓글로 부탁드립니다.
53 | 댓글은 영상을 제작하는데 많은 힘이 됩니다.
54 | 다 보셨으면. 꼭! 댓글 부탁드립니다. 55 |

56 |
57 | 58 |
59 |

60 | 공개자료
61 | 01A-1, 62 | 02A-2, 63 | 03A-3, 64 | 04A-4, 65 | 05B-1, 66 | 06B-2, 67 | 07B-3, 68 | 08B-4, 69 | 09C-1, 70 | 10C-2, 71 | 11C-3, 72 | 12C-4
73 |

74 |
75 |

76 | 웹 퍼블리셔가 되기 위한 튜토리얼 순서
77 | 1. 웹 표준 사이트 만들기(2019) GO
78 | 2. 반응형 사이트 만들기(2019) GO
79 | 3. 메가박스 사이트 만들기(2019) - 디자인 GO
80 | 4. 메가박스 사이트 만들기(2019) - 코딩 GO
81 | ...추후 제공

82 | 83 | + 웹디자인 기능사 GO 84 |

85 | 86 |
87 | 88 |
89 |

90 | 샘플
91 | 레이아웃 유형1 GO
92 | 레이아웃 유형2 GO
93 | 가로유형1 GO
94 | 가로유형2 GO
95 | 가로유형3 GO
96 | 세로유형1 GO
97 | 세로유형2 GO
98 | 탭메뉴유형 GO
99 | 레이어팝업유형 GO
100 | 이미지 슬라이드유형1 GO
101 | 이미지 슬라이드유형2 GO
102 | 이미지 슬라이드유형3 GO
103 |

104 |
105 | 106 |
107 |
108 |
109 |
110 | 111 |
112 |
113 |
114 | 119 |
120 |
121 | 
<!DOCTYPE html>
122 | <html lang="ko">
123 | <head>
124 |     <meta charset="UTF-8">
125 |     <title>롯데월드</title>
126 | 
127 |     <!-- style -->
128 |     <link rel="stylesheet" href="css/style.css">
129 | </head>
130 | <body>
131 |     <div id="wrap">
132 |         <header id="header" class="clearfix">
133 |             <h1><a href="#"><img src="images/logo.jpg" alt="롯데월드"></a></h1>
134 |             <nav class="nav">
135 |                 <ul class="clearfix">
136 |                     <li><a href="#">즐길거리</a></li>
137 |                     <li><a href="#">요금/우대혜택</a></li>
138 |                     <li><a href="#">참여프로그램</a></li>
139 |                     <li><a href="#">이용가이드</a></li>
140 |                     <li><a href="#">소통서비스</a></li>
141 |                 </ul>
142 |             </nav>
143 |         </header>
144 |         <!-- //header -->
145 |         
146 |         <section id="banner">
147 |             <img src="images/banner01.jpg" alt="메리크리스마스">
148 |         </section>
149 |         <!-- //banner -->
150 |         
151 |         <section id="content1" class="clearfix">
152 |             <article class="notice">
153 |                 fff
154 |             </article>
155 |             <figure class="ad">
156 |                 <img src="images/ad.jpg" alt="온종일 혜택">
157 |             </figure>
158 |         </section>
159 |         <!-- //banner -->
160 |         
161 |         <section id="content2">
162 |             <h2>특별한 경험</h2>
163 |             <ul class="clearfix">
164 |                 <li>
165 |                     <a href="#">
166 |                         <img src="images/s1.jpg" alt="연간회원안내">
167 |                         <span>연간회원안내</span>
168 |                     </a>
169 |                 </li>
170 |                 <li>
171 |                     <a href="#">
172 |                         <img src="images/s2.jpg" alt="연간회원안내">
173 |                         <span>연간회원안내</span>
174 |                     </a>
175 |                 </li>
176 |                 <li>
177 |                     <a href="#">
178 |                         <img src="images/s3.jpg" alt="연간회원안내">
179 |                         <span>연간회원안내</span>
180 |                     </a>
181 |                 </li>
182 |                 <li>
183 |                     <a href="#">
184 |                         <img src="images/s4.jpg" alt="연간회원안내">
185 |                         <span>연간회원안내</span>
186 |                     </a>
187 |                 </li>
188 |             </ul>
189 |         </section>
190 |         <!-- //content2 -->
191 |         
192 |         <footer id="footer">
193 |             <address>
194 |                 <ul>
195 |                     <li class="left">서울 특별시 송파구 올림픽로 240 롯데월드</li>
196 |                     <li>대표자: 박동기</li>
197 |                     <li>사업자등록번호: 229-093-00392</li>
198 |                     <li class="left">통신판매업신고번호: 384-02894-90348</li>
199 |                     <li>전화: 02-3045-3943</li>
200 |                 </ul>
201 |                 <p>Copyright2018 Lotterworld, All Right RESERVED.</p>
202 |             </address>
203 |         </footer>
204 |         <!-- //footer -->
205 |     </div>
206 |    
207 | </body>
208 | </html>
209 | 
210 | 
211 | 
212 | 
213 | 
214 | 
215 | 
216 | 
217 | 
218 | 
219 | 
220 | 
221 | 
222 | 
223 | 
224 | 
225 | 
226 | 
227 | 
228 | 
229 | 
230 | 
231 |  
232 | 
233 | 
234 | 
235 | 
236 | 
237 | 
238 | 
239 | 
240 | 
241 | 
242 | 
243 | 
244 | 
245 | 
246 | 
247 | 
248 | 
249 | 
250 | 
251 | 
252 | 
253 | 
254 | 
255 | 
256 | 
257 | 
258 | 
259 | 
260 | 
261 | 
262 | 
263 | 
264 | 
265 | 
266 | 
267 | 
268 | 
269 | 
270 | 
271 | 
272 | 
273 | 
274 | 
275 | 
276 | 
277 |
278 |
279 | 280 |
281 | 
/* reset */
282 | * {margin: 0; padding: 0;}
283 | li {list-style: none;}
284 | a {color: #333; text-decoration: none;}
285 | .clearfix::before, .clearfix::after {display: block; content: ''; clear: both;}
286 | 
287 | /* layout */
288 | #wrap {width: 1000px; height: 1000px; margin: 0 auto; }
289 | #header {height: 100px;}
290 | #banner {}
291 | #content1 {}
292 | #content2 {}
293 | #footer {}
294 | 
295 | /* header */
296 | #header h1 {float: left; padding-top: 5px;}
297 | #header h1 img {width: 130px;}
298 | #header .nav {float: right;}
299 | #header .nav ul {}
300 | #header .nav li {float: left;}
301 | #header .nav li a {display: block; padding: 40px 15px;}
302 | 
303 | /* banner */
304 | #banner {}
305 | #banner img {width: 100%;}
306 | 
307 | /* content1 */
308 | #content1 {margin-top: 15px;}
309 | #content1 .notice {float: left; width: 49%; height: 220px; margin-right: 2%; background: #ccc}
310 | #content1 .ad {float: left; width: 49%; margin-right: 0; background: #444}
311 | #content1 .ad img {width: 100%; display: block;}
312 | 
313 | /* content2 */
314 | #content2 {margin-top: 25px;}
315 | #content2 h2 {margin-bottom: 10px;}
316 | #content2 ul {}
317 | #content2 li {float: left; width: 24.25%; margin-right: 1%;}
318 | #content2 li:last-child {margin-right: 0;}
319 | #content2 li img {width: 100%;}
320 | #content2 li span {display: block; padding: 10px 0;}
321 | 
322 | /* footer */
323 | #footer {border-top: 1px solid #ccc; margin-top: 30px; padding: 30px 0;}
324 | #footer address {font-style: normal; color: #666;}
325 | #footer address ul {width: 670px;}
326 | #footer address li {position: relative; display: inline; line-height: 1.7; padding: 0px 15px 0px 10px;}
327 | #footer address li:after {content: ''; width: 1px; height: 13px; background: #666; position: absolute; right: 0; top: 0;}
328 | #footer address li.left {padding-left: 0;}
329 | #footer address p {text-transform: uppercase; padding-top: 30px;}
330 | 
331 | 
332 | 
333 | 
334 | 
335 | 
336 | 
337 | 
338 | 
339 | 
340 | 
341 | 
342 | 
343 | 
344 | 
345 | 
346 | 
347 | 
348 | 
349 | 
350 | 
351 | 
352 | 
353 | 
354 | 
355 | 
356 | 
357 | 
358 | 
359 | 
360 | 
361 | 
362 | 
363 | 
364 | 
365 | 
366 | 
367 | 
368 | 
369 | 
370 | 
371 | 
372 | 
373 | 
374 | 
375 | 
376 | 
377 | 
378 | 
379 | 
380 | 
381 | 
382 | 
383 | 
384 | 
385 | 
386 | 
387 | 
388 | 
389 | 
390 | 
391 | 
392 | 
393 | 
394 | 
395 | 
396 | 
397 | 
398 | 
399 | 
400 | 
401 | 
402 | 
403 | 
404 | 
405 | 
406 | 
407 | 
408 | 
409 |
410 |
411 | 412 |
413 | 

414 | 
415 | 
416 | 
417 | 
418 | 
419 | 
420 | 
421 | 
422 | 
423 | 
424 | 
425 | 
426 | 
427 | 
428 | 
429 | 
430 | 
431 | 
432 | 
433 | 
434 | 
435 | 
436 | 
437 | 
438 | 
439 | 
440 | 
441 | 
442 | 
443 | 
444 | 
445 | 
446 | 
447 | 
448 | 
449 | 
450 | 
451 | 
452 | 
453 | 
454 | 
455 | 
456 | 
457 | 
458 | 
459 | 
460 | 
461 | 
462 | 
463 | 
464 | 
465 | 
466 | 
467 | 
468 | 
469 | 
470 | 
471 | 
472 | 
473 | 
474 | 
475 | 
476 | 
477 | 
478 |
479 |
480 | 481 | 482 |
483 |
484 |
485 | 486 |
487 | -------------------------------------------------------------------------------- /webd01.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 웹 디자인 기능사 - 탭메뉴 6 | 7 | 38 | 39 | 40 | 41 |
42 | 46 | 47 | 48 | 51 | 52 | 53 |
54 |

공지사항

55 |

갤러리

56 |

팝업

57 |
58 | 59 | 60 | 65 | 66 |
67 | 68 | 69 | 70 | -------------------------------------------------------------------------------- /webd02.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 웹 디자인 기능사 - 탭메뉴 6 | 7 | 40 | 41 | 42 |
43 | 47 |
48 | 51 | 52 | 53 |
54 |

공지사항

55 |

갤러리

56 |

팝업

57 |
58 | 59 | 60 |
61 |

로고

62 |

하단 메뉴

63 |

Copyright

64 |
65 | 66 |
67 |
68 | 69 | 70 | 71 | 72 | 73 | 74 | -------------------------------------------------------------------------------- /webd03.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 웹 디자인 기능사 - 탭메뉴 6 | 7 | 44 | 45 | 46 | 47 |
48 | 79 | 80 | 81 | 84 | 85 | 86 |
87 |

공지사항

88 |

갤러리

89 |

팝업

90 |
91 | 92 | 93 | 98 | 99 |
100 | 101 | 102 | 110 | 111 | 112 | 113 | -------------------------------------------------------------------------------- /webd04-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 웹 디자인 기능사 6 | 7 | 47 | 48 | 49 | 50 |
51 | 88 | 89 | 90 | 93 | 94 | 95 |
96 |

공지사항

97 |

갤러리

98 |

팝업

99 |
100 | 101 | 102 | 107 | 108 |
109 | 110 | 111 | 120 | 121 | 122 | 123 | -------------------------------------------------------------------------------- /webd04.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 웹 디자인 기능사 6 | 7 | 44 | 45 | 46 | 47 |
48 | 85 | 86 | 87 | 90 | 91 | 92 |
93 |

공지사항

94 |

갤러리

95 |

팝업

96 |
97 | 98 | 99 | 104 | 105 |
106 | 107 | 108 | 117 | 118 | 119 | 120 | -------------------------------------------------------------------------------- /webd05.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 웹 디자인 기능사 - 탭메뉴 6 | 7 | 45 | 46 | 47 |
48 | 83 |
84 | 87 | 88 | 89 |
90 |

공지사항

91 |

갤러리

92 |

팝업

93 |
94 | 95 | 96 |
97 |

로고

98 |

하단 메뉴

99 |

Copyright

100 |
101 | 102 |
103 |
104 | 105 | 106 | 114 | 115 | 116 | 117 | -------------------------------------------------------------------------------- /webd06.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 웹 디자인 기능사 - 탭메뉴 6 | 7 | 45 | 46 | 47 |
48 | 83 |
84 | 87 | 88 | 89 |
90 |

공지사항

91 |

갤러리

92 |

팝업

93 |
94 | 95 | 96 |
97 |

로고

98 |

하단 메뉴

99 |

Copyright

100 |
101 | 102 |
103 |
104 | 105 | 106 | 114 | 115 | 116 | 117 | -------------------------------------------------------------------------------- /webd07.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 웹 디자인 기능사 - 탭메뉴 6 | 7 | 47 | 48 | 49 | 50 |
51 | 55 | 56 | 57 | 60 | 61 | 62 |
63 |
64 |
65 |
66 | 70 |
71 |
72 |
73 | 1. Tab Menu DESC
1. Tab Menu DESC
1. Tab Menu DESC 74 |
75 |
76 | 2. Tab Menu DESC
2. Tab Menu DESC
2. Tab Menu DESC 77 |
78 |
79 |
80 |
81 |

갤러리

82 |

팝업

83 |
84 | 85 | 86 | 91 | 92 |
93 | 94 | 95 | 96 | 114 | 115 | 116 | 117 | -------------------------------------------------------------------------------- /webd08.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 웹 디자인 기능사 - 탭메뉴 6 | 7 | 55 | 56 | 57 | 58 |
59 | 63 | 64 | 65 | 68 | 69 | 70 |
71 |

공지사항

72 |

갤러리

73 |

팝업

74 |
75 | 76 | 77 | 82 | 83 |
84 | 85 | 86 |
87 |

타이틀

88 | 닫기 89 |
90 | 91 | 92 | 102 | 103 | 104 | 105 | -------------------------------------------------------------------------------- /webd09.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 웹 디자인 기능사 - 탭메뉴 6 | 7 | 53 | 54 | 55 | 56 |
57 | 61 | 62 | 63 | 71 | 72 | 73 |
74 |

공지사항

75 |

갤러리

76 |

팝업

77 |
78 | 79 | 80 | 85 | 86 |
87 | 88 | 89 | 103 | 104 | 105 | 106 | -------------------------------------------------------------------------------- /webd10.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 웹 디자인 기능사 6 | 7 | 53 | 54 | 55 | 56 |
57 | 61 | 62 | 63 | 71 | 72 | 73 |
74 |

공지사항

75 |

갤러리

76 |

팝업

77 |
78 | 79 | 80 | 85 | 86 |
87 | 88 | 89 | 100 | 101 | 102 | 103 | -------------------------------------------------------------------------------- /webd11.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 웹 디자인 기능사 - 탭메뉴 6 | 7 | 54 | 55 | 56 | 57 |
58 | 62 | 63 | 64 | 72 | 73 | 74 |
75 |

공지사항

76 |

갤러리

77 |

팝업

78 |
79 | 80 | 81 | 86 | 87 |
88 | 89 | 90 | 105 | 106 | 107 | 108 | --------------------------------------------------------------------------------