47367 Members __ Online

정렬
HOME스터디[s]웹표준

나.DIV로 쉽게 레이아웃 잡기 기초 i

posted by 한장의잎
date : , update :
hit : 50742, scrab : 0 , recommended : 21 , attach : 2

레이아웃 정하기(기초)

문서를 만들기 위해서는, 어떤식으로 만들지 생각해 보아야 겠죠?
DIV로 쉽게 레이아웃 잡기라는 타이틀을 걸었으므로(;;) 쉽게 가보도록 하겠습니다.
먼저 아래의 그림을 살펴 보도록 하겠습니다.


 exit001

크게 분류하여 보았습니다. 상단(header), 중단(center), footer(하단)
그리고 앞으로 header, center, footer 를 ID로 사용 할 것입니다^^
예의 글에서 복사(또는 다운받으신)한 문서 있으시죠?
그 문서를 메모장 또는 에디터플러스, 아크로에디터 등등등;;(이하 앞으로 편집기라고 부르겠습니다 :D)으로 열어주세요.
가.코딩시작(기초)
자, DIV를 이용해 HTML 코딩으로 바로 들어가 볼까요?
예제 이미지와 같은 화면을 작성 해보도록 하겠습니다.
<!-- 여기서부터 코딩 -->
내용 : 이곳에 코딩을 하겠습니다.
<!-- // 여기서부터 코딩 -->
1단계 > 2단계 > 3단계
<!-- 여기서부터 코딩 -->
  <div id="header"> header </div>
<!-- // 여기서부터 코딩 -->
1단계 > 2단계 > 3단계
<!-- 여기서부터 코딩 -->
  <div id="header"> header </div>
  <div id="center"> center </div>
<!-- // 여기서부터 코딩 -->
1단계 > 2단계 > 3단계(완료 -_-V)
<!-- 여기서부터 코딩 -->
  <div id="header"> header </div>
  <div id="center"> center </div>
  <div id="footer"> footer </div>
<!-- // 여기서부터 코딩 -->
  • DIV 에 ID를 넣어 작성 해보았습니다.(쉽게 알아보기 위해 예제이미지와 같은 색으로 header, center, footer부분을 표현 해보았습니다.)
  • 브라우저에서 한 번 확인해보시겠습니까? 수고하셨습니다. 이것으로 코딩은 끝입니다 ^^
    "에엑~? 이게 뭐야!?" 하시는분 있으실 듯 합니다. 히히히
  • 다음글에서는 CSS 작성법과 HTML을 제어하는법을 알아보겠습니다.
여기서 잠깐
  • 주석
    <!-- 여기서부터 코딩 -->
    <!-- // 여기서부터 코딩 -->
    요런 멘트가 써진 줄이 있습니다. 이것은 주석으로써, 실제 브라우저 출력시엔 나타나지 않습니다.
    작성자가 쉽게 알아보기위해 작성해 넣는 내용입니다. 사용법은
    <!-- 여기에 내용을 작성합니다. -->
    그리고, <!-- // 여기서부터 코딩 --> 에서 // 는 end 즉 주석이 끝났다는 의미입니다.
  • DIV 태그(TAG) 에 사용 된 ID란?
    ID는 그 문서에서 고유하게 존재하는 하나의 이름을 말합니다.
나.CSS다루기(기초)

우리는 아주아주 간단한 HTML 코딩을 해보았습니다.
상,중,하단의 구성만 있는 HTML문서였습니다.
코딩한 HTMl문서에 아주 간단한 CSS를 입혀보도록 하겠습니다.

CSS는 HTML문서의 <head> 와 </head> 사이에 코딩하게 됩니다.
외부파일로 빼내어 하는 방법도 있습니다만, 그건 다음 레이아웃에서 살펴 보도록 하겠습니다.

