1921
No
강의 목록 : https://www.youtube.com/playlist?list=PL4UVBBIc6giKkfYN_2TVPgbMpd87lJEfg
01. 웹표준 사이트 만들기 - 기본 셋팅하기
02. 웹표준 사이트 만들기 - Layout1
03. 웹표준 사이트 만들기 - Layout2
04. 웹표준 사이트 만들기 - Layout3
05. 웹표준 사이트 만들기 - Layout4
06. 웹표준 사이트 만들기 - header1
07. 웹표준 사이트 만들기 - header2
08. 웹표준 사이트 만들기 - header3
09. 웹표준 사이트 만들기 - header4
10. 웹표준 사이트 만들기 - header5
11. 웹표준 사이트 만들기 - header6
12. 웹표준 사이트 만들기 - header7
13. 웹표준 사이트 만들기 - header8
14. 웹표준 사이트 만들기 - nav1
15. 웹표준 사이트 만들기 - nav2
16. 웹표준 사이트 만들기 - tit1
17. 웹표준 사이트 만들기 - tit2
18. 웹표준 사이트 만들기 - ban1
19. 웹표준 사이트 만들기 - ban2
20. 웹표준 사이트 만들기 - cont1
21. 웹표준 사이트 만들기 - cont2
22 .웹표준 사이트 만들기 - cont3
23.웹표준 사이트 만들기 - notice1
24.웹표준 사이트 만들기 - notice2
25. 웹표준 사이트 만들기 - notice3
26. 웹표준 사이트 만들기 - notice4
27. 웹표준 사이트 만들기 - Notice hover
28. 웹표준 사이트 만들기 - Notice hover2
29. 웹표준 사이트 만들기 - Notice hover3
30. 웹표준 사이트 만들기 - Notice hover4
31. 웹표준 사이트 만들기 - tab menu1
32. 웹표준 사이트 만들기 - tab menu2
33. 웹표준 사이트 만들기 - tab menu3
34. 웹표준 사이트 만들기 - notice5
35. 웹표준 사이트 만들기 - ad
36. 웹표준 사이트 만들기 - gallery
37. 웹표준 사이트 만들기 - login1
38. 웹표준 사이트 만들기 - login2
39. 웹표준 사이트 만들기 - login3
40. 웹표준 사이트 만들기 - login4
41. 웹표준 사이트 만들기 - login5
42. 웹표준 사이트 만들기 - login6
43. 웹표준 사이트 만들기 - footer
44. 웹표준 사이트 만들기 - w3c
45. 웹표준 사이트 만들기 - jquery nav1
46. 웹표준 사이트 만들기 - jquery nav2
47. 웹표준 사이트 만들기 - jquery nav3
강의 자료는 여기서 참고하세요~
현재 준비중이지만 http://webstoryboy.co.kr/3
HTML/CSS는 여기서 참고하세요~ http://coderap.tistory.com/
동영상 소스는 여기서 확인하세요~ http://wtss.tistory.com/category/Webs...
CSS 소스는 여기서 확인하세요~ http://wsss.tistory.com/
이쿼리 소스는 여기서 확인하세요 http://codejss.tistory.com/
소스 :
1) https://github.com/webstoryboy/webstandard
2) https://github.com/braverokmc79/web_publishing_project1
결과 화면 : https://braverokmc79.github.io/web_publishing_project1/#
14. 웹표준 사이트 만들기 - nav1
index.html
<div id="cont-nav">
<div class="container">
<div class="nav">
<div>
<h3>LAYOUT</h3>
<ul>
<li><a href="#">LAOUT 유형1</a></li>
<li><a href="#">LAOUT 유형2</a></li>
<li><a href="#">LAOUT 유형3</a></li>
<li><a href="#">LAOUT 유형4</a></li>
<li><a href="#">LAOUT 유형5</a></li>
<li><a href="#">LAOUT 유형6</a></li>
<li><a href="#">LAOUT 유형7</a></li>
<li><a href="#">LAOUT 유형8</a></li>
<li><a href="#">LAOUT 유형9</a></li>
<li><a href="#">LAOUT 유형10</a></li>
<li><a href="#">LAOUT 유형11</a></li>
<li><a href="#">LAOUT 유형12</a></li>
<li><a href="#">LAOUT 유형13</a></li>
<li><a href="#">LAOUT 유형14</a></li>
<li><a href="#">LAOUT 유형15</a></li>
<li><a href="#">LAOUT 유형16</a></li>
<li><a href="#">LAOUT 유형17</a></li>
<li><a href="#">LAOUT 유형18</a></li>
<li><a href="#">LAOUT 유형19</a></li>
<li><a href="#">LAOUT 유형20</a></li>
</ul>
</div>
<div>
<h3>BASIC</h3>
<ul>
<li><a href="#">BASIC01</a></li>
<li><a href="#">BASIC02</a></li>
<li><a href="#">BASIC03</a></li>
<li><a href="#">BASIC04</a></li>
<li><a href="#">BASIC05</a></li>
<li><a href="#">BASIC06</a></li>
<li><a href="#">BASIC07</a></li>
<li><a href="#">BASIC08</a></li>
<li><a href="#">BASIC09</a></li>
<li><a href="#">BASIC10</a></li>
<li><a href="#">BASIC11</a></li>
<li><a href="#">BASIC12</a></li>
<li><a href="#">BASIC13</a></li>
<li><a href="#">BASIC14</a></li>
<li><a href="#">BASIC15</a></li>
<li><a href="#">BASIC16</a></li>
<li><a href="#">BASIC17</a></li>
<li><a href="#">BASIC18</a></li>
<li><a href="#">BASIC19</a></li>
<li><a href="#">BASIC20</a></li>
</ul>
</div>
<div class="last">
<h3>TUTORIAL</h3>
<ul>
<li><a href="#">TUTORIAL01</a></li>
<li><a href="#">TUTORIAL02</a></li>
<li><a href="#">TUTORIAL03</a></li>
<li><a href="#">TUTORIAL04</a></li>
<li><a href="#">TUTORIAL05</a></li>
<li><a href="#">TUTORIAL06</a></li>
<li><a href="#">TUTORIAL07</a></li>
<li><a href="#">TUTORIAL08</a></li>
<li><a href="#">TUTORIAL09</a></li>
<li><a href="#">TUTORIAL10</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- //cont-nav -->
style.css
/* nav */
.nav{overflow: hidden;}
.nav div{float: left;width: 40%;}
.nav div h3{}
.nav div ul{overflow: hidden;}
.nav div ul li{width: 50%;float: left;}
.nav div ul li a{}
.nav div.last{width: 20%;}
.nav div.last ul li{width: 100%;}
15. 웹표준 사이트 만들기 - nav2
style.css
/* layout */
body{
/* background-image: url(../img/body_bg.gif); background-color: #f1f4fb; */
background: #f1f4fb url(../img/body_bg.gif);
}
#wrap{}
#header{width: 100% ; height: 327px;
/* background-image: url(../img/header_bg.jpg);
background-repeat: repeat-x;
background-position: center top; */
background: url(../img/header_bg.jpg) repeat-x center top;
}
#contents{}
#footer{width: 100%; height: 200px; background-color: #777;}
/* container */
.container{position: relative; width:900px; margin: 0 auto;}
/* contents layout */
#cont-nav{background: url(../img/body_bg.gif) repeat-x;}
#cont-tit{width: 100%;height: 100px;background-color: #555;}
#cont-ban{width: 100%;height: 100px;background-color: #333;}
#cont-cont{width: 100%;height: 100px;background-color: #222;}
/* quick */
.quick{text-align: right;}
.quick ul{overflow: hidden;}
.quick ul li{float: left;}
.quick a{ color: #fff; padding: 5px 0 0 10px; display: inline-block;}
.quick a:hover{color: #ccc;}
/* title inline 방식 css
.title{text-align: center;}
.title p{background-color: #2698cb; font-size: 28px; display: inline-block; color:#fff; margin-top: 100px; padding: 5px 15px; text-transform: uppercase;}
.title h1 a{background-color: #4aa8d4; font-size: 18px; color: #fff;display: inline-block; text-transform: uppercase; padding: 5px 15px;}
*/
/* title position 방식 css */
.title{}
.title h1{position: absolute; left: 390px; top: 160px;}
.title h1 a{ background-color: #2698cb;font-size: 18px; color: #fff; padding: 5px 15px; display: block; }
.title p{background-color: #4aa8d4; font-size: 28px; color:#fff; padding: 5px 15px; text-transform: uppercase; position: absolute;left: 230px; top: 110px;}
/* icon 스프라이트 방법 */
.icon{position: absolute; left: 360px; top:220px}
.icon ul{overflow: hidden;}
.icon ul li{float: left;}
.icon li a {width: 60px; height: 60px; display:block; margin: 0 3px; background-image: url(../img/icon.png);}
.icon li a:hover{background-image: url(../img/icon.png); background-position-x: -60px;}
.icon li.icon-tit1 a{ }
.icon li.icon-tit2 a{background-position-y: 690px;}
.icon li.icon-tit3 a{background-position-y: 630px;}
.icon li.icon-tit4 a{background-position-y: 570px;}
/* nav */
.nav{overflow: hidden; padding: 20px 0;}
.nav div{float: left;width: 40%;}
.nav div h3{font-size: 18px; color: #25a2d0; font-weight: 600;}
.nav div ul{overflow: hidden;}
.nav div ul li{width: 50%;float: left;}
.nav div ul li a{color: #333; padding: 3px;}
.nav div ul li a:hover{background-color: #1a96d0; color: #fff;}
.nav div.last{width: 20%;}
.nav div.last ul li{width: 100%;}
16. 웹표준 사이트 만들기 - tit1
https://www.toptal.com/designers/htmlarrows/punctuation/
index.html
<div id="cont-tit">
<div class="container">
<div class="tit">
<h2>“나는 개발자다.”</h2>
<a href="#" class="btn"><span class="ir" >전체메뉴버튼</span></a>
</div>
</div>
</div>
<!-- //cont-tit -->
style.css
/* tit */
.tit{}
.tit h2{text-align: center; font-size: 39px; color:#2c94c4; letter-spacing: 2px; font-family:'Nanum Brush Script';}
17. 웹표준 사이트 만들기 - tit2
index.html
<div id="cont-tit">
<div class="container">
<div class="tit">
<h2>“나는 개발자다.”</h2>
<a href="#" class="btn"><span class="ir" >전체메뉴버튼</span></a>
</div>
</div>
</div>
<!-- //cont-tit -->
style.css
/* tit */
.tit{}
.tit h2{text-align: center; font-size: 39px; color:#2c94c4; letter-spacing: 2px; font-family:'Nanum Brush Script';}
.tit .btn{position: absolute; right: 0; top:5px; display: block; width: 60px; height: 60px; background-color: #000;
background: url(../img/icon.png) 0 150px;}
.tit .btn:hover {background: url(../img/icon.png) -60px 150px;}
/* ir 효과 */
.ir{width: 0; height: 0; font-size: 0; line-height: 0; overflow: hidden; position: absolute; left: 0; top:0;}
18. 웹표준 사이트 만들기 - ban1
index.html
<!-- //cont-tit -->
<div id="cont-ban"> <div id="cont-ban">
<div class="container">cont-ban</div> <div class="container">
<div class="ban">
<a href="#" class="ban-prev">이전 이미지</a>
<ul>
<li><a href="#"><img src="img/banner_link1.jpg" alt="웹표준 지침서 보기"></a></li>
<li><a href="#"><img src="img/banner_link2.jpg" alt="CSS를 이용한 입체적인 버튼 만들기"></a></li>
<li><a href="#"><img src="img/banner_link3.jpg" alt="HTML5를 이용한 로그인 폼 만들기"></a></li>
</ul>
<a href="#" class="ban-prev">다음 이미지</span>
</div>
</div>
</div> </div>
<!-- //cont-ban --> <!-- //cont-ban -->
<div id="cont-cont"> <div id="cont-cont">
/* ban */ .ban{} .ban ul{overflow: hidden;} .ban ul li{float: left; width: 330px; text-align: center;} .ban ul li a{} .ban .ban-prev{} .ban .ban-next{}
19. 웹표준 사이트 만들기 - ban2
index.html
<div id="cont-ban">
<div class="container">
<div class="ban">
<a href="#" class="ban-prev"><span class="ir">이전 이미지</span></a>
<ul>
<li><a href="#"><img src="img/banner_link1.jpg" alt="웹표준 지침서 보기"></a></li>
<li><a href="#"><img src="img/banner_link2.jpg" alt="CSS를 이용한 입체적인 버튼 만들기"></a></li>
<li><a href="#"><img src="img/banner_link3.jpg" alt="HTML5를 이용한 로그인 폼 만들기"></a></li>
</ul>
<a href="#" class="ban-next"><span class="ir">다음 이미지</span></a>
<div class="dot">
<ul>
<li><a href="#">점</a></li>
<li><a href="#">점</a></li>
<li><a href="#">점</a></li>
</ul>
</div>
</div>
</div>
</div>
<!-- //cont-ban -->
style.css
/* ban */
.ban{padding: 30px 0 20px 0;}
.ban ul{overflow: hidden;}
.ban ul li{float: left; width: 330px; text-align: center; font-size: 0;}
.ban ul li a img{border: 4px solid #dcdcdc;}
.ban ul li a img:hover{border-color: #98bcdc;}
.ban .ban-prev{position: absolute; left: -50px; top: 70px; width:43px; height: 43px; background: url(../img/icon.png) -150px 0px; }
.ban .ban-next{position: absolute; right: -50px; top: 70px; width:43px; height: 43px; background:url(../img/icon.png) -150px -43px; }
.ban .ban-prev:hover{background-position-x: -193px; }
.ban .ban-next:hover{background-position-x: -193px; }
.ban .dot { margin-top: 15px;}
.ban .dot ul{overflow: hidden; display: flex;justify-content: center;}
.ban .dot ul li{float: left; width:15px; height: 15px; margin: 0px 5px; border-radius: 50%; cursor: pointer; background-color: #5dbfeb;}
.ban .dot li:hover{ width:15px; height: 15px; background-color: #2b91c8; }
20. 웹표준 사이트 만들기 - cont1
index.html
<div id="cont-cont">
<div class="container">
<div class="cont">
<div class="box box1">box1</div><!-- box1 -->
<div class="box box2">box2</div><!-- box2 -->
<div class="box box3">box3</div><!-- box3 -->
<div class="box box4">box4</div><!-- box4 -->
<div class="box box5">box5</div><!-- box5 -->
<div class="box box6">box6</div><!-- box6 -->
</div>
</div>
</div>
<!-- //cont-con -->
style.css
/* cont layout */
.cont{overflow: hidden; padding-top: 30px;}
.cont .box{width:289px; height: 364px; float: left; margin: 0 30px 30px 0; padding-right: 30px;}
.cont .box1{border-right: 1px solid #c8c8c8;}
.cont .box2{border-right: 1px solid #c8c8c8;}
.cont .box3{margin-right: 0px; padding-right: 0px;}
.cont .box4{border-right: 1px solid #c8c8c8;}
.cont .box5{border-right: 1px solid #c8c8c8;}
.cont .box6{margin-right: 0px; padding-right: 0px}
21. 웹표준 사이트 만들기 - cont2
index.html
<div id="cont-cont">
<div class="container">
<div class="cont">
<div class="box box1">
<h3>
<span class="ico-img">아이콘이미지</span>
<span class="ico-tit">Notice</span>
</h3>
<p class="ico-desc">가장 기본이 되는 메인 페이지 게시판 유형입니다.</p>
<!-- -->
<!-- //-->
</div><!-- box1 -->
<div class="box box2">
<h3>
<span class="ico-img">아이콘이미지</span>
<span class="ico-tit">Notice</span>
</h3>
<p class="ico-desc">가장 기본이 되는 메인 페이지 게시판 유형입니다.</p>
<!-- -->
<!-- //-->
</div><!-- box2 -->
<div class="box box3">
<h3>
<span class="ico-img">아이콘이미지</span>
<span class="ico-tit">Notice</span>
</h3>
<p class="ico-desc">가장 기본이 되는 메인 페이지 게시판 유형입니다.</p>
<!-- -->
<!-- //-->
</div><!-- box3 -->
<div class="box box4">
<h3>
<span class="ico-img">아이콘이미지</span>
<span class="ico-tit">Notice</span>
</h3>
<p class="ico-desc">가장 기본이 되는 메인 페이지 게시판 유형입니다.</p>
<!-- -->
<!-- //-->
</div><!-- box4 -->
<div class="box box5">
<h3>
<span class="ico-img">아이콘이미지</span>
<span class="ico-tit">Notice</span>
</h3>
<p class="ico-desc">가장 기본이 되는 메인 페이지 게시판 유형입니다.</p>
<!-- -->
<!-- //-->
</div><!-- box5 -->
<div class="box box6">
<h3>
<span class="ico-img">아이콘이미지</span>
<span class="ico-tit">Notice</span>
</h3>
<p class="ico-desc">가장 기본이 되는 메인 페이지 게시판 유형입니다.</p>
<!-- -->
<!-- //-->
</div><!-- box6 -->
</div>
</div>
</div>
<!-- //cont-con -->
style.css
/* cont layout */
.cont{overflow: hidden; padding-top: 30px;}
.cont .box{width:289px; height: 364px; float: left; margin: 0 30px 30px 0; padding-right: 30px; position: relative;}
.cont .box1{border-right: 1px solid #c8c8c8;}
.cont .box2{border-right: 1px solid #c8c8c8;}
.cont .box3{margin-right: 0px; padding-right: 0px;}
.cont .box4{border-right: 1px solid #c8c8c8;}
.cont .box5{border-right: 1px solid #c8c8c8;}
.cont .box6{margin-right: 0px; padding-right: 0px}
.cont .box .ico-img{width: 60px; height: 60px; background-color: #000; display: block;position: absolute; left: 0; top:6px;}
.cont .box .ico-tit{padding-left: 67px; font-size: 18px; color: #2c94c4;}
.cont .box .ico-desc{padding-left: 67px;padding-bottom: 15px; color: #878787; border-bottom: 1px solid #d0d0d0;}
22 .웹표준 사이트 만들기 - cont3
style.css
/* cont layout */
.cont{overflow: hidden; padding-top: 30px;}
.cont .box{width:289px; height: 364px; float: left; margin: 0 30px 30px 0; padding-right: 30px; position: relative;}
.cont .box1{border-right: 1px solid #c8c8c8;}
.cont .box2{border-right: 1px solid #c8c8c8;}
.cont .box3{margin-right: 0px; padding-right: 0px;}
.cont .box4{border-right: 1px solid #c8c8c8;}
.cont .box5{border-right: 1px solid #c8c8c8;}
.cont .box6{margin-right: 0px; padding-right: 0px}
.cont .box .ico-img{width: 60px; height: 60px; background-color: #000; display: block;position: absolute; left: 0; top:6px;}
.cont .box .ico-tit{padding-left: 67px; font-size: 18px; color: #2c94c4;}
.cont .box .ico-desc{padding-left: 67px;padding-bottom: 15px; color: #878787; border-bottom: 1px solid #d0d0d0;}
.cont .box .ico-img:hover{ background-position-x: -60px; cursor: pointer;}
.cont .box1 .ico-img{ background: url(../img/icon.png) 0 -240px}
.cont .box1 .ico-img{ background: url(../img/icon.png) 0 -240px}
.cont .box2 .ico-img{ background: url(../img/icon.png) 0 -300px}
.cont .box3 .ico-img{ background: url(../img/icon.png) 0 -360px}
.cont .box4 .ico-img{ background: url(../img/icon.png) 0 -420px}
.cont .box5 .ico-img{ background: url(../img/icon.png) 0 -480px}
.cont .box6 .ico-img{ background: url(../img/icon.png) 0 -540px}
23.웹표준 사이트 만들기 - notice1
index.html
<div class="box box1">
<h3>
<span class="ico-img ir">아이콘이미지</span>
<span class="ico-tit">Notice</span>
</h3>
<p class="ico-desc">가장 기본이 되는 메인 페이지 게시판 유형입니다.</p>
<!-- -->
<!-- Notice -->
<div class="notice">
<h4>Webstandard</h4>
<ul>
<li><a href="#">모든 운영체제, 모든 브라우저에서 누구나 같은 결과를 볼 수 있도록 만든 표준입니다.</a></li>
<li><a href="#">모든 운영체제, 모든 브라우저에서 누구나 같은 결과를 볼 수 있도록 만든 표준입니다.</a></li>
<li><a href="#">모든 운영체제, 모든 브라우저에서 누구나 같은 결과를 볼 수 있도록 만든 표준입니다.</a></li>
<li><a href="#">모든 운영체제, 모든 브라우저에서 누구나 같은 결과를 볼 수 있도록 만든 표준입니다.</a></li>
</ul>
<a href="#" title="더보기" class="more"><span class="ir">더보기</span></a>
</div>
<!-- //-->
</div><!-- box1 -->
style.css
/* notice */
.notice{position: relative;}
.notice h4{font-size: 14px; color: #0093bd; font-weight: bold; margin-bottom: 3px;}
.notice li{ background: url(../img/dot.gif) no-repeat 0px 8px; padding-left: 8px;
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.notice .more{position: absolute; right:0px; top: 3px;width: 17px; height: 18px; background: url(../img/icon.png) -150px -89px; display:block; }
.notice .more:hover{ background-position-x: -167px ; right:0px;padding: 0px;}
24.웹표준 사이트 만들기 - notice2
index.html
<!-- Notice2 -->
<div class="notice2 mt20">
<h4>Webstandard</h4>
<ul>
<li><a href="#">모든 운영체제, 모든 브라우저에서 누구나 같은 결과를 볼 수 있도록 만든 표준입니다.</a><span class="time">2022.09.12</span></li>
<li><a href="#">모든 운영체제, 모든 브라우저에서 누구나 같은 결과를 볼 수 있도록 만든 표준입니다.</a><span class="time">2022.09.12</span></li>
<li><a href="#">모든 운영체제, 모든 브라우저에서 누구나 같은 결과를 볼 수 있도록 만든 표준입니다.</a><span class="time">2022.09.12</span></li>
<li><a href="#">모든 운영체제, 모든 브라우저에서 누구나 같은 결과를 볼 수 있도록 만든 표준입니다.</a><span class="time">2022.09.12</span></li>
</ul>
<a href="#" title="더보기" class="more"><span class="ir">더보기</span></a>
</div>
reset.css
/* margin, padding */
.mt10 {margin-top: 10px !important;}
.mt15 {margin-top: 15px !important;}
.mt20 {margin-top: 20px !important;}
.mt25 {margin-top: 25px !important;}
.mt30 {margin-top: 30px !important;}
.mt35 {margin-top: 35px !important;}
.mt40 {margin-top: 40px !important;}
.mt45 {margin-top: 45px !important;}
.mt50 {margin-top: 50px !important;}
style.css
/* notice2 */
.notice2{position: relative;}
.notice2 h4{font-size: 14px; color: #0093bd; font-weight: bold; margin-bottom: 3px}
.notice2 ul {}
.notice2 li {background: url(../img/dot.gif) no-repeat 0px 8px; padding-left: 8px; overflow: hidden; }
.notice2 li a{float: left; width: 60%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;}
.notice2 li .time{float: right; width: 30%; text-align: right;}
.notice2 .more{position: absolute; right:0px; top: 3px;width: 17px; height: 18px; background: url(../img/icon.png) -150px -89px; display:block; }
.notice2 .more:hover{ background-position-x: -167px ; right:0px;padding: 0px;}
25. 웹표준 사이트 만들기 - notice3
index.html
<!-- Notice3 -->
<div class="notice3">
<ul>
<li>
<a href="#"><img src="img/notice01.jpg" alt="이미지1">
<strong>브라우저 테스트 툴</strong>
<em>브라우저 테스트를 도와주는 설치형 브라우저 테스트를 도와주는 설치형 브라우저</em>
</a>
</li>
<li>
<a href="#"><img src="img/notice02.jpg" alt="이미지2">
<strong>브라우저 테스트 툴</strong>
<em>브라우저 테스트를 도와주는 설치형 브라우저 테스트를 도와주는 설치형 브라우저</em>
</a>
</li>
<li>
<a href="#"><img src="img/notice03.jpg" alt="이미지3">
<strong>브라우저 테스트 툴</strong>
<em>브라우저 테스트를 도와주는 설치형 브라우저 테스트를 도와주는 설치형 브라우저</em>
</a>
</li>
<li>
<a href="#"><img src="img/notice04.jpg" alt="이미지4">
<strong>브라우저 테스트 툴</strong>
<em>브라우저 테스트를 도와주는 설치형 브라우저 테스트를 도와주는 설치형 브라우저</em>
</a>
</li>
</ul>
<a href="#" title="더보기" class="more"><span class="ir">더보기</span></a>
</div>
26. 웹표준 사이트 만들기 - notice4
reset.css
/* 이탤릭체 초기화 */
em, address{font-style: normal;}
style.css
/* notice3 */
.notice3{position: relative;}
.notice3 h4{font-size: 14px; color: #0093bd; font-weight: bold; margin-bottom: 3px}
.notice3 ul{}
.notice3 li{position: relative; height: 60px; padding-left: 60px;}
.notice3 li a{}
.notice3 li a img{width: 50px;height: 50px; position: absolute;left: 0px; top: 0px; border: 1px solid #390;}
.notice3 li a strong{ display: block;}
.notice3 li a em{display: block;}
.notice3 .more{position: absolute; right:0px; top: 3px;width: 17px; height: 18px; background: url(../img/icon.png) -150px -89px; display:block; }
.notice3 .more:hover{ background-position-x: -167px ; right:0px;padding: 0px;}
27. 웹표준 사이트 만들기 - Notice hover
ihover
https://gudh.github.io/ihover/dist/index.html
style.css
/* notice3 */
.notice3{position: relative;}
.notice3 h4{font-size: 14px; color: #0093bd; font-weight: bold; margin-bottom: 3px}
.notice3 ul{}
.notice3 li{position: relative; height: 52px; padding-left: 60px; padding-top: 8px;}
.notice3 li a{}
.notice3 li a img{width: 50px;height: 50px; position: absolute;left: 0px; top: 0px; border: 1px solid #390;}
.notice3 li a strong{ display: block;}
.notice3 li a em{display: block;
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.notice3 .more{position: absolute; right:0px; top: 3px;width: 17px; height: 18px; background: url(../img/icon.png) -150px -89px; display:block; }
.notice3 .more:hover{ background-position-x: -167px ; right:0px;padding: 0px;}
index.html
<!-- notice-hover -->
<div class="notice-hover">
<h4>Notice Hover</h4>
<ul>
<li>
<a href="#">
<span>
<img src="img/sban01.jpg" alt="배너1">
<em>Mouse Hover</em>
</span>
<strong>이미지 제목</strong>
</a>
</li>
<li>
<a href="#">
<span><img src="img/sban02.jpg" alt="배너12"><em>Mouse Hover</em></span>
<strong>이미지 제목</strong>
</a>
</li>
<li>
<a href="#">
<span><img src="img/sban03.jpg" alt="배너3"><em>Mouse Hover</em></span>
<strong>이미지 제목</strong>
</a>
</li>
</ul>
<a href="#" title="더보기" class="more"><span class="ir">더보기</span></a>
</div>
<!-- //notice-hover -->
28. 웹표준 사이트 만들기 - Notice hover2
컨텐츠 요소를 안보이게 하는 방법
1.display: none; <-> display:block; | 영역 x | 애니x
2.visibility:hidden; <-> visibility:visible; | 영역 O | 애니x
3.opacity:0; <-> 1 영역 O | 애니O
4.ir(width:0; height:0)
style.css
/* notice-hover */
.notice-hover{position: relative;}
.notice-hover h4{font-size: 14px; color: #0093bd; font-weight: bold; margin-bottom: 3px}
.notice-hover ul{overflow: hidden;}
.notice-hover li{float: left; width: 33.3333%; text-align: center;}
.notice-hover li a{}
.notice-hover li a span{position: relative; display: block;width: 90px;height: 90px;margin: 0 auto;}
.notice-hover li a span img{width:90px; width: 90px;}
.notice-hover li a span em{visibility: hidden; position: absolute; left: 0; top: 0; background: #000; color: #fff;width: 100%; height: 100%; line-height: 90px;}
.notice-hover li a span:hover em{visibility: visible;}
.notice-hover li a strong{}
.notice-hover .more{position: absolute; right:0px; top: 3px;width: 17px; height: 18px; background: url(../img/icon.png) -150px -89px; display:block; }
.notice-hover .more:hover{ background-position-x: -167px ; right:0px;padding: 0px;}
29. 웹표준 사이트 만들기 - Notice hover3
rest.css
/* 테두리 초기화 */
img{border: 0;}
style.css
/* notice-hover */
.notice-hover{position: relative;}
.notice-hover h4{font-size: 14px; color: #0093bd; font-weight: bold; margin-bottom: 3px}
.notice-hover ul{overflow: hidden;}
.notice-hover li{float: left; width: 33.3333%; text-align: center;}
.notice-hover li a span{position: relative; display: block;width: 90px;height: 90px;margin: 0 auto;}
.notice-hover li a span img{width:90px; width: 90px;}
.notice-hover li a span em{visibility: hidden; position: absolute; left: 0; top: 0; background: #000;
color: #fff;width: 100%; height: 100%; line-height: 90px;
background: rgba(0,0,0,0.5);
/* background: #000; opacity: 0.5; filter:alpha(opacity=50); */
}
.notice-hover li a span:hover em{visibility: visible; }
.notice-hover li a strong{display: block; padding-top:3px;}
.notice-hover .more{position: absolute; right:0px; top: 3px;width: 17px; height: 18px; background: url(../img/icon.png) -150px -89px; display:block; }
.notice-hover .more:hover{ background-position-x: -167px ; right:0px;padding: 0px;}
30. 웹표준 사이트 만들기 - Notice hover4
마크업 검사 : https://validator.kldp.org/
index.html
<!-- notice-hover2 -->
<div class="notice-hover2">
<ul>
<li>
<a href="#">
<span>
<img src="img/sban04.jpg" alt="배너4">
<em>Mouse Hover</em>
</span>
<strong>이미지 제목</strong>
</a>
</li>
<li>
<a href="#">
<span><img src="img/sban05.jpg" alt="배너5"><em>Mouse Hover</em></span>
<strong>이미지 제목</strong>
</a>
</li>
<li>
<a href="#">
<span><img src="img/sban06.jpg" alt="배너6"><em>Mouse Hover</em></span>
<strong>이미지 제목</strong>
</a>
</li>
</ul>
<a href="#" title="더보기" class="more"><span class="ir">더보기</span></a>
</div>
<!-- //notice-hover2 -->
style.css
/* notice-hover2 */
.notice-hover2{position: relative;}
.notice-hover2 h4{font-size: 14px; color: #0093bd; font-weight: bold; margin-bottom: 3px}
.notice-hover2 ul{overflow: hidden;}
.notice-hover2 li{float: left; width: 33.3333%; text-align: center;}
.notice-hover2 li a span{position: relative; display: block;width: 90px;height: 90px;margin: 0 auto;}
.notice-hover2 li a span img{width:90px; width: 90px;}
.notice-hover2 li a span em{visibility: hidden; position: absolute; left: 0; background: #000;
color: #fff;width: 100%;
background: rgba(0,0,0,0.6); bottom: 0;
/* background: #000; opacity: 0.5; filter:alpha(opacity=50); */
}
.notice-hover2 li a span:hover em{visibility: visible; }
.notice-hover2 li a strong{display: block; padding-top:3px;}
.notice-hover2 .more{position: absolute; right:0px; top: 3px;width: 17px; height: 18px; background: url(../img/icon.png) -150px -89px; display:block; }
.notice-hover2 .more:hover{ background-position-x: -167px ; right:0px;padding: 0px;}
댓글 ( 4)
댓글 남기기