마카로닉스

1921 No

웹표준 사이트 만들기 ( Webstoryboy) - 2 CSS Navigation Bar 꾸미기, 배너 슬라이드

2022-09-12 02:59:41 By 라이트 0 472 댓글수 4 포스트 하기

4월 2024
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

강의 목록 : 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

[HTML] 특수문자(ntt code)

https://www.toptal.com/designers/htmlarrows/punctuation/

index.html

            <div id="cont-tit">
                <div class="container">
                    <div class="tit">
                        <h2>&ldquo;나는 개발자다.&rdquo;</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>&ldquo;나는 개발자다.&rdquo;</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">

style.css

/* 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{}

https://github.com/braverokmc79/web_publishing_project1/commit/351b3a9976d525bd7ddb7a67f8ec453f7a2d245a

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; }

https://github.com/braverokmc79/web_publishing_project1/commit/32808f621213ee30a518104f6220476de7c3cb91

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}

https://github.com/braverokmc79/web_publishing_project1/commit/4b552faf54b5c2d719b9245e6d42d901d9846027

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}

https://github.com/braverokmc79/web_publishing_project1/commit/6a48df754330c47dfa03d93f2f615eb95ab8fa31

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>

https://github.com/braverokmc79/web_publishing_project1/commit/dfc1d5ef6d6fa40885eb56ecb6094929972099de

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 -->

https://github.com/braverokmc79/web_publishing_project1/commit/d2b1ac9a122dbe70300793cbef6f5e7bf3d0427a

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;}