1935
No
유튜브 강의목록 : https://www.youtube.com/playlist?list=PL4UVBBIc6giKixok-bC7XVEx0ZFsngr5Z
인프런 강의 : https://www.inflearn.com/course/웹-표준-사이트-만들기/dashboard
강의 참고자료
2.페이지 구조 실습
10. 스킵 메뉴
index.html
<!-- 스킵 내비게이션 -->
<div id="skip">
<a href="#cont_nav">전체 메뉴 바로가기</a>
<a href="#cont_ban">배너 영역 바로가기</a>
<a href="#cont_cont">컨텐츠 영역 바로가기</a>
</div>
<!-- //스킵 내비게이션 -->
reset.css
/* a 링크 초기화 */
a{color: #222; text-decoration: none;}
a:hover{color: #390;}
style.css
/* 스킵 내비게이션 */
#skip{position: relative;}
#skip a{position: absolute; left: 0px; top:-35px; border: 1px solid #fff; color: #fff; background: #333;
line-height: 30px; width: 160px; text-align: center;
}
#skip a:active,#skip a:focus{top:0}
11. 헤더 배경 & 메뉴
index.html
<div id="header">
<div class="container">
<div class="header">
<div class="header-menu">
<a href="https://www.tistory.com/">Desinger</a>
<a href="https://webstoryboy.co.kr/">Publisher</a>
<a href="https://www.youtube.com/">Youtube</a>
</div>
<!-- //헤더 메뉴 -->
<div class="header-tit"></div>
<div class="header-icon"></div>
</div>
</div>
</div>
<!-- //header -->
style.css
/* 헤더 */
.header{}
.header .header-menu{text-align: right;}
.header .header-menu a{color:#fff;padding: 10px 0px 10px 10px; display: inline-block;}
.header .header-menu a:hover{ color: #666;}
.header .header-tit{}
.header .header-icon{}
12. 헤더 타이틀 & 웹 폰트
index.html
<div id="header">
<div class="container">
<div class="header">
<div class="header-menu">
<a href="https://www.tistory.com/">Desinger</a>
<a href="https://webstoryboy.co.kr/">Publisher</a>
<a href="https://www.youtube.com/">Youtube</a>
</div>
<!-- //헤더 메뉴 -->
<div class="header-tit">
<h1>Professional Publisher & Designer</h1> <br/>
<a href="https://macaronics.net/">macaronics.net</a>
</div>
<!-- //헤더 타이틀-->
<div class="header-icon"></div>
</div>
</div>
</div>
<!-- //header -->
style.css
/* 헤더 */
.header{}
.header .header-menu{text-align: right;}
.header .header-menu a{color:#fff;padding: 10px 0px 10px 10px; display: inline-block;}
.header .header-menu a:hover{ color: #666;}
.header .header-tit{text-align: center;}
.header .header-tit h1{text-align: center; background-color: #4aa8d4; font-size: 28px; padding:5px 20px 6px 20px;
display: inline-block; color: #fff; margin-top: 40px;font-weight: normal; text-transform: uppercase;}
.header .header-tit a{
display: inlne-block; background-color: #2698cb; font-size: 18px; color: #fff; padding:5px 20px 6px 20px ;
}
.header .header-icon{}
reset.css
/* 폰트 초기화 */
body, input, textarea, select, button, table{
font-family: 'Nanum Gothic' ,'Malgun Gothic', '맑은 고딕', dotum, '돋움', sans-serif;
color: #222; font-size: 13px; line-height:1.5;
}
13. 헤더 아이콘 수정
index.html
<!-- 이미지를 표현하는 방법
1. img 태그로 표현(의미가 있을 때) / alt 태그 - 대체 문자 표현
2. background 속성으로 표현(의미가 있을 때) - 대체 문자 X
3. 이미지를 background 속성 - 웹 표준 준수하기 위해서는
가상으로 대체 문자를 만들어줌(IR 효과)
이미지 스프라이트
-->
<div class="header-icon">
<a href="#" class="icon1"><span class="ir_pm">icon1</span></a>
<a href="" class="icon2"><span class="ir_pm">icon2</span></a>
<a href="" class="icon3"><span class="ir_pm">icon3</span></a>
<a href="" class="icon4"><span class="ir_pm">icon4</span></a>
</div>
<!-- //헤더 아이콘 -->
style.css
/* 헤더 */
.header{}
.header .header-menu{text-align: right;}
.header .header-menu a{color:#fff;padding: 10px 0px 10px 10px; display: inline-block;}
.header .header-menu a:hover{ color: #666;}
.header .header-tit{text-align: center;}
.header .header-tit h1{text-align: center; background-color: #4aa8d4; font-size: 28px; padding:5px 20px 6px 20px;
display: inline-block; color: #fff; margin-top: 40px;font-weight: normal; text-transform: uppercase;}
.header .header-tit a{
display: inlne-block; background-color: #2698cb; font-size: 18px; color: #fff; padding:5px 20px 6px 20px ;
}
.header .header-icon{text-align: center; margin-top: 30px;}
.header .header-icon a{ width: 60px; height: 60px; display: inline-block; text-align: center; background: url(../img/icon.png); margin: 0 3px;}
.header .header-icon a.icon1{ background-position: 0 0;}
.header .header-icon a.icon2{ background-position: 0 -60px;}
.header .header-icon a.icon3{ background-position: 0 -120px;}
.header .header-icon a.icon4{ background-position: 0 -180px;}
.header .header-icon a.icon1:hover{ background-position: -60px 0;}
.header .header-icon a.icon2:hover{ background-position: -60px -60px;}
.header .header-icon a.icon3:hover{ background-position: -60px -120px;}
.header .header-icon a.icon4:hover{ background-position: -60px -180px;}
reset.css
/* IR 효과 */
/* 의미있는 이미지의 대체 텍스트를 제공하는 경우 */
.ir_pm{ display: block; overflow: hidden; font-size: 0; line-height: 0; text-indent: -9999px;}
/* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할때 */
.ir_wa{ display: block; overflow: hidden; position: relative; z-index: -1; width: 100%; height: 100%;}
/* 대체 텍스트가 아니 접근성을 위한 숨김 텍스트를 제공할 때 */
.ir_su{overflow: hidden; position: absolute; width: 0; height: 0; text-indent: -9999px;}
14. 전체 메뉴 수정
index.html
<div id="cont_nav">
<div class="container">
<h2 class="ir_su">전체 메뉴</h2>
<div class="nav">
<div>
<h3>HTML Reference</h3>
<ol>
<li><a href="#">HTML 태그(Tag)</a></li>
<li><a href="#">블록 요소/인라인 요소</a></li>
<li><a href="#">DTD 선언</a></li>
<li><a href="#">언어 속성 설정</a></li>
<li><a href="#">HTML <title> </a></li>
<li><a href="#">HTML <meta> </a></li>
<li><a href="#">특수문자</a></li>
<li><a href="#">하이퍼 링크</a></li>
<li><a href="#">HTML <style></a></li>
<li><a href="#">HTML <html> </a></li>
<li><a href="#">HTML <head ></a></li>
<li><a href="#">HTML <div></a></li>
<li><a href="#">HTML <colgroup></a></li>
<li><a href="#">HTML <caption></a></li>
</ol>
</div>
<div>
<h3>CSS Reference</h3>
<ol>
<li><a href="#">CSS 선택자</a></li>
<li><a href="#">CSS 단위</a></li>
<li><a href="#">CSS 색상</a></li>
<li><a href="#">CSS 선언 방법</a></li>
<li><a href="#">상대주소와 절대주소</a></li>
<li><a href="#">CSS float</a></li>
<li><a href="#">이미지 표현 방법</a></li>
<li><a href="#">이미지 스프라이트</a></li>
<li><a href="#">IR 효과</a></li>
<li><a href="#">이미지 최적화</a></li>
<li><a href="#">background-color</a></li>
<li><a href="#">border-style</a></li>
<li><a href="#">font-size</a></li>
<li><a href="#">text-align</a></li>
</ol>
</div>
<div class="last">
<h3>Webstandard</h3>
<ol>
<li><a href="#">웹 표준</a></li>
<li><a href="#">웹 접근성</a></li>
<li><a href="#">W3C</a></li>
<li><a href="#">웹 접근성 연구소</a></li>
<li><a href="#">네이버 널리</a></li>
<li><a href="#">다음 다룸</a></li>
<li><a href="#">Webstandard</a></li>
</ol>
</div>
</div>
</div>
</div>
<!-- //cont_nav -->
style.css
@charset "utf-8";
/* 스킵 내비게이션 */
#skip{position: relative;}
#skip a{position: absolute; left: 0px; top:-35px; border: 1px solid #fff; color: #fff; background: #333;
line-height: 30px; width: 160px; text-align: center;
}
#skip a:active,#skip a:focus{top:0}
/* 레이아웃 */
#wrap{ color: #fff;
/* font-size: 30px;text-transform: uppercase; color: #fff;text-align: center; */
}
#header{ height: 325px; background: url(../img/header_bg.jpg) center top repeat-x; }
#contents{ }
#footer{ height: 200px; background: #333;}
/* 컨텐츠 레이아웃 */
#cont_nav{ color: #000;}
#cont_tit{width: 100%; height: 200px; background: #444}
#cont_ban{width: 100%; height: 200px; background: #555}
#cont_cont{width: 100%; height: 200px; background: #666}
/* 컨테이너 */
.container{width: 990px; margin: 0 auto; height: inherit; background: rgba(255, 255, 255, 0.3);}
/* 헤더 */
.header .header-menu{text-align: right;}
.header .header-menu a{color:#fff;padding: 10px 0px 10px 10px; display: inline-block;}
.header .header-menu a:hover{ color: #666;}
.header .header-tit{text-align: center;}
.header .header-tit h1{text-align: center; background-color: #4aa8d4; font-size: 28px; padding:5px 20px 6px 20px;
display: inline-block; color: #fff; margin-top: 40px;font-weight: normal; text-transform: uppercase;}
.header .header-tit a{
display: inlne-block; background-color: #2698cb; font-size: 18px; color: #fff; padding:5px 20px 6px 20px ;
}
.header .header-icon{text-align: center; margin-top: 30px;}
.header .header-icon a{ width: 60px; height: 60px; display: inline-block; text-align: center; background: url(../img/icon.png); margin: 0 3px;}
.header .header-icon a.icon1{ background-position: 0 0;}
.header .header-icon a.icon2{ background-position: 0 -60px;}
.header .header-icon a.icon3{ background-position: 0 -120px;}
.header .header-icon a.icon4{ background-position: 0 -180px;}
.header .header-icon a.icon1:hover{ background-position: -60px 0;}
.header .header-icon a.icon2:hover{ background-position: -60px -60px;}
.header .header-icon a.icon3:hover{ background-position: -60px -120px;}
.header .header-icon a.icon4:hover{ background-position: -60px -180px;}
/*
float : left 로 인한 영역깨짐(height:0) 방지법
1.깨지는 영역에 똑같이 float : left 를 사용한다.(x) --> 모든 박스에 float:left 를 사용하게 됩니다.
2.float 의 성질을 차단하는 clear:both; 를 사용한다.(x) ---> 어떤 영역이 깨졌는지 찾기 어려움.
3.float 을 사용한 상위 박스한테 overflow :hidden 을 사용한다 (0) -> 현재는 제일 많이 사용.
4.clearfix 를 사용합니다.(0)
*/
/* 전체 메뉴 */
.nav{overflow: hidden; padding: 30px 0;}
.nav > div {float: left; width: 40%;}
.nav > div.last{width: 20%;}
.nav > div h3 {font-size: 18px; color: #25a2d0; margin-bottom: 4px;}
.nav > div ol {overflow: hidden;}
.nav > div ol li {float: left; width: 50%;}
.nav > div.last ol li {float: left; width: 100%;}
.nav > div ol li a:hover{text-decoration: underline;}
15. 전체 타이틀
inde.html
<div id="cont_tit">
<div class="container">
<div class="tit">
<h2>"나는 퍼블리셔다"</h2>
<a href="#" class="btn"><span class="ir_pm">전체메뉴</span></a>
</div>
</div>
</div>
<!-- //cont_tit -->
style.css
/* 타이틀 */
.tit{position: relative;}
.tit h2{font-size: 40px;text-align: center; padding: 5px 0; letter-spacing: 2px; color: #2c94c4; font-family: 'Single Day', cursive;}
.tit .btn{position: absolute; top: 5px; right: 0; width: 60px; height: 60px;background: url(../img/icon.png) no-repeat 0 -600px;}
.tit .btn:hover{background-position: -60px -600px;}
16. 전체 배너
index.html
<div id="cont_ban">
<div class="container">
<div class="ban">
<a href="#" class="prev"><span class="ir_pm">이전 이미지</span></a>
<ul>
<li class="ban_img1">
<a href="#"><img src="img/banner_link1.jpg" alt="웹 표준 지침서 보기"></a>
</li>
<li class="ban_img2">
<a href="#"><img src="img/banner_link2.jpg" alt="CSS 버튼 만들기"></a>
</li>
<li class="ban_img3">
<a href="#"><img src="img/banner_link3.jpg" alt="로그인 폼 만들기"></a>
</li>
</ul>
<a href="#" class="next"><span class="ir_pm">이전 이미지</span></a>
</div>
</div>
</div>
<!-- //cont_ban -->
style.css
/* 배너 */
.ban{position: relative; padding: 24px 0 20px;}
.ban a.prev {position: absolute; left: -60px; top: 60px; width: 43px; height: 43px; background: #ccc; background: url(../img/icon.png) no-repeat -150px 0;}
.ban a.next {position: absolute; right: -60px;top: 60px; width: 43px; height: 43px; background: #ccc; background: url(../img/icon.png) no-repeat -150px -43px;}
.ban a.prev:hover{ background-position: -193px 0;}
.ban a.next:hover{ background-position: -193px -43px;}
.ban ul{overflow: hidden;}
.ban ul li{float: left; width: 330px;}
.ban ul li:last-child{text-align: right;} /* ie9 부터 적용 */
.ban ul li:nth-child(2){text-align: center;} /* ie9 부터 적용 */
.ban ul li.ban_img1{text-align: left;}
.ban ul li.ban_img2{text-align: center;}
.ban ul li.ban_img3{text-align: right;}
.ban ul li img{border: 4px solid #dcdcdc;}
.ban ul li img:hover{border-color: #98bcdc ;}
17. 컨텐츠 레이아웃
index.html
<div id="cont_cont">
<div class="container">
<div class="cont">
<div class="column col1">
<h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
<p class="ico_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
</div>
<!-- //col1 -->
<div class="column col2">
<h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
<p class="ico_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
</div><!-- //col2 -->
<div class="column col3">
<h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
<p class="ico_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
</div><!-- //col3 -->
<div class="column col4">
<h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
<p class="ico_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
</div><!-- //col4 -->
<div class="column col5">
<h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
<p class="ico_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
</div><!-- //col5 -->
<div class="column col6">
<h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
<p class="ico_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
</div><!-- //col6 -->
</div>
</div>
</div>
<!-- //cont_cont -->
style.css
/* 컨텐츠 */
.cont{overflow: hidden; padding-top: 30px;}
.cont .column{position: relative; float: left; width: 289px; height: 363px; margin: 0 30px 30px 0; padding-right: 30px;}
.cont .col1{border-right: 1px solid #c8c8c8;}
.cont .col2{border-right: 1px solid #c8c8c8;}
.cont .col3{padding-right: 0px; margin-right: 0px;}
.cont .col4{border-right: 1px solid #c8c8c8;}
.cont .col5{border-right: 1px solid #c8c8c8;}
.cont .col6{padding-right: 0px; margin-right: 0px;}
.cont .column .ico_img{display: block; width: 60px; height: 60px; background: url(../img/icon.png); position: absolute; left: 0px; top:0px; cursor: pointer;}
.cont .column .ico_tit{padding-left: 70px; font-style: 16px; color: #2c94c4;}
.cont .column .ico_desc{padding-left: 70px; border-bottom: 1px solid #d0d0d0;padding-bottom: 15px;}
.cont .col1 .ico_img{background-position: 0px -240px }
.cont .col2 .ico_img{background-position: 0px -300px }
.cont .col3 .ico_img{background-position: 0px -360px }
.cont .col4 .ico_img{background-position: 0px -420px }
.cont .col5 .ico_img{background-position: 0px -480px }
.cont .col6 .ico_img{background-position: 0px -540px }
.cont .col1 .ico_img:hover{background-position: -60px -240px }
.cont .col2 .ico_img:hover{background-position: -60px -300px }
.cont .col3 .ico_img:hover{background-position: -60px -360px }
.cont .col4 .ico_img:hover{background-position: -60px -420px }
.cont .col5 .ico_img:hover{background-position: -60px -480px }
.cont .col6 .ico_img:hover{background-position: -60px -540px }
18. 게시판1
index.html
<div class="column col1">
<h3><span class="ico_img ir_pm">아이콘</span><span class="ico_tit">Notice</span></h3>
<p class="ico_desc">가장 웹 페이지에서 기본이 되는 게시판 유형입니다.</p>
<div class="notice">
<h4>Web Publisher Notice</h4>
<ul>
<li><a href="#">display:inline과 display:block 의 차이점은 무엇인가요?</a></li>
<li><a href="#">HTML 태그 중에 dl, dd, ul, ol,li 차이점은 무엇인가요?</a></li>
<li><a href="#">HTML 태그 중에 strong과 em 태그의 차이점은 무엇인가요?</a></li>
<li><a href="#">컨텐츠 요소를 가운데로 오게 하는 방법을 알려 주세요</a></li>
<li><a href="#">독타임을 선언하는 이유에 대해서 설명하세요.</a></li>
</ul>
<a href="" class="more ir_pm" title="더보기">더보기</a>
</div>
</div>
<!-- //col1 -->
style.css
/* 게시판 */
.notice{position: relative;}
.notice h4{font-size: 14px; color: #0093bd; padding-bottom: 3px; font-weight: bold;}
.notice ul li{overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: url(../img/dot.gif) no-repeat 0 8px; padding-left: 8px;}
.notice ul li a{font-size: 12px;}
.notice a.more{position: absolute; right: 0; top: 0px; display:block;background: url(../img/icon.png) -150px -90px; width: 17px; height: 17px;}
.notice a.more:hover{background-position: -167px -90px;}
19. 게시판2
index.html
<!-- 게시판2 -->
<div class="notice2">
<h4>웹 디자이너 면접 질문</h4>
<ul>
<li><a href="#">display:inline과 display:block 의 차이점은 무엇인가요?</a><span>2022.09.24</span></li>
<li><a href="#">HTML 태그 중에 dl, dd, ul, ol,li 차이점은 무엇인가요?</a><span>2022.09.24</span</li>
<li><a href="#">HTML 태그 중에 strong과 em 태그의 차이점은 무엇인가요?</a><span>2022.09.24</span</li>
<li><a href="#">컨텐츠 요소를 가운데로 오게 하는 방법을 알려 주세요</a><span>2022.09.24</span</li>
<li><a href="#">독타임을 선언하는 이유에 대해서 설명하세요.</a><span>2022.09.24</span</li>
</ul>
<a href="" class="more ir_pm" title="더보기">더보기</a>
</div>
<!-- //게시판2 -->
style.css
/* 2. 게시판 */
.notice2{position: relative; margin-top: 15px;}
.notice2 h4{font-size: 14px; color: #0093bd; padding-bottom: 3px; font-weight: bold;}
.notice2 li{overflow: hidden;background: url(../img/dot.gif) no-repeat 0 8px; padding-left: 8px;}
.notice2 li a{float: left; width: 65%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px;}
.notice2 li span{float: right; width: 30%; text-align: right;}
.notice2 a.more{position: absolute; right: 0; top: 0px; display:block;background: url(../img/icon.png) -150px -90px; width: 17px; height: 17px;}
.notice2 a.more:hover{background-position: -167px -90px;}
20. 게시판3
index.html
<!-- 게시판3 -->
<div class="notice3">
<h4>HTML Reference</h4>
<ul>
<li>
<a href="#">
<img src="img/notice01.jpg" alt="이미지1">
<strong>[HTML] table</strong>
<span>table 태그는 표를 만들 때 사용합니다.</span>
</a>
</li>
<li>
<a href="#">
<img src="img/notice02.jpg" alt="이미지2">
<strong>[HTML] table</strong>
<span>table 태그는 표를 만들 때 사용합니다.</span>
</a>
</li>
<li>
<a href="#">
<img src="img/notice03.jpg" alt="이미지3">
<strong>[HTML] table</strong>
<span>table 태그는 표를 만들 때 사용합니다.</span>
</a>
</li>
<li>
<a href="#">
<img src="img/notice04.jpg" alt="이미지4">
<strong>[HTML] table</strong>
<span>table 태그는 표를 만들 때 사용합니다.</span>
</a>
</li>
</ul>
<a href="" class="more ir_pm" title="더보기">더보기</a>
</div>
<!-- //게시판3 -->
style.css
/* 3. 게시판 */
.notice3{position: relative;}
.notice3 h4{font-size: 14px; color: #0093bd; padding-bottom: 3px; font-weight: bold;}
.notice3 li{overflow: hidden; position: relative; padding: 8px 0 14px 60px;}
.notice3 li a{float: left; }
.notice3 li a img{ position: absolute; left: 0px; top:0px; width: 50px; border: 1px solid #0093bd;}
.notice3 li a strong{display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.notice3 li a span{display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px;}
.notice3 a.more{position: absolute; right: 0; top: 0px; display:block;background: url(../img/icon.png) -150px -90px; width: 17px; height: 17px;}
.notice3 a.more:hover{background-position: -167px -90px;}
3.이벤트 및 추가 기능 실습
21. 마우스 오버효과1
index.html
<!-- 오버효과 -->
<div class="notice_hover">
<h4>Mouse Hover</h4>
<ul>
<li>
<a href="#">
<span>
<img src="img/sban01.jpg" alt="이미지1">
<em>바로가기</em>
</span>
<strong>와이어 프레임</strong>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/sban02.jpg" alt="이미지2">
<em>바로가기</em>
</span>
<strong>와이어 프레임</strong>
</a>
</li>
<li class="last">
<a href="#">
<span>
<img src="img/sban03.jpg" alt="이미지3">
<em>바로가기</em>
</span>
<strong>와이어 프레임</strong>
</a>
</li>
</ul>
</div>
<!-- //오버효과 -->
style.css
/* 오버효과 */
.notice_hover{position: relative;}
.notice_hover h4{font-size: 14px; color: #0093bd; padding-bottom: 3px; font-weight: bold;}
.notice_hover ul{overflow: hidden; }
.notice_hover li{float: left; width: 93px; margin-right: 5px; text-align: center;}
.notice_hover li:last-child{ margin-right: 0px;} /* ie9 부터 적용 */
.notice_hover li.last { margin-right: 0px;} /* 모든 브라우저 버전 적용 */
.notice_hover li a span{position: relative; display: block; width: 93px; height: 93px; line-height: 93px;}
.notice_hover li a span img{width: 100%;}
.notice_hover li a span em{visibility:hidden; position: absolute; left: 0; top:0px ; background: rgba(0,0,0,0.7); color: #fff; width: 100%;height: 100%;}
.notice_hover li a span:hover em{visibility: visible;}
.notice_hover li a strong{padding: 3px; display: inline-block; font-size: 12px;}
22. 마우스 오버효과2
index.html
<!-- 오버효과2 -->
<div class="notice_hover2 mt15">
<h4 class="ir_pm">Mouse Hover</h4>
<ul>
<li>
<a href="#">
<span>
<img src="img/sban04.jpg" alt="이미지4">
<em>바로가기</em>
</span>
<strong>HTML</strong>
</a>
</li>
<li>
<a href="#">
<span>
<img src="img/sban05.jpg" alt="이미지5">
<em>바로가기</em>
</span>
<strong>CSS</strong>
</a>
</li>
<li class="last">
<a href="#">
<span>
<img src="img/sban06.jpg" alt="이미지6">
<em>바로가기</em>
</span>
<strong>JQuery</strong>
</a>
</li>
</ul>
</div>
<!-- //오버효과2 -->
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}
.pt10{padding-top: 10px !important}
.pt15{padding-top: 15px !important}
.pt20{padding-top: 20px !important}
.pt25{padding-top: 25px !important}
.pt30{padding-top: 30px !important}
.pt35{padding-top: 35px !important}
.pt40{padding-top: 40px !important}
.pt45{padding-top: 45px !important}
.pt50{padding-top: 50px !important}
style.css
/* 오버효과2 */
.notice_hover2{position: relative; }
.notice_hover2 h4{font-size: 14px; color: #0093bd; padding-bottom: 3px; font-weight: bold;}
.notice_hover2 ul{overflow: hidden; text-align: center;}
.notice_hover2 li{float: left; width: 93px; margin-right: 5px; text-align: center;}
.notice_hover2 li:last-child{ margin-right: 0px;} /* ie9 부터 적용 */
.notice_hover2 li.last { margin-right: 0px;} /* 모든 브라우저 버전 적용 */
.notice_hover2 li a span{position: relative; display: block; width: 93px; height: 93px; }
.notice_hover2 li a span img{width: 100%;}
.notice_hover2 li a span em{visibility:hidden; position: absolute; left: 0px; bottom:0px ; width: 100%;background: rgba(0,0,0,0.7); color: #fff; }
.notice_hover2 li a span:hover em{visibility: visible;}
.notice_hover2 li a strong{padding: 3px; display: inline-block; font-size: 12px;}
23. 탭메뉴
index.html
<!-- 탭메뉴 -->
<div class="tab_menu">
<h4 class="ir_su">탭 메뉴</h4>
<ul>
<li class="active"><a href="#">공지사항1</a>
<ul>
<li><a href="#">첫번째 공지사항 탭 메뉴 테스트 목록 입니다. 첫번째 공지사항 탭 메뉴 테스트 목록 입니다.</a></li>
<li><a href="#">두번째 공지사항 탭 메뉴 테스트 목록 입니다. 두번째 공지사항 탭 메뉴 테스트 목록 입니다.</a></li>
<li><a href="#">세번째 공지사항 탭 메뉴 테스트 목록 입니다. 세번째 공지사항 탭 메뉴 테스트 목록 입니다.</a></li>
</ul>
</li>
<li><a href="#">공지사항2</a>
<ul style="display: none;">
<li><a href="#">첫번째 공지사항 탭 메뉴 테스트 목록 입니다. 첫번째 공지사항 탭 메뉴 테스트 목록 입니다.</a></li>
<li><a href="#">두번째 공지사항 탭 메뉴 테스트 목록 입니다. 두번째 공지사항 탭 메뉴 테스트 목록 입니다.</a></li>
<li><a href="#">세번째 공지사항 탭 메뉴 테스트 목록 입니다. 세번째 공지사항 탭 메뉴 테스트 목록 입니다.</a></li>
</ul>
</li>
<li><a href="#">공지사항3</a>
<ul style="display: none;">
<li><a href="#">첫번째 공지사항 탭 메뉴 테스트 목록 입니다. 첫번째 공지사항 탭 메뉴 테스트 목록 입니다.</a></li>
<li><a href="#">두번째 공지사항 탭 메뉴 테스트 목록 입니다. 두번째 공지사항 탭 메뉴 테스트 목록 입니다.</a></li>
<li><a href="#">세번째 공지사항 탭 메뉴 테스트 목록 입니다. 세번째 공지사항 탭 메뉴 테스트 목록 입니다.</a></li>
</ul>
</li>
</ul>
</div>
<!-- //탭메뉴 -->
style.css
/* 콘텐츠 요소를 보이지 않게 하는 방법 */
/*
1.display:none -- display:block (영역이 사라짐)
2.visibility :hidden ; --visibility:visible; (영역 유지)
3.opacity :0 --- opacity :1
4.width:0; height:0; overflow:hidden
*/
/* tab_menu */
.tab_menu{position: relative; border: 1px solid #ccc; padding: 8px; height: 105px;}
.tab_menu ul{overflow: hidden; border-bottom: 1px solid #ccc;}
.tab_menu ul li{float: left; border: 1px solid #ccc; margin-right: -1px; margin-bottom: -1px;}
.tab_menu ul li a{padding: 5px 10px; display: block;}
.tab_menu ul li ul{position: absolute; left: 0px; top: 48px; width: 270px; border: 0;}
.tab_menu ul li ul li{float: none; border: none; background: url(../img/dot.gif) no-repeat 9px 8px; padding-left: 18px; }
.tab_menu ul li ul li a{ overflow: hidden; text-overflow: ellipsis;white-space: nowrap; width: 100%; padding: 0 0 3px 0;}
.tab_menu ul li.active {background:#2c94c4 ;}
.tab_menu ul li.active a{color:#fff ;}
.tab_menu ul li.active ul li a{color: #333;}
24. 게시판4
index.html
<!-- 게시판4 -->
<div class="notice4">
<h4>최신 <em>공지사항</em></h4>
<ul>
<li><a href="#">웹디자이너와 퍼블리셔의 차이점은 무엇인가요?</a><span>2022.09.24</span></li>
<li><a href="#">HTML 태그 중에 dl, dd, ul, ol,li 차이점은 무엇인가요?</a><span>2022.09.24</span</li>
<li><a href="#">HTML 태그 중에 strong과 em 태그의 차이점은 무엇인가요?</a><span>2022.09.24</span</li>
</ul>
<a href="#" class="more" title="더보기">더보기</a>
</div>
<!-- //게시판4 -->
style.css
/* 4. 게시판 */
.notice4{position: relative; margin-top: 15px; border: 1px solid #ccc;}
.notice4 h4{font-size: 14px; color: #0093bd; padding-bottom: 3px; font-weight: bold; padding:8px 10px; font-size: 14px; font-weight: 700; border-bottom: 1px solid #ccc;}
.notice4 h4 em{ color: #cf3292;}
.notice4 ul{padding: 10px;}
.notice4 li{overflow: hidden;background: url(../img/dot.gif) no-repeat 0 8px; padding-left: 8px;}
.notice4 li a{float: left; width: 65%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px;}
.notice4 li span{float: right; width: 30%; text-align: right;}
.notice4 a.more{position: absolute; right: 9px; top: 9px; display:block;width: 37px; height: 17px;}
.notice4 a.more:hover{background-position: -167px -90px;}
댓글 ( 4)
댓글 남기기