현재 위치

홈 ›› Forums ›› 공부 ›› 프로그래밍 QnA

CSS질문입니다

ixevexi의 이미지
글쓴이: ixevexi / 작성시간: 금, 2005/10/28 - 12:47오후

보통 네이버나 다음같은 곳에 가면 width가 일정하게 정해져있고
브라우져의 가운데로 정렬이 되어 나타납니다.

저도 이 처럼 레이아웃을 꾸미기 위해 다음과 같이 작성했습니다.

body {
	color:#000000;
	margin:0 auto;
	background-color:#fffffff;
	width:780px;
}

이렇게 CSS를 꾸미면 폭780에 가운데 정렬로 맞춰지는게 아닙니까?

FF와 Opera에서는 의도한 대로 가운데로 정렬이 되어 나타나지만
IE에서는 왼쪽에 딱 붙어서 나오네요

margin과 width가 혹여 div등의 태그에만 먹는가 하여
div로 다시 본문을 감싸봤지만 역시 안됩니다.

멀 잘못한거죠?

Forums: 
프로그래밍 QnA
익명 사용자의 이미지

글쓴이: 익명 사용자 / 작성시간: 금, 2005/10/28 - 1:07오후

<!DOCTYPE> 선언은 해주셨나요?

익명 사용자의 이미지

글쓴이: 익명 사용자 / 작성시간: 금, 2005/10/28 - 1:14오후

관련 링크: http://bbs.kldp.org/viewtopic.php?t=63655

ixevexi의 이미지

글쓴이: ixevexi / 작성시간: 금, 2005/10/28 - 2:50오후

음..
제가 설명을 잘 못한걸까요?

------------FF & Opera ------------
               본문컨텐츠


------------------ie-------------------
본문컨텐츠

이렇게 나와서 드리는 질문이었는데요 ^^

body속성에 margin을 적어도 margin이 안먹는듯 하다는 것이었구요(정확히 left, right 마진)
실제 테스트페이지는
http://kali8.kaist.ac.kr/~ixevexi
입니다.
FF에서 보면 가운데 정렬이지만 IE에서는 왼쪽에 붙어서 나와요 ㅠ.ㅜ

박스모델 처리 문제는 width에 국한된 문제 아닌가요?

C++, 그리고 C++....
죽어도 C++

익명 사용자의 이미지

글쓴이: 익명 사용자 / 작성시간: 금, 2005/10/28 - 3:22오후

아뇨, 제 설명이 부족했었습니다.

위 글타래에서 링크된 MSDN 글을 읽어보시면 HTML 4.0 DOCTYPE을 선언할 때 DTD의 주소를 빼먹으면 캔버스 처리가 달라진다는 내용을 보실 수 있습니다.

futari의 이미지

글쓴이: futari / 작성시간: 금, 2005/10/28 - 3:26오후

요 앞에 누가 물어봐서 대충 만들어준 example이 있네요.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.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>title</title>
		<style type="text/css">

			#content {
				width: 200px;
				background: #777;
				margin: 20px auto;
			}

		</style>
	</head>

	<body>
		<div id="content">hohoho</div>
	</body>
</html>

-------------------------
The universe is run by the complex interweaving of three elements: matter, energy, and enlightened self-interest.
- G'kar, Babylon 5

익명 사용자의 이미지

글쓴이: 익명 사용자 / 작성시간: 금, 2005/10/28 - 3:37오후

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

이렇게 하셔도 잘 됩니다.

ixevexi의 이미지

글쓴이: ixevexi / 작성시간: 금, 2005/10/28 - 3:44오후

앗 대단히 감사드립니다.

제가 잘못한거였군요 ㅠ.ㅜ
저런게 있었다니.. 도움에 다시 한번 감사드립니다. 잘 되네요

C++, 그리고 C++....
죽어도 C++

익명 사용자의 이미지

글쓴이: 익명 사용자 / 작성시간: 금, 2005/10/28 - 3:47오후

섞어쓰시면 어떻게해요;;

