웹 표준을 준수하여 사이트를 만드는 강의 입니다.
가장 기본적인 강의이며 처음 배우시는 분들에게 추천하는 수업입니다.
팝업을 연습하는 예제입니다.
영상을 보시면서 하나하나씩 따라하면서 익혀주세요. 많은 도움이 되실거예요.
Code Youtube
Reference Site
∗ dothome - CLICK
사용 프로그램
∗ filezilla - CLICK
∗ brackets - CLICK
∗ sublime - CLICK
∗ visualstudio - CLICK
- 에디터는 본인이 편한것으로 사용하시면 되고, 저는 이번 강의에서 브라켓을 사용하였습니다. -
Code example
- 완성 소스
- index.html
- style.css
- reset.css
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="author" content="webstoryboy">
<meta name="description" content="웹 표준을 준수한 사이트 예제입니다.">
<meta name="keywords" content="웹스토리보이, 웹표준, 웹접근성, 사이트 만들기">
<meta name="generator" content="brakets">
<title>WEBSTROYBOY SITE</title>
<!-- CSS STYLE
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
-->
<style>
/* 여백 초기화 */
body, div, ul, li, dl, dt, ol, h1, h2, h3, h4, h5, h6, input, fieldset, legend, p, select, table, th, td, tr, textarea, button, form {margin: 0; padding: 0;}
/* a 링크 초기화 */
a {color: #222; text-decoration: none;}
a:hover {color: #390;}
/* 폰트 초기화 */
body, input, textarea, select, button, table {
font-family:'Nanum Gothic', AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif; color: #222; font-size: 13px; line-height: 1.5;}
/* 폰트 스타일 초기화 */
em {font-style: normal;}
/* 블릿기호 초기화 */
dl, ul, li, ol, menu {list-style: none;}
/* 제목 태그 초기화 */
h1, h2, h3, h4, h5, h6 {font-size: 13px; color:#222; font-weight: normal;}
/* 테두리 초기화 */
img, fieldset {border: 0 none;}
/* 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; line-height: 0; text-indent: -9999px;} /* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 */
/* 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>
<style>
/* 스킵 내비게이션 */
#skip {position: relative;}
#skip a {position: absolute; left: 0px; top: -35px; border: 1px solid #fff; color: #fff; background: #333; line-height: 30px; width: 140px; text-align: center;}
#skip a:active,
#skip a:focus {top: 0;}
/* 레이아웃 */
#wrap {}
#header {height: 325px; background: url(../img/header_bg.jpg)center top repeat-x;}
#contents {}
#footer {height: 200px; background: #333;}
/* 컨텐츠 레이아웃 */
#cont_nav {background-color: #f6fdff;}
#cont_tit {background-color: #EAF7FD;}
#cont_ban {background-color: #dceff7;}
#cont_cont {background-color: #f6fdff;}
/* 컨테이너 */
.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 13px; display: inline-block;}
.header .header-menu a:hover {color: #666;}
.header .header-tit {text-align: center;}
.header .header-tit h1 {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: inline-block; background-color: #2698cb; font-size: 18px; color: #fff; padding: 5px 20px 6px 20px; margin-top: -5px;}
.header .header-icon {text-align: center; margin-top: 30px;}
.header .header-icon a {width: 60px; height: 60px; display: inline-block; 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을 사용합니다. (O) --> 현재는 제일 많이 사용.
4. clearfix를 사용합니다. (O)
*/
/* 전체 메뉴 */
.nav {overflow: hidden; padding: 30px 0;}
.nav > div {float: left; width: 40%;}
.nav > div:last-child {width: 20%;} /* ie9부터 사용 가능 */
.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 {width: 100%;}
.nav > div ol li a:hover {text-decoration: underline;}
/* 타이틀 */
.tit {position: relative;}
.tit h2 {font-size: 40px; text-align: center; padding: 5px 0; letter-spacing: 2px; color: #2c94c4; font-family: 'Nanum Brush Script', cursive;}
.tit .btn {position: absolute; top: 5px; right: 0; width: 60px; height: 60px; background: url(../img/icon.png) no-repeat 0 -600px;}
/* 배너 */
.ban {position: relative; padding: 24px 0 20px;}
.ban a.prev {position: absolute; left: -80px; top: 60px; width: 43px; height: 43px; background: #ccc; background: url(../img/icon.png) no-repeat -150px 0;}
.ban a.next {position: absolute; right: -80px; 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;}
/* 컨텐츠 */
.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 .column.col1 {border-right: 1px solid #c8c8c8;}
.cont .column.col2 {border-right: 1px solid #c8c8c8;}
.cont .column.col3 {margin-right: 0; padding-right: 0;}
.cont .column.col4 {border-right: 1px solid #c8c8c8;}
.cont .column.col5 {border-right: 1px solid #c8c8c8;}
.cont .column.col6 {margin-right: 0; padding-right: 0;}
.cont .column .ico_img {display: block; width: 60px; height: 60px; background: url(../img/icon.png) no-repeat; position: absolute; left: 0; top: 0;}
.cont .column .ico_tit {padding-left: 70px; font-size: 16px; color: #2c94c4;}
.cont .column .ico_desc {padding-left: 70px; border-bottom: 1px solid #d0d0d0; padding-bottom: 15px; margin-bottom: 15px;}
.cont .col1 .ico_img {background-position: 0 -240px;}
.cont .col2 .ico_img {background-position: 0 -300px;}
.cont .col3 .ico_img {background-position: 0 -360px;}
.cont .col4 .ico_img {background-position: 0 -420px;}
.cont .col5 .ico_img {background-position: 0 -480px;}
.cont .col6 .ico_img {background-position: 0 -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;}
/* 게시판 */
.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: 0; display: block; background: url(../img/icon.png) -150px -90px; width: 17px; height: 17px;}
/* 게시판2 */
.notice2 {position: relative;}
.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;}
.notice2 li span {float: right; width: 30%; text-align: right;}
.notice2 a.more {position: absolute; right: 0; top: 0; display: block; background: url(../img/icon.png) -150px -90px; width: 17px; height: 17px;}
/* 게시판3 */
.notice3 {position: relative;}
.notice3 h4 {font-size: 14px; color: #0093bd; padding-bottom: 3px; font-weight: bold;}
.notice3 li {position: relative; padding: 8px 0 14px 60px;}
.notice3 li a img {width: 50px; position: absolute; left: 0; top: 0; 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;}
.notice2 a.more {position: absolute; right: 0; top: 0; display: block; background: url(../img/icon.png) -150px -90px; width: 17px; height: 17px;}
/* 마우스 오버효과1 */
.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: 0;} /* ie9부터 적용 */
.notice_hover li.last {margin-right: 0;} /* 모든 브라우저에 적용 */
.notice_hover li span {position: relative; display: block; width: 93px; height: 93px; line-height: 93px;}
.notice_hover li span img {width: 100%;}
.notice_hover li span em {visibility: hidden; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.7); color:#fff; width: 100%; height: 100%;}
.notice_hover li span:hover em {visibility: visible;}
.notice_hover li strong {padding-top: 3px; display: inline-block; font-size: 12px;}
/* 마우스 오버효과2 */
.notice_hover2 {}
.notice_hover2 ul {overflow: hidden;}
.notice_hover2 li {float: left; width: 93px; text-align: center; margin-right: 5px;}
.notice_hover2 li.last {margin-right: 0;}
.notice_hover2 li a {}
.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: 0; bottom: 0; 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-top: 3px; display: inline-block; font-size: 12px;}
/* 콘텐츠 id 요소를 보이지 않게하는 방법
1. display: none; -- display: block; (영역이 사라짐)
2. visibility: hidden; -- visibility: visible; (영역유지)
3. opasity: 0; -- opasity: 1; (영역유지)
4. width: 0; height: 0; overflow: hidden;
*/
/* 탭 메뉴 */
.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: 0; top: 48px; width: 270px; border: 0;}
.tab_menu ul li ul li {float: none; border: 0; 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;}
/* 게시판4 */
.notice4 {position: relative; border: 1px solid #ccc;}
.notice4 h4 {border-bottom: 1px solid #ccc; font-size: 14px; color: #0093bd; font-weight: 700; padding: 8px 10px;}
.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; padding-bottom: 2px;}
.notice4 li a {float: left; width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.notice4 li span {float: right; width: 30%; text-align: right;}
.notice4 a.more {position: absolute; right: 9px; top: 9px;}
/* 갤러리 */
.gallery {position: relative; border: 1px solid #ccc; height: 254px; overflow: hidden;}
.gallery h4 {font-size: 14px; color: #0093bd; border-bottom: 1px solid #ccc; padding: 10px 0 8px 11px; font-weight: bold;}
.gallery .gallery_btn {position: absolute; right: 5px; top: 7px;}
.gallery .gallery_btn ul {overflow: hidden;}
.gallery .gallery_btn li {float: left; margin: 1px 2px;}
.gallery .gallery_btn li a {display: block; width: 23px; height: 23px; background: url(../img/icon.png) no-repeat;}
.gallery .gallery_btn li.gb_icon1 a {background-position: -150px -120px;}
.gallery .gallery_btn li.gb_icon2 a {background-position: -150px -143px;}
.gallery .gallery_btn li.gb_icon3 a {background-position: -150px -166px;}
.gallery .gallery_btn li.gb_icon4 a {background-position: -150px -189px;}
.gallery .gallery_btn li.gb_icon1 a:hover {background-position: -173px -120px;}
.gallery .gallery_btn li.gb_icon2 a:hover {background-position: -173px -143px;}
.gallery .gallery_btn li.gb_icon3 a:hover {background-position: -173px -166px;}
.gallery .gallery_btn li.gb_icon4 a:hover {background-position: -173px -189px;}
.gallery .gallery_img img {width: 100%;}
/* 로그인 */
#login-wrap {margin-bottom: 15px; background: #f2f4f5; padding: 15px;}
.login_header {overflow: hidden; font-size: 12px; height: 30px;}
.login_header .lh_check {float: left; padding-right: 15px;}
.login_header .lh_check .input_check {vertical-align: -2px;}
.login_header .lh_ip {float: left;}
.login_header .lh_ip em {color: #0093bd; text-decoration: underline;}
.login_content {position: relative;}
.login_content .lc_btn {position: absolute; right: 0; top: 0; width: 62px; height: 47px; background: #fff; border: 1px solid #bebebe;}
.login_content .input_text {width: 182px; height: 16px; padding: 2px 5px; border: 1px solid #bebebe; margin-bottom: 3px; background: #fff;}
.login_footer {margin-top: 5px;}
.login_footer li {display: inline;}
.login_footer li a {font-size: 12px;}
/* 팝업 */
.popup h4 {font-size: 14px; color: #0093bd; padding-bottom: 4px; font-weight: 700;}
.popup ul {overflow: hidden;}
.popup li {float: left; width: 93px; margin-right: 5px;}
.popup li.last {margin-right: 0;}
.popup li img {width: 100%;}
</style>
<!-- 웹 폰트 -->
<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script&display=swap" rel="stylesheet">
</head>
<body>
<!-- 스킵 내비게이션 -->
<div id="skip">
<a href="#cont_nav">전체 메뉴 바로가기</a>
<a href="#cont_nav">배너 메뉴 바로가기</a>
<a href="#cont_cont">컨텐츠 메뉴 바로가기</a>
</div>
<!-- //스킵 내비게이션 -->
<div id="wrap">
<div id="header">
<div class="container">
<div class="header">
<div class="header-menu">
<a href="https://wiss.tistory.com">Desinger</a>
<a href="https://webstoryboy">Publisher</a>
<a href="https://www.youtube.com/channel/UCsvQSv7EeCMHyYb9ENKAJZw">Youtube</a>
</div>
<!-- //헤더 메뉴 -->
<div class="header-tit">
<h1>Professional Publisher & Designer</h1><br>
<a href="https://webstoryboy.co.kr">webstoryboy.co.kr</a>
</div>
<!-- //헤더 타이틀 -->
<!-- 이미지를 표현하는 방법
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>
<!-- //헤더 아이콘-->
</div>
</div>
</div>
<!-- //header -->
<div id="contents">
<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 -->
<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>
<!-- //con_tit -->
<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>
<!-- //con_ban -->
<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 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>
<!-- //게시판 -->
<!-- 게시판2 -->
<div class="notice2">
<h4>Web Designer Notice</h4>
<ul>
<li><a href="#">JPG, PNG, GIF의 차이점이 무엇인가요?</a><span>2018.11.16</span></li>
<li><a href="#">UI 디자인과 UX 디자인의 차이점을 설명하세요.</a><span>2018.11.16</span></li>
<li><a href="#">인터랙션 디자인의 핵심은 무엇이라고 생각하나요?</a><span>2018.11.16</span></li>
<li><a href="#">포트폴리오를 하면서 가장 잘 했다고 생각하는 부분은 무엇인가요?</a><span>2018.11.16</span></li>
<li><a href="#">웹 디자인과 모바일 디자인의 차이가 무엇이라고 생각하나요?</a><span>2018.11.16</span></li>
</ul>
<a href="#" class="more ir_pm" title="더보기">더보기</a>
</div>
<!-- //게시판2 -->
</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>
<!-- 게시판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] div</strong>
<span>div 태그는 문서의 섹션을 만들거나 영역을 나눌 때 사용합니다.</span>
</a>
</li>
<li>
<a href="#">
<img src="img/notice03.jpg" alt="이미지3">
<strong>[HTML] dl</strong>
<span>dl 태그는 용어를 설명하는 목록형 태그입니다.</span>
</a>
</li>
<li>
<a href="#">
<img src="img/notice04.jpg" alt="이미지4">
<strong>[HTML] em</strong>
<span>em 태그는 텍스트를 강조할 때 사용합니다.</span>
</a>
</li>
</ul>
<a href="#" class="more ir_pm" title="더보기">더보기</a>
</div>
<!--// 게시판3 -->
</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 id="login-wrap">
<h4 class="ir_su">로그인 정보</h4>
<form id="login_form" name="login_from" action="post">
<fieldset>
<legend class="ir_su">로그인 및 관련 설정</legend>
<div class="login_header">
<h5 class="ir_su">로그인 보안</h5>
<div class="lh_check">
<input id="infor_check" type="checkbox" class="input_check">
<label for="infor_check">로그인 상태 유지</label>
</div>
<div class="lh_ip">
IP보안 <em>ON</em>
</div>
</div>
<div class="login_content">
<h5 class="ir_su">로그인 영역</h5>
<div class="lc_text">
<label for="uid" class="ir_su">아이디</label>
<input type="text" id="uid" name="uid" class="input_text" maxlength="20">
<label for="upw" class="ir_su">비밀번호</label>
<input type="password" id="upw" name="upw" class="input_text" maxlength="20">
</div>
<button class="lc_btn" type="submit">로그인</button>
</div>
<div class="login_footer">
<h5 class="ir_su">로그인 문제해결</h5>
<ul>
<li><a href="#"><strong>회원가입</strong></a> / </li>
<li><a href="#">아이디</a>·<a href="#">비밀번호 찾기</a></li>
</ul>
</div>
</fieldset>
</form>
</div>
<!-- //로그인 -->
<!-- 팝업 -->
<div class="popup">
<h4>Advertisement</h4>
<ul>
<li><a href="#"><img src="img/sban07.jpg" alt="이미지1"></a></li>
<li><a href="#"><img src="img/sban08.jpg" alt="이미지2"></a></li>
<li class="last"><a href="#"><img src="img/sban09.jpg" alt="이미지3"></a></li>
</ul>
</div>
<!-- //팝업 -->
</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 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>UI 디자인</strong>
</a>
</li>
</ul>
</div>
<!-- //오버효과 -->
<!-- 오버효과2-->
<div class="notice_hover2 mt15">
<h4 class="ir_su">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-->
</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 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>
<!-- //탭메뉴 -->
<!-- 게시판4 -->
<div class="notice4 mt15">
<h4>최신 <em>공지사항</em></h4>
<ul>
<li><a href="#">웹 디자이너와 웹 퍼블리셔의 차이점은 무엇인가요?</a><span>2018.11.19</span></li>
<li><a href="#">웹 디자이너와 웹 퍼블리셔의 차이점은 무엇인가요?</a><span>2018.11.19</span></li>
<li><a href="#">웹 디자이너와 웹 퍼블리셔의 차이점은 무엇인가요?</a><span>2018.11.19</span></li>
</ul>
<a href="#" class="more" title="더보기">더보기</a>
</div>
<!-- //게시판4 -->
</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 class="gallery">
<h4>포트폴리오</h4>
<div class="gallery_btn">
<ul>
<li class="gb_icon1"><a href="#"><span class="ir_pm">시작</span></a></li>
<li class="gb_icon2"><a href="#"><span class="ir_pm">정지</span></a></li>
<li class="gb_icon3"><a href="#"><span class="ir_pm">이전이미지</span></a></li>
<li class="gb_icon4"><a href="#"><span class="ir_pm">다음이미지</span></a></li>
</ul>
</div>
<div class="gallery_img">
<ul>
<li><a href="#"><img src="img/gallery01.jpg" alt="갤러리1"></a></li>
<li><a href="#"><img src="img/gallery02.jpg" alt="갤러리2"></a></li>
<li><a href="#"><img src="img/gallery03.jpg" alt="갤러리3"></a></li>
<li><a href="#"><img src="img/gallery04.jpg" alt="갤러리4"></a></li>
<li><a href="#"><img src="img/gallery05.jpg" alt="갤러리5"></a></li>
</ul>
</div>
</div>
<!-- //갤러리 -->
</div>
<!-- //col6 -->
</div>
</div>
</div>
<!-- //cont_cont -->
</div>
<!-- //contents -->
<div id="footer">
<div class="container">footer</div>
</div>
<!-- //footer -->
</div>
<!-- //wrap -->
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="author" content="webstoryboy">
<meta name="description" content="웹 표준을 준수한 사이트 예제입니다.">
<meta name="keywords" content="웹스토리보이, 웹표준, 웹접근성, 사이트 만들기">
<meta name="generator" content="brakets">
<title>WEBSTROYBOY SITE</title>
<!-- CSS STYLE -->
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
<!-- 웹 폰트 -->
<link href="https://fonts.googleapis.com/css?family=Nanum+Gothic&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nanum+Brush+Script&display=swap" rel="stylesheet">
</head>
<body>
<!-- 스킵 내비게이션 -->
<div id="skip">
<a href="#cont_nav">전체 메뉴 바로가기</a>
<a href="#cont_nav">배너 메뉴 바로가기</a>
<a href="#cont_cont">컨텐츠 메뉴 바로가기</a>
</div>
<!-- //스킵 내비게이션 -->
<div id="wrap">
<div id="header">
<div class="container">
<div class="header">
<div class="header-menu">
<a href="https://wiss.tistory.com">Desinger</a>
<a href="https://webstoryboy">Publisher</a>
<a href="https://www.youtube.com/channel/UCsvQSv7EeCMHyYb9ENKAJZw">Youtube</a>
</div>
<!-- //헤더 메뉴 -->
<div class="header-tit">
<h1>Professional Publisher & Designer</h1><br>
<a href="https://webstoryboy.co.kr">webstoryboy.co.kr</a>
</div>
<!-- //헤더 타이틀 -->
<!-- 이미지를 표현하는 방법
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>
<!-- //헤더 아이콘-->
</div>
</div>
</div>
<!-- //header -->
<div id="contents">
<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 -->
<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>
<!-- //con_tit -->
<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>
<!-- //con_ban -->
<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 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>
<!-- //게시판 -->
<!-- 게시판2 -->
<div class="notice2">
<h4>Web Designer Notice</h4>
<ul>
<li><a href="#">JPG, PNG, GIF의 차이점이 무엇인가요?</a><span>2018.11.16</span></li>
<li><a href="#">UI 디자인과 UX 디자인의 차이점을 설명하세요.</a><span>2018.11.16</span></li>
<li><a href="#">인터랙션 디자인의 핵심은 무엇이라고 생각하나요?</a><span>2018.11.16</span></li>
<li><a href="#">포트폴리오를 하면서 가장 잘 했다고 생각하는 부분은 무엇인가요?</a><span>2018.11.16</span></li>
<li><a href="#">웹 디자인과 모바일 디자인의 차이가 무엇이라고 생각하나요?</a><span>2018.11.16</span></li>
</ul>
<a href="#" class="more ir_pm" title="더보기">더보기</a>
</div>
<!-- //게시판2 -->
</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>
<!-- 게시판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] div</strong>
<span>div 태그는 문서의 섹션을 만들거나 영역을 나눌 때 사용합니다.</span>
</a>
</li>
<li>
<a href="#">
<img src="img/notice03.jpg" alt="이미지3">
<strong>[HTML] dl</strong>
<span>dl 태그는 용어를 설명하는 목록형 태그입니다.</span>
</a>
</li>
<li>
<a href="#">
<img src="img/notice04.jpg" alt="이미지4">
<strong>[HTML] em</strong>
<span>em 태그는 텍스트를 강조할 때 사용합니다.</span>
</a>
</li>
</ul>
<a href="#" class="more ir_pm" title="더보기">더보기</a>
</div>
<!--// 게시판3 -->
</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 id="login-wrap">
<h4 class="ir_su">로그인 정보</h4>
<form id="login_form" name="login_from" action="post">
<fieldset>
<legend class="ir_su">로그인 및 관련 설정</legend>
<div class="login_header">
<h5 class="ir_su">로그인 보안</h5>
<div class="lh_check">
<input id="infor_check" type="checkbox" class="input_check">
<label for="infor_check">로그인 상태 유지</label>
</div>
<div class="lh_ip">
IP보안 <em>ON</em>
</div>
</div>
<div class="login_content">
<h5 class="ir_su">로그인 영역</h5>
<div class="lc_text">
<label for="uid" class="ir_su">아이디</label>
<input type="text" id="uid" name="uid" class="input_text" maxlength="20">
<label for="upw" class="ir_su">비밀번호</label>
<input type="password" id="upw" name="upw" class="input_text" maxlength="20">
</div>
<button class="lc_btn" type="submit">로그인</button>
</div>
<div class="login_footer">
<h5 class="ir_su">로그인 문제해결</h5>
<ul>
<li><a href="#"><strong>회원가입</strong></a> / </li>
<li><a href="#">아이디</a>·<a href="#">비밀번호 찾기</a></li>
</ul>
</div>
</fieldset>
</form>
</div>
<!-- //로그인 -->
<!-- 팝업 -->
<div class="popup">
<h4>Advertisement</h4>
<ul>
<li><a href="#"><img src="img/sban07.jpg" alt="이미지1"></a></li>
<li><a href="#"><img src="img/sban08.jpg" alt="이미지2"></a></li>
<li class="last"><a href="#"><img src="img/sban09.jpg" alt="이미지3"></a></li>
</ul>
</div>
<!-- //팝업 -->
</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 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>UI 디자인</strong>
</a>
</li>
</ul>
</div>
<!-- //오버효과 -->
<!-- 오버효과2-->
<div class="notice_hover2 mt15">
<h4 class="ir_su">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-->
</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 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>
<!-- //탭메뉴 -->
<!-- 게시판4 -->
<div class="notice4 mt15">
<h4>최신 <em>공지사항</em></h4>
<ul>
<li><a href="#">웹 디자이너와 웹 퍼블리셔의 차이점은 무엇인가요?</a><span>2018.11.19</span></li>
<li><a href="#">웹 디자이너와 웹 퍼블리셔의 차이점은 무엇인가요?</a><span>2018.11.19</span></li>
<li><a href="#">웹 디자이너와 웹 퍼블리셔의 차이점은 무엇인가요?</a><span>2018.11.19</span></li>
</ul>
<a href="#" class="more" title="더보기">더보기</a>
</div>
<!-- //게시판4 -->
</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 class="gallery">
<h4>포트폴리오</h4>
<div class="gallery_btn">
<ul>
<li class="gb_icon1"><a href="#"><span class="ir_pm">시작</span></a></li>
<li class="gb_icon2"><a href="#"><span class="ir_pm">정지</span></a></li>
<li class="gb_icon3"><a href="#"><span class="ir_pm">이전이미지</span></a></li>
<li class="gb_icon4"><a href="#"><span class="ir_pm">다음이미지</span></a></li>
</ul>
</div>
<div class="gallery_img">
<ul>
<li><a href="#"><img src="img/gallery01.jpg" alt="갤러리1"></a></li>
<li><a href="#"><img src="img/gallery02.jpg" alt="갤러리2"></a></li>
<li><a href="#"><img src="img/gallery03.jpg" alt="갤러리3"></a></li>
<li><a href="#"><img src="img/gallery04.jpg" alt="갤러리4"></a></li>
<li><a href="#"><img src="img/gallery05.jpg" alt="갤러리5"></a></li>
</ul>
</div>
</div>
<!-- //갤러리 -->
</div>
<!-- //col6 -->
</div>
</div>
</div>
<!-- //cont_cont -->
</div>
<!-- //contents -->
<div id="footer">
<div class="container">footer</div>
</div>
<!-- //footer -->
</div>
<!-- //wrap -->
</body>
</html>
@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: 140px; text-align: center;}
#skip a:active,
#skip a:focus {top: 0;}
/* 레이아웃 */
#wrap {}
#header {height: 325px; background: url(../img/header_bg.jpg)center top repeat-x;}
#contents {}
#footer {height: 200px; background: #333;}
/* 컨텐츠 레이아웃 */
#cont_nav {background-color: #f6fdff;}
#cont_tit {background-color: #EAF7FD;}
#cont_ban {background-color: #dceff7;}
#cont_cont {background-color: #f6fdff;}
/* 컨테이너 */
.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 13px; display: inline-block;}
.header .header-menu a:hover {color: #666;}
.header .header-tit {text-align: center;}
.header .header-tit h1 {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: inline-block; background-color: #2698cb; font-size: 18px; color: #fff; padding: 5px 20px 6px 20px; margin-top: -5px;}
.header .header-icon {text-align: center; margin-top: 30px;}
.header .header-icon a {width: 60px; height: 60px; display: inline-block; 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을 사용합니다. (O) --> 현재는 제일 많이 사용.
4. clearfix를 사용합니다. (O)
*/
/* 전체 메뉴 */
.nav {overflow: hidden; padding: 30px 0;}
.nav > div {float: left; width: 40%;}
.nav > div:last-child {width: 20%;} /* ie9부터 사용 가능 */
.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 {width: 100%;}
.nav > div ol li a:hover {text-decoration: underline;}
/* 타이틀 */
.tit {position: relative;}
.tit h2 {font-size: 40px; text-align: center; padding: 5px 0; letter-spacing: 2px; color: #2c94c4; font-family: 'Nanum Brush Script', cursive;}
.tit .btn {position: absolute; top: 5px; right: 0; width: 60px; height: 60px; background: url(../img/icon.png) no-repeat 0 -600px;}
/* 배너 */
.ban {position: relative; padding: 24px 0 20px;}
.ban a.prev {position: absolute; left: -80px; top: 60px; width: 43px; height: 43px; background: #ccc; background: url(../img/icon.png) no-repeat -150px 0;}
.ban a.next {position: absolute; right: -80px; 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;}
/* 컨텐츠 */
.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 .column.col1 {border-right: 1px solid #c8c8c8;}
.cont .column.col2 {border-right: 1px solid #c8c8c8;}
.cont .column.col3 {margin-right: 0; padding-right: 0;}
.cont .column.col4 {border-right: 1px solid #c8c8c8;}
.cont .column.col5 {border-right: 1px solid #c8c8c8;}
.cont .column.col6 {margin-right: 0; padding-right: 0;}
.cont .column .ico_img {display: block; width: 60px; height: 60px; background: url(../img/icon.png) no-repeat; position: absolute; left: 0; top: 0;}
.cont .column .ico_tit {padding-left: 70px; font-size: 16px; color: #2c94c4;}
.cont .column .ico_desc {padding-left: 70px; border-bottom: 1px solid #d0d0d0; padding-bottom: 15px; margin-bottom: 15px;}
.cont .col1 .ico_img {background-position: 0 -240px;}
.cont .col2 .ico_img {background-position: 0 -300px;}
.cont .col3 .ico_img {background-position: 0 -360px;}
.cont .col4 .ico_img {background-position: 0 -420px;}
.cont .col5 .ico_img {background-position: 0 -480px;}
.cont .col6 .ico_img {background-position: 0 -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;}
/* 게시판 */
.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: 0; display: block; background: url(../img/icon.png) -150px -90px; width: 17px; height: 17px;}
/* 게시판2 */
.notice2 {position: relative;}
.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;}
.notice2 li span {float: right; width: 30%; text-align: right;}
.notice2 a.more {position: absolute; right: 0; top: 0; display: block; background: url(../img/icon.png) -150px -90px; width: 17px; height: 17px;}
/* 게시판3 */
.notice3 {position: relative;}
.notice3 h4 {font-size: 14px; color: #0093bd; padding-bottom: 3px; font-weight: bold;}
.notice3 li {position: relative; padding: 8px 0 14px 60px;}
.notice3 li a img {width: 50px; position: absolute; left: 0; top: 0; 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;}
.notice2 a.more {position: absolute; right: 0; top: 0; display: block; background: url(../img/icon.png) -150px -90px; width: 17px; height: 17px;}
/* 마우스 오버효과1 */
.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: 0;} /* ie9부터 적용 */
.notice_hover li.last {margin-right: 0;} /* 모든 브라우저에 적용 */
.notice_hover li span {position: relative; display: block; width: 93px; height: 93px; line-height: 93px;}
.notice_hover li span img {width: 100%;}
.notice_hover li span em {visibility: hidden; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.7); color:#fff; width: 100%; height: 100%;}
.notice_hover li span:hover em {visibility: visible;}
.notice_hover li strong {padding-top: 3px; display: inline-block; font-size: 12px;}
/* 마우스 오버효과2 */
.notice_hover2 {}
.notice_hover2 ul {overflow: hidden;}
.notice_hover2 li {float: left; width: 93px; text-align: center; margin-right: 5px;}
.notice_hover2 li.last {margin-right: 0;}
.notice_hover2 li a {}
.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: 0; bottom: 0; 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-top: 3px; display: inline-block; font-size: 12px;}
/* 콘텐츠 id 요소를 보이지 않게하는 방법
1. display: none; -- display: block; (영역이 사라짐)
2. visibility: hidden; -- visibility: visible; (영역유지)
3. opasity: 0; -- opasity: 1; (영역유지)
4. width: 0; height: 0; overflow: hidden;
*/
/* 탭 메뉴 */
.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: 0; top: 48px; width: 270px; border: 0;}
.tab_menu ul li ul li {float: none; border: 0; 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;}
/* 게시판4 */
.notice4 {position: relative; border: 1px solid #ccc;}
.notice4 h4 {border-bottom: 1px solid #ccc; font-size: 14px; color: #0093bd; font-weight: 700; padding: 8px 10px;}
.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; padding-bottom: 2px;}
.notice4 li a {float: left; width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.notice4 li span {float: right; width: 30%; text-align: right;}
.notice4 a.more {position: absolute; right: 9px; top: 9px;}
/* 갤러리 */
.gallery {position: relative; border: 1px solid #ccc; height: 254px; overflow: hidden;}
.gallery h4 {font-size: 14px; color: #0093bd; border-bottom: 1px solid #ccc; padding: 10px 0 8px 11px; font-weight: bold;}
.gallery .gallery_btn {position: absolute; right: 5px; top: 7px;}
.gallery .gallery_btn ul {overflow: hidden;}
.gallery .gallery_btn li {float: left; margin: 1px 2px;}
.gallery .gallery_btn li a {display: block; width: 23px; height: 23px; background: url(../img/icon.png) no-repeat;}
.gallery .gallery_btn li.gb_icon1 a {background-position: -150px -120px;}
.gallery .gallery_btn li.gb_icon2 a {background-position: -150px -143px;}
.gallery .gallery_btn li.gb_icon3 a {background-position: -150px -166px;}
.gallery .gallery_btn li.gb_icon4 a {background-position: -150px -189px;}
.gallery .gallery_btn li.gb_icon1 a:hover {background-position: -173px -120px;}
.gallery .gallery_btn li.gb_icon2 a:hover {background-position: -173px -143px;}
.gallery .gallery_btn li.gb_icon3 a:hover {background-position: -173px -166px;}
.gallery .gallery_btn li.gb_icon4 a:hover {background-position: -173px -189px;}
.gallery .gallery_img img {width: 100%;}
/* 로그인 */
#login-wrap {margin-bottom: 15px; background: #f2f4f5; padding: 15px;}
.login_header {overflow: hidden; font-size: 12px; height: 30px;}
.login_header .lh_check {float: left; padding-right: 15px;}
.login_header .lh_check .input_check {vertical-align: -2px;}
.login_header .lh_ip {float: left;}
.login_header .lh_ip em {color: #0093bd; text-decoration: underline;}
.login_content {position: relative;}
.login_content .lc_btn {position: absolute; right: 0; top: 0; width: 62px; height: 47px; background: #fff; border: 1px solid #bebebe;}
.login_content .input_text {width: 182px; height: 16px; padding: 2px 5px; border: 1px solid #bebebe; margin-bottom: 3px; background: #fff;}
.login_footer {margin-top: 5px;}
.login_footer li {display: inline;}
.login_footer li a {font-size: 12px;}
/* 팝업 */
.popup h4 {font-size: 14px; color: #0093bd; padding-bottom: 4px; font-weight: 700;}
.popup ul {overflow: hidden;}
.popup li {float: left; width: 93px; margin-right: 5px;}
.popup li.last {margin-right: 0;}
.popup li img {width: 100%;}
@charset "utf-8";
/* 여백 초기화 */
body, div, ul, li, dl, dt, ol, h1, h2, h3, h4, h5, h6, input, fieldset, legend, p, select, table, th, td, tr, textarea, button, form {margin: 0; padding: 0;}
/* a 링크 초기화 */
a {color: #222; text-decoration: none;}
a:hover {color: #390;}
/* 폰트 초기화 */
body, input, textarea, select, button, table {
font-family:'Nanum Gothic', AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif; color: #222; font-size: 13px; line-height: 1.5;}
/* 폰트 스타일 초기화 */
em {font-style: normal;}
/* 블릿기호 초기화 */
dl, ul, li, ol, menu {list-style: none;}
/* 제목 태그 초기화 */
h1, h2, h3, h4, h5, h6 {font-size: 13px; color:#222; font-weight: normal;}
/* 테두리 초기화 */
img, fieldset {border: 0 none;}
/* 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; line-height: 0; text-indent: -9999px;} /* 대체 텍스트가 아닌 접근성을 위한 숨김 텍스트를 제공할 때 */
/* 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;}
도움이 되셨다면 구독과 좋아요 버튼을 꾸욱~~!!
여러분의 댓글은 영상을 제작하는데 많은 힘이 됩니다.
모르시거나 궁금한 사항은 언제든지 댓글로 남겨주세요.
최대한 힘이 되어 드리겠습니다.
오늘도 수고하셨습니다.
728x90
