css 웹사이트 제작시 기본 템플릿

css 웹사이트 제작시 기본 템플릿 > 그누4 질문답변

그누4 질문답변

그누보드4 관련 질문은 QA 로 이전됩니다. QA 그누보드4 바로가기
기존 게시물은 열람만 가능합니다.

css 웹사이트 제작시 기본 템플릿 정보

css 웹사이트 제작시 기본 템플릿

본문

css는 웹표준 및 웹접근성을 포함하여 여러가지 장점을 지니고 있습니다. 첨부된 파일을 참조하여 시작하는 방법도 있습니다.

CSS에서는 "북쪽, 서쪽, 중앙, 동쪽, 그리고 남쪽" 영역을 기준으로 하여 세분화 하여 제작이 될 수 있습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="Ko" lang="Ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>{{metatitle}}</title>
<meta name="description" content="{{metadescription}}" />
<meta name="keywords" content="{{metakeywords}}" />
<meta name="author" content="{{metaauthor}}" />
<meta name="copyright" content="xxxx company. www.clientcompanyurl.com" />
<meta name="credit" content="credit.txt " />
<meta name="robots" content="index, follow" />

<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" href="css/screen.css" type="text/css" media="screen" />
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
</head>

<body>

<h1 class="whatwedo">페이지별 가장 핵심 내용을 넣습니다</h1>


<div id="container">

<div id="north">
북쪽내용
</div>


<div id="west">
<h1 class="memog">제목은 이곳에 넣습니다</h1>
<div class="memog">
서쪽내용
</div>

</div>


<div id="center">
중앙내용
</div>


<div id="east">
동쪽내용
</div>


</div>


<div id="south">
남쪽내용
</div>


</body>
</html>

/*==============================================================================
/ created by: 이름을 넣습니다
/ optimized for : 기타내용
/ date modified : 2008/05/16
/ date: 2008/08/25
/ license : Creative Commons Attribution 2.5 License.
/ credits: 아이디어 혹 소스등 여러가지 인용시 인용처 꼭 표시
==============================================================================*/

/** -------------------------------------------------------------------------
포스트잇 등 배경이미지, 모든 공통항목의 css    @가져오기경우 항상 최상위에 위치하여야 함.
-----------------------------------------------------------------------------*/
@import url('common.css');

/** --------------------------------------------------------------------------
body & container 몸뚱아리 및 공통영역 부분 시작
------------------------------------------------------------------------------*/
@charset utf-8;     /* css 파일을 utf8 인코딩으로 처리함 */
        /* reset css 브라우저에서 지정하는 기본값을 원점으로 돌리기 */
        *{ margin: 0; padding: 0}*
        body, html, div, blockquote, img, label, p, h1, h2, h3, h4, h5, h6, pre, ul,
        ol, li, dl, dt, dd, form, a, fieldset, input, th, td {margin: 0; padding: 0; border: 0; outline: none;font-family: '맑은 고딕', 돋움, Helvetica}
        body {margin:0; padding:0; font: 0.9em/1.5em '맑은 고딕', 돋움, Helvetica; background:transparent url(../images/body/body-bg-leaf.gif) no-repeat top center}

/** -------------------------------------------------------------------------
전체 내용영역 부분 지정 - marging: 0 left, right, auto 사용가능함
-----------------------------------------------------------------------------*/
#container {width:960px; margin:0 auto; padding:0 10px; float:none}

/** -------------------------------------------------------------------------
north 북쪽 영역 시작
-----------------------------------------------------------------------------*/
#north {width:100%; margin:0 0 50px 0; padding:0; height:120px; float:none}

/** -------------------------------------------------------------------------
west 서쪽 영역 시작
-----------------------------------------------------------------------------*/
#east {margin:22px 0 0 25px; padding:0; float:left; width: 170px; font-size: 1.0em}

/** -------------------------------------------------------------------------
center 중앙 영역 시작
------------------------------------------------------------------------------*/
#center { width:730px; float:left; margin:0 auto; padding:15px 10px 30px 15px; background-color:#fff; filter:alpha(opacity=85); opacity:0.85}

/** -------------------------------------------------------------------------
east 동쪽 영역 시작
-----------------------------------------------------------------------------*/
#east {margin:22px 0 0 25px; padding:0; float:left; width: 180px; font-size: 1.0em}

/** -------------------------------------------------------------------------
south 남쪽 영역 시작
------------------------------------------------------------------------------*/
#south {background:transparent url(../images/body/body-bg-leaf.gif) no-repeat bottom left; margin:0; height:250px; clear:both; font-size:0.85em}