div 가운데 정렬

rockbest · Post by **rockbest** » 2005 07 19 03:02 05

일단 소스는 아래와 같습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head><title>title</title>
<META http-equiv="Content-Type" content="text/html; charset=Korean">
<META name="Author" content="Me">
<style>
#main{text-align:center;width:100%}
#head{font-weight:bold}
#menu{}
.title {background-color:#CCCCCC;text-align:right;width:800px}
.content{text-align:left;width:800px}
</style>
</head>
<body>
<div id="main">
<div id="head">헤드</div>
<div id="menu">메뉴 메뉴 메뉴</div>
<div class="title">타이틀1</div>
<div class="content">내용1</div>
<div class="title">타이틀2</div>
<div class="content">내용2</div>
<div id="form" align=center>
<form action=query.php method=post>
<textarea name=content rows=4 cols=60></textarea>
<input type="submit" value="입력">
</form>
</div>
</div>
</body>
</html>

원하는 결과는 전체레이아웃이 가운데 정렬이 되는 것입니다.
이렇게도 해보고 저렇게도 해보고 잘 안되네요
타이틀 div의 크기를 800으로 하고 그 div를 가운데 정렬하고 싶은데
생각처럼 잘 안됩니다.

바로 답변을 주시지 않더라도 참고할만한 곳이라도 알려주시면 참으로 감사하겠습니다.

guest · Post by **guest** » 2005 07 19 14:30 23

#main{
width: 800px;
margin: auto;
}

박민권 · Post by **박민권** » 2005 07 20 09:34 18

잘못된 부분 및 참고사항에 대해서 몇가지 집어드리겠습니다.

xhtml에서의 태그 및 속성은 모두 소문자 입니다. <META> => <meta>

<style> => <style type="text/css"> 로 수정해주세요.

xhtml에서 속성값은 반드시 따옴표로 둘러싸야 합니다.
<form action=query.php method=post>
=> <form action="query.php" method="post">

xhtml에서 닫히지 않는 태그는 /> 로 닫아주어야 합니다.
<input type="submit" value="입력">
=> <input type="submit" value="입력"/>

메타 태그가 좀 잘못 되었습니다.
<META http-equiv="Content-Type" content="text/html; charset=Korean">
=>
<meta http-equiv="Content-Type" content="text/html; charset=euc-kr"/>

CSS에서 .title가 단독으로 쓰였는데 class를 상속개념을 이용하지 않고 단독으로
사용할 경우 코드가 늘어날 수록 class 이름의 고갈이 생기고 나중에는 알아보기 힘든
이름을 잔뜩 적어야 하는 경우가 생길 수 있습니다.
.title1 .title2 ... .title10 이런식으로 말이죠.

CSS에서 가장 중요한 것은 캐스케이딩 입니다. 아마 계단식 상속이란 뜻일 겁니다.

Code: Select all

<style type="text/css">
#main{메인스타일 어쩌구~}
#main .title{메인 내부에 있는 타이틀의 스타일 어저구~}
</style>

<div id="main">
   <div class="title">타이틀</div>
</div>

위의 코드처럼 .title{}을 단독으로 사용하는 것이 아닌 상속해서 #main .title{}
이런식으로 사용하시는 것이 좋습니다.

Code: Select all

#main .title{color: red;} 난 메인의 타이틀
#sub .title{color: blue;} 난 서브의 타이틀

<div id="main">
   <div class="title">아잉~ 나 빨강</div>
</div>

<div id="sub">
   <div class="title">아잉~ 나 파랑</div>
</div>

위의 코드처럼 상속을 통해서 사용하면 같은 이름의 .title이라도 서로 다른 .title이
되며 관리효율성 및 코드의 직관성도 높아집니다.
질문과는 달리 잡설명이 너무 길어졌습니다. 아시는 것 이었다면 죄송합니다.
다른 초보분들이 참고할 수도 있기에 많은 내용을 적어봤습니다.
좋은하루 되세요.

빛알갱이 · Post by **빛알갱이** » 2005 07 20 11:40 38

박민권님이 적으신 것에 몇 가지 더 :

1. XHTML 문서라면 root 요소에는 xmlns 속성이 있어야 합니다.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">

2. 또한, 문자 인코딩이 UTF-8이나 UTF-16이 아닌 EUC-KR이므로 xml 선언이 문서의 최상단에 나와야 합니다.

<?xml version="1.0" encoding="EUC-KR"?>

3. C-T를 선언하는 meta tag은 원칙적으로 필요도 없고, 넣지 않는 것이 좋지만 좀 '멍청한' 브라우저를 위해서 넣어 줄 수 밖에 없을 것입니다.그런 경우에도
C-T를 선언하는 meta tag의 위치가 잘못 되었습니다. head의 첫번째 요소여야 합니다. 현재 title보다 뒤에 나오는데, title보다 앞에 나와야 합니다.

정리하면 다음과 같이 되어야 합니다.

Code: Select all

<?xml version="1.0" encoding="EUC-KR"?>
<!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="euc-kr" />
  <title> .....</title>
  ....
  </head>
  <body> 
  .....

박민권 · Post by **박민권** » 2005 07 20 13:15 17

빛알갱이 wrote: 3. C-T를 선언하는 meta tag은 원칙적으로 필요도 없고, 넣지 않는 것이 좋지만 좀 '멍청한' 브라우저를 위해서 넣어 줄 수 밖에 없을 것입니다.

맞아요. ㅋ~ >_<

rockbest · Post by **rockbest** » 2005 07 20 13:28 20

위에분들 감사합니다.

개인적으로 가지고 있는 웹페이지를 표준에 맞춰서 코딩해 보려고
하는데 참으로 힘듭니다.

자세히 조언과 지적해 주신분들께 정말 감사드립니다.

염치는 없지만 참고할만한 싸이트는 없을런지요..

레퍼런스 사이트는 몇군데 아는데...

막상 공부해보려 하니 너무 방대하네요

박민권 · Post by **박민권** » 2005 07 20 14:19 04

rockbest wrote:위에분들 감사합니다.

개인적으로 가지고 있는 웹페이지를 표준에 맞춰서 코딩해 보려고
하는데 참으로 힘듭니다.

자세히 조언과 지적해 주신분들께 정말 감사드립니다.

염치는 없지만 참고할만한 싸이트는 없을런지요..

레퍼런스 사이트는 몇군데 아는데...

막상 공부해보려 하니 너무 방대하네요

http://w3c.or.kr ㅠ_ㅠ
레퍼런스로 공부하시면서 이곳 한글모질라포럼에서 열심히 활동하시면 될 것 같습니다. ㅡㅡ;

8월에 출시될 웹접근성 관련 서적입니다.
http://www.sumanpark.com/archive/S_0507 ... 2Q5QX.html

Mozilla 한국 커뮤니티

div 가운데 정렬

div 가운데 정렬

이건 않될까요?^^?

일부러 그러신거라면 죄송하지만 ㅡㅡ;

ㅎㅎ

위에분들 감사합니다!!

Re: 위에분들 감사합니다!!

Who is online