47256 Members __ Online

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

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

posted by 한장의잎
date : , update :
hit : 35475, scrab : 0 , recommended : 22 , attach : 1

들어가면서

안녕하세요! 신비가족여러분! 처음 뵙겠습니다 ^^
저는 프리랜서 코더로 일자리를 찾아 헤매이는 하이에나처럼..(쿨럭) 돌아다니다가
우연히, 신비디자인을 접하게 되었습니다.


좋은 커뮤니 공간이 있군요!! 헤헤헤 (헤벌쭉 ^___ _^)
웹표준란에 글이 하나도 없는것을 보고 번뜩(+_+)였습니다.
"첫 라인을 내가 끊어보자꾸나! 우훗훗~" 하며 말입죠.

TABLE을 사용 하지 않고 DIV라는 녀석으로 쉽게 레이아웃을 잡는 방법을 알려드릴까합니다.
(많이들 아시겠지만, 모르시는 분을 위해 용기내어 글을 써봅니다. 내용에 대한 태클 환영합니다. ^^a)

이궁, 말이 많았습니다. 제가 말이 좀 많습니다..(쿨럭;;)
자, 시작에 앞서 간단하 몸풀기운동을 시작해보겠습니다.
DTD / 문자코딩 / 코딩준비를 해보려합니다.
앞으로 잘 부탁 드리겠습니다.

가.DTD 선언
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
HTML 버전 4.01에 맞추어 코딩을 시작할겁니다. 왜? DTD 선언은 중요하니까..
"그게 왜 중요한데요?"(앙~? 왜중요해~ 말을 해봐 앙~? -_-++)
위의 DTD를 선언을 최상단에 삽입하므로써
"나는 HTML 4.01에 맞게 제작이 되어 있어!" 라고 브라우저에게 의사를 전달 하는겁니다."
"브라우저에게 그 말을 왜 전해야 하죠?"(피식.. 브라우저한테 뭐..뭘 전달해?? 앙~?)
(-_-;;)그것은, 여러종류의 브라우저에서 HTML의 버전에따라 문서를 알아채고 나타내주는 방식이 다를수 있기때문입니다.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 라고 명시해줌으로써 "나는 W3C에서 제정한 HTML 4.01 Tansitional//EN 에 맞춤식으로 제작된 문서야, 그러니까 브라우저 너는 똑데이 알아 듣고 똑데이 보여주레이~ 알긋나?" 라는 것이죠. 참 쉽죠? ^^;;
여기서 사용하는 DTD선언문은, 일반형식으로 널리 이용되는 선언문입니다.
예를 들면 예전에 존재했거나 또는 없어진 태그도 지원한다고 합니다.
또한 엄격한 선언문도 있습니다만 저는 엄격한걸 두려워해요 흑 ㅠㅠ
나.문자코딩
<meta http-equiv="content-type" c"text/html; charset=euc-kr">
우리는 이것을 <head>와</head> 사이에 삽입함으로써, euc-kr(한국어) 문자코딩을 사용한다는것을
브라우저에게 알려주게 됩니다.
대부분의 브라우저에서는 자동으로 그 문서의 문자코딩을 읽어 들인다고 하는군요,
하지만, 몇몇 브라우저에서는 그렇지 못한 경우가 있다고 합니다.
이를 위해 삽입되는것이랍니다. 역시 참 쉽죠^^;;
다.코딩시작
자, 코딩시작을 위해 가장 기본적인 준비를 해보았습니다.
메모장, 에디터플러스, 아크로에디터, 무엇이든 좋습니다. 아래의 내용을 복사 붙여넣기하고-!
다음 글에서 뵙도롭해요..^^;;
"어디가세요?"(헐 내빼냐..?)
<!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>
<!-- 여기서부터 코딩 -->
내용
<!-- // 여기서부터 코딩 -->
</body>
</html>

이상한걸 발견했네요, 메타태그의 http-equiv와 contnent 사이에 c 라는 단어가 출력되는군요.

문서를 따로 올렸으니 받아서 사용해주세요.









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

나.DIV로 쉽게 레이아웃 잡기 기초 i
DIV 레이아웃 [6-3] : DIV와 CSS로 페이지 레이아웃 잡기 (1)





%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