참고로 </ul>이 <ul>로 잘못돼있는 곳이 있습니다.

ixevexi의 이미지

글쓴이: ixevexi / 작성시간: 금, 2005/10/28 - 4:36오후

엇 그냥 단순히 아래줄만 추가하면 되는지 알았더니
위에 줄도바뀌는게 있군요 지적에 다시한번 감사드립니다 꾸벅..

-> 이렇게 바꾸는게 맞죠?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
 "http://www.w3.org/TR/html4/strict.dtd">

C++, 그리고 C++....
죽어도 C++

익명 사용자의 이미지

글쓴이: 익명 사용자 / 작성시간: 금, 2005/10/28 - 5:14오후

네. 그런데 HTML 4.01 Strict로 하실 것이면

<input type=submit value="누르33">

이것을

<div><input type="submit" value="누르33"></div>

이렇게 해주세요~

http://validator.w3.org/check?uri=http%3A%2F%2Fkali8.kaist.ac.kr%2F%7Eixevexi%2F

ixevexi의 이미지

글쓴이: ixevexi / 작성시간: 금, 2005/10/28 - 5:36오후

Anonymous wrote:
네. 그런데 HTML 4.01 Strict로 하실 것이면

<input type=submit value="누르33">

이것을

<div><input type="submit" value="누르33"></div>

이렇게 해주세요~

http://validator.w3.org/check?uri=http%3A%2F%2Fkali8.kaist.ac.kr%2F%7Eixevexi%2F

정확히 이게 왜 문제가 되는거죠?
이해가 안가네요 ㅠ.ㅜ HTML과 CSS에 문외한이라..
가르침을 부탁드립니다.

C++, 그리고 C++....
죽어도 C++

익명 사용자의 이미지

글쓴이: 익명 사용자 / 작성시간: 금, 2005/10/28 - 6:25오후

HTML의 태그 요소는 크게 블럭레벨 요소와 인라인 요소로 나뉩니다. <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> 이렇게 블럭레벨 요소를 나열하면 위 아래로 나뉘게 되죠. 반면,

<img src="404.gif">

<img src="404.gif">

<img src="404.gif">

<img src="404.gif">

이렇게 인라인 요소를 나열하면 다닥다닥 붙어나옵니다.

한편, HTML 4.01 Strict의 DTD를 실제로 살펴보시면

<!ELEMENT FORM - - (%block;|SCRIPT)+ -(FORM) -- interactive form -->

<form> 태그는 열기 닫기 태그가 한쌍으로 존재해야하며, 블럭레벨 요소이거나 스크립트(???)인 자식이 하나 이상 있어야 하며, <form>을 다시 자식으로 가질 수 없다고 나옵니다.

<input> 태그는 블럭레벨 요소가 아니라 인라인 요소이므로, 블럭레벨 요소인 <div>로 감싸주는 것입니다.

참고로 HTML 4.01 Transitional의 DTD를 보시면

<!ELEMENT FORM - - (%flow;)* -(FORM) -- interactive form -->

블럭레벨 요소이거나 인라인 요소인 자식이 오거나 오지 않아도 되며, <form>을 다시 자식으로 가질 수 없다고만 나옵니다.

ixevexi의 이미지

글쓴이: ixevexi / 작성시간: 금, 2005/10/28 - 7:29오후

Anonymous wrote:
HTML의 태그 요소는 크게 블럭레벨 요소와 인라인 요소로 나뉩니다. <p>1</p><p>1</p><p>1</p><p>1</p><p>1</p> 이렇게 블럭레벨 요소를 나열하면 위 아래로 나뉘게 되죠. 반면,

<img src="404.gif">

<img src="404.gif">

<img src="404.gif">

<img src="404.gif">

이렇게 인라인 요소를 나열하면 다닥다닥 붙어나옵니다.

한편, HTML 4.01 Strict의 DTD를 실제로 살펴보시면

<!ELEMENT FORM - - (%block;|SCRIPT)+ -(FORM) -- interactive form -->

