08
31
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="keyword" content="웹스토리보이, 웹표준, 웹접근성, 사이트 만들기">
    <meta name="generator" content="brakets">
    <title>WEBSTANDARD SITE</title>

    <!-- CSS STYLE -->
    <!--순서대로 우선순위-->
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <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">cont_tit</div>
            </div>
            <!--//cont_tit-->
            <div id="cont_ban">
                <div class = "container">cont_ban</div>
            </div>
            <!--//cont_ban-->
            <div id="cont_cont">
                <div class = "container">cont_cont</div>
            </div>
            <!--//cont_cont-->
        </div>
        <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;} /*모두 적용하는 것이 아닌 지정된 것에만 여백 설정*/

style.css

@charset "UTF-8"; /*글자가 깨지지 않게 하기 위해*/
/* 레이아웃 */
#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
COMMENT