웹 표준을 준수하여 사이트를 만드는 강의 입니다.
저와 함께 하나하나씩 잘 따라하시면서 공부하시면 웹퍼블리셔에 한 발짝 더 다가가실 수 있을 거예요.
꼭 직접 코딩을 같이 해보셔야 실력이 늘것입니다.
같이 따라하시다가 틀리거나 안되는게 있으시면 본인이 코딩한 것과 제 강의 소스를 비교하시면서 스스로 어디가 틀렸는지 찾아보세요.
그것 또한 공부가 될거랍니다.
아무리 찾아봐도 안되실때는 댓글에 올려주시면 해결해 드리겠습니다.^^
오늘도 여러분의 열공을 응원하며, 화이팅 입니다!!!!
Code Youtube
Reference Site
∗ dothome - CLICK
사용 프로그램
∗ filezilla - CLICK
∗ brackets - CLICK
∗ sublime - CLICK
∗ visualstudio - CLICK
- 에디터는 본인이 편한것으로 사용하시면 되고, 저는 이번 강의에서 브라켓을 사용하였습니다. -
Code example
<!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;}
</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 {width: 100%;}
#header {width: 100%; height: 325px; background: url(../img/header_bg.jpg)center top repeat-x;}
#contents {width: 100%; height: 800px; background: #222;}
#footer {width: 100%; height: 200px; background: #333;}
/* 컨텐츠 레이아웃 */
#cont_nav {width: 100%; height: 200px; background: #333;}
#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 .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 {}
.header .header-icon {}
</style>
</head>
<body>
<!-- 스킵 내비게이션 -->
<div id="skip">
<a href="#cont_nav">전체 메뉴 바로가기</a>
<a href="#cont_ban">배너 메뉴 바로가기</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"></div>
<div class="header-icon"></div>
</div>
</div>
</div>
<!-- //header -->
<div id="contents">
<div id="cont_nav">
<div class="container">cont_nav</div>
</div>
<!-- //cont_nav -->
<div id="cont_tit">
<div class="container">con_tit</div>
</div>
<!-- //con_tit -->
<div id="cont_ban">
<div class="container">con_ban</div>
</div>
<!-- //con_ban -->
<div id="cont_cont">
<div class="container">cont_cont</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/reset11.css">
<link rel="stylesheet" href="css/style11.css">
</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"></div>
<div class="header-icon"></div>
</div>
</div>
</div>
<!-- //header -->
<div id="contents">
<div id="cont_nav">
<div class="container">cont_nav</div>
</div>
<!-- //cont_nav -->
<div id="cont_tit">
<div class="container">con_tit</div>
</div>
<!-- //con_tit -->
<div id="cont_ban">
<div class="container">con_ban</div>
</div>
<!-- //con_ban -->
<div id="cont_cont">
<div class="container">cont_cont</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 {width: 100%;}
#header {width: 100%; height: 325px; background: url(../img/header_bg.jpg)center top repeat-x;}
#contents {width: 100%; height: 800px; background: #222;}
#footer {width: 100%; height: 200px; background: #333;}
/* 컨텐츠 레이아웃 */
#cont_nav {width: 100%; height: 200px; background: #333;}
#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 .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 {}
.header .header-icon {}@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;}
도움이 되셨다면 구독과 좋아요 버튼을 꾸욱~~!!
여러분의 댓글은 영상을 제작하는데 많은 힘이 됩니다.
모르시거나 궁금한 사항은 언제든지 댓글로 남겨주세요.
최대한 힘이 되어 드리겠습니다.
오늘도 수고하셨습니다.
728x90
