728x90
index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<!--문서속의 언어가 utf-8-->
<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">
</head>
<body>
<!-- 스킵 내비게이션 -->
<!--스킵 내비게이션은 장애인도 평등하게 웹을 사용하기 위한 웹 접근성을 위해 꼭 설정해야하는 요소 중 하나이다.-->
<div id="skip">
<!-- <a>태그 : 다른 페이지 이동을 설정 -->
<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">header</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>reset.css
@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;}
/*hover : 마우스가 오버했을때*/
a:hover {color: #390;}
/* 폰트 초기화 */
body,
input,
textarea,
select,
button,
table { font-family: AppleSDGothicNeo-Regular, "Malgun Gothic", "맑은 고딕", dotum,
"돋움", sans-serif; color: #222; font-size: 13px; line-height: 1.5; }style.css
@charset "utf-8";
/* 스킵 내비게이션 */
#skip {position: relative;}
/*position : 요소의 위치를 설정
- static : 요소의 정상적인 위치(기본값)을 설정
- absolute : 요소의 위치를 절대적 값으로 설정
- relative : 요소의 위치를 상대적인 위치 및 기준점으로 설정
- fixed : 요소의 위치를 고정으로 설정*/
#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: #111;}
#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);}사이트링크
http://hostingju.dothome.co.kr/web/index.html
WEBSTANDARD SITE
hostingju.dothome.co.kr
728x90
'프론트엔드 > 웹 표준 사이트 만들기' 카테고리의 다른 글
| 사이트제작 - 헤더 타이틀 & 웹 폰트 (0) | 2021.09.01 |
|---|---|
| 사이트제작 - 헤더배경 & 메뉴 (0) | 2021.09.01 |
| 사이트제작 - 레이아웃2 (0) | 2021.08.31 |
| 사이트제작 - 레이아웃1 (0) | 2021.08.31 |
| 사이트제작 - 닷홈, FileZilla와 Visual Sstudio Code 연결 (0) | 2021.08.31 |