<form> 태그는 열기 닫기 태그가 한쌍으로 존재해야하며, 블럭레벨 요소이거나 스크립트(???)인 자식이 하나 이상 있어야 하며, <form>을 다시 자식으로 가질 수 없다고 나옵니다.

<input> 태그는 블럭레벨 요소가 아니라 인라인 요소이므로, 블럭레벨 요소인 <div>로 감싸주는 것입니다.

참고로 HTML 4.01 Transitional의 DTD를 보시면

<!ELEMENT FORM - - (%flow;)* -(FORM) -- interactive form -->

블럭레벨 요소이거나 인라인 요소인 자식이 오거나 오지 않아도 되며, <form>을 다시 자식으로 가질 수 없다고만 나옵니다.

답변에 큰 감사드립니다

근데 왜 손님이신지 :oops:

C++, 그리고 C++....
죽어도 C++

익명 사용자의 이미지

글쓴이: 익명 사용자 / 작성시간: 수, 2005/11/09 - 11:58오전

저는 맨 처음에 글 올리신 분은 아니지만, 이와 관련하여 추가 질문이 있습니다.

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnie60/html/cssenhancements.asp

근데

Quote:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="main.css" charset="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko-KR" xml:lang="ko-KR">
<head>

이렇게 쓰면 IE 5.5의 방식대로 보여주고

Quote:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko-KR" xml:lang="ko-KR">
<head>

이렇게 해야만 표준의 방식대로 보여줍니다.

어떻게 해결방법이 없을까요? 꼭 !DOCTYPE이 첫번째 줄에 와야만 되는 건가요?

익명 사용자의 이미지

글쓴이: 익명 사용자 / 작성시간: 수, 2005/11/09 - 12:00오후

http://bbs.kldp.org/viewtopic.php?p=310384#310384

이런... IE 6.0의 버그였군요. XML 선언을 빼는 수밖에는 별 도리가 없을꺼 같습니다.

댓글 달기

텍스트 포맷에 대한 자세한 정보

Filtered HTML

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

BBCode

  • 텍스트에 BBCode 태그를 사용할 수 있습니다. URL은 자동으로 링크 됩니다.
  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param>
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.

Textile

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • You can use Textile markup to format text.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Markdown

  • 다음 태그를 이용하여 소스 코드 구문 강조를 할 수 있습니다: <code>, <blockcode>, <apache>, <applescript>, <autoconf>, <awk>, <bash>, <c>, <cpp>, <css>, <diff>, <drupal5>, <drupal6>, <gdb>, <html>, <html5>, <java>, <javascript>, <ldif>, <lua>, <make>, <mysql>, <perl>, <perl6>, <php>, <pgsql>, <proftpd>, <python>, <reg>, <spec>, <ruby>. 지원하는 태그 형식: <foo>, [foo].
  • Quick Tips:
    • Two or more spaces at a line's end = Line break
    • Double returns = Paragraph
    • *Single asterisks* or _single underscores_ = Emphasis
    • **Double** or __double__ = Strong
    • This is [a link](http://the.link.example.com "The optional title text")
    For complete details on the Markdown syntax, see the Markdown documentation and Markdown Extra documentation for tables, footnotes, and more.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 사용할 수 있는 HTML 태그: <p><div><span><br><a><em><strong><del><ins><b><i><u><s><pre><code><cite><blockquote><ul><ol><li><dl><dt><dd><table><tr><td><th><thead><tbody><h1><h2><h3><h4><h5><h6><img><embed><object><param><hr>

Plain text

  • HTML 태그를 사용할 수 없습니다.
  • web 주소와/이메일 주소를 클릭할 수 있는 링크로 자동으로 바꿉니다.
  • 줄과 단락은 자동으로 분리됩니다.
댓글 첨부 파일
이 댓글에 이미지나 파일을 업로드 합니다.
파일 크기는 8 MB보다 작아야 합니다.
허용할 파일 형식: txt pdf doc xls gif jpg jpeg mp3 png rar zip.
CAPTCHA
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.