@charset "euc-kr"; /* charset */
나는 euc-kr CSS입니다. 라고 브라우저에게 말해주고 시작하겠습니다.
HTML과 마찬가지로 한국어임을 알려 브라우저에서 한국어를 선택 하게 하는것입니다.
ID 와 CLASS
  • #(Sharp)은 ID를 말합니다.
  • .(Dot)은 CLASS를 말합니다.
    아래 표를 살펴 볼까요?
ID CLASS
HTML CSS HTML CSS
id="name" #name class="name" .name
id="header" #header class="header" .header
id="center" #center class="center" .center
id="footer" #footer class="footer" .footer
표를 살펴 보니 감이 팍팍 오게 됩니다.(그렇죠?)
HTML 에서는 id="ID명" CSS 에서는 #ID명
HTML 에서는 id="CLASS명" CSS 에서는 #CLASS명
자, 편집기를 열고 이전에 코딩한 문서를 불러 오도록 하겠습니다.
HTML 여기까지 코딩 되셨나요? (그것도 코딩이냐;;)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" c"text/html; charset=euc-kr">
<title>DIV로 쉽게 레이아웃 잡기</title>
</head>
<body>
<!-- 여기서부터 코딩 -->
  <div id="header"> header </div>
  <div id="center"> center </div>
  <div id="footer"> footer </div>
<!-- // 여기서부터 코딩 -->
</body>
</html>
CSS를 한 번 넣어 보도록 하겠습니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" c"text/html; charset=euc-kr">
<title>DIV로 쉽게 레이아웃 잡기</title>
<style type="text/css">
/* CSS */
#header {height:80px;background:#ff6600;}
#center {height:500px;background:#fffff;}
#footer {height:80px;background:#0099ff;}
</style>
</head>
<body>
<!-- 여기서부터 코딩 -->
  <div id="header"> header </div>
  <div id="center"> center </div>
  <div id="footer"> footer </div>
<!-- // 여기서부터 코딩 -->
</body>
</html>
  • 다시 한 번 강조 CSS는 위와 같이 <head> 와 </head> 사이에 넣습니다.(쉽게 알아보기 위해 밝은 색상으로 넣었습니다.)
  • 자아, 브라우저에서 한 번 확인해보시겠습니까? 역시 수고하셨습니다. 이것으로 CSS코딩도 끝입니다 ^^
가) CSS 속성
  • CSS의 속성에는 종류가 많습니다.
  • 우리가 여기에서 사용한 속성은 height와 background 두가지 밖에 없습니다.
    이 두가지 속성에 대해서만 간단하게 알아보도록 하겠습니다.
    • height는 단어 뜻처럼 높이를 말합니다. 해당하는 아이디의 높이를 정하게 되는것입니다.
      사용 방법을 예로 들면,
      #header {height:수치px}
      여기서 px는 pixel을 말합니다. header의 경우 80pixel의 높이를 가지게 된것이죠.
    • background는 배경을 말합니다. 이 속성은 해당 ID나 CLASS의 배경을 정하게 됩니다.
      #header {background:#색상값;}
      #header {background:url('http://배경이미지의 주소/background.gif');}
      background 속성은 색상뿐 아니라 이미지를 불러 올 수 도 있습니다.








div, 웹표준, 레이아웃, 코딩
댓글 17 | 엮인글 0

다.DIV로 쉽게 레이아웃 잡기 기초 II
가.DIV로 쉽게 레이아웃 잡기 준비과정 :)





%3Cul+class%3D%22Klocation%22%3E%3Cli+class%3D%22first%22%3E%3Ca+href%3D%22..%2Fhompy%2F%22%3EHOME%3C%2Fa%3E%3C%2Fli%3E%3Cli%3E%3Ca+href%3D%22..%2Fhompy%2Fstudy.php%22%3E%EC%8A%A4%ED%84%B0%EB%94%94%5Bs%5D%3C%2Fa%3E%3C%2Fli%3E%3Cli%3E%3Ca+href%3D%22..%2Fhompy%2Fstudy.php%3Fmid%3D69%22%3E%EC%9B%B9%ED%91%9C%EC%A4%80%3C%2Fa%3E%3C%2Fli%3E%3C%2Ful%3E