현재 위치

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

xhtml 1.0의 block요소 테투리(border)에 대해서..

tinywolf의 이미지
글쓴이: tinywolf / 작성시간: 일, 2005/10/02 - 11:33오후

요즘 연구실 홈피를 리뉴얼 하고 있어서..
xhtml 1.0 표준을 지키면서 table 하나도 안 쓰고 작성하고 있습니다.
상당히 많은 태클이 들어오고 있지만 꿋꿋하게.. 고집대로 하고 있는데요.
페이지 디자인에 들어가있는 선들을 이미지를 하나도 안 쓰고
css만 사용해서 그려넣고 있습니다.
그런데 요게 크기가 1픽셀 단위로 미묘하게 차이납니다.
IE에서는 border를 block 요소 크기에 포함시키지 않아서 약간 찌그러지고..
FireFox에서는 block 요소 크기에 포함되어서 이빨이 딱딱 맞습니다.

IE에서 제대로 보이게 맞추면 FireFox에서 제대로 안보이구요..

아래에 html 파일을 첨부하겠습니다.
한번 봐주십시오.

궁금한 것은.. 어느 것이 표준에 적합한 것입니까?
IE 처럼 border를 block 크기에 포함시키지 않는것?
FireFox 처럼 border가 block 크기에 포함되는 것?

File attachments: 
첨부파일 크기
HTML icon index.html7.63 KB
Forums: 
프로그래밍 QnA
마냥의 이미지

글쓴이: 마냥 / 작성시간: 일, 2005/10/02 - 11:56오후

여길 한번 참고해보세요

http://forums.mozilla.or.kr/viewforum.php?f=9

Gentoo Rules!

hyeonseok의 이미지

글쓴이: hyeonseok / 작성시간: 월, 2005/10/03 - 1:14오전

Firefox의 방식이 W3C 표준입니다. 그리고 이는 IE의 표준 랜더링 모드의 랜더링 방식이기도 합니다.

DTD선언을 했지만 IE가 표준 모드로 랜더링 하지 않는 이유는 문서 최상단의 xml선언 때문입니다. IE는 DTD선언이 정확하면 표준 모드로 랜더링 되지만, DTD선언 이전에 아웃풋이 있으면 표준 모드로 랜더링 되지 않고 호환 모드로 랜더링 됩니다. (IE7에서는 이 버그가 수정 될 예정입니다.)

해결 방법은...
charset을 utf-8로 할 경우 xml문서 상단에 charset을 선언해주지 않아도 되기 때문에 <?xml.... 이부분을 삭제 하는 것입니다. XHTML 1.0 이니 XHTML 1.1 처럼 완전한 XML문서가 아니어도 허용이 됩니다.

관련 링크
CSS Visual formatting model
http://www.w3.org/TR/REC-CSS2/visuren.html

IE Doctype Switching
http://msdn.microsoft.com/library/en-us/dnie60/html/cssenhancements.asp?frame=true#cssenhancements_topic2

그리고 주제와 조금 어긋난 말을 드리자면, 디자인을 보니 CSS의 border와 background-color를 사용하는 것보다 background-image를 사용하는 것이 훨씬 작업도 간단하고 semantic한 markup을 유지할 수 있을 것 같습니다.

tinywolf의 이미지

글쓴이: tinywolf / 작성시간: 화, 2005/10/04 - 2:33오전

오옷.. 답변 감사드립니다..
xml만 빼니까 잘 되는군요..

그런데 결국 테이블을 사용하고 말았는데요..
아래와 같은 레이아웃을 잡을 때..

+---+-----------+----+
|   |     <-----|----|--- 요부분 크기가 가변..
+---+-----------+    |
|   |           |    |
+---+-----------+----+

가변되는 블록은 위쪽 가운데 블록이구요..
요런 레이아웃에서는 왼쪽과 오른쪽 div 블록이..
전체 블록 크기에 맞게 위아래로 늘어나 줘야되는데..
이게 어렵더군요..
결국 테이블 사용..

그리고 반투명한 알파가 적용된 png 이미지들도 페이지가 로딩되고 난 후 document.all 이 있다면 ie로 판단하고 gif로 바꾸도록 만들어서 대문페이지를 완성했습니다..

뭐 테이블이던.. 이미지이던.. css이던..
걍 그때 그때 맞추어서 적당하다면 고집 피우지 않고 넘어가기로 세상과 타협해 버렸습니다.. OTL..

아직 한참 미완성이지만.. 연구실에서 짬날 때마다 홈피를 수정하고 있습니다.
만들고 있을 때는 쓸데없는 짓한다고 구박받지만..
만족스럽게 ㅤㄷㅚㅆ을 때는 무언가 희열이 느껴진다고 해야하나..
네.. 자기만족입니다.. OTL..

http://vr.knu.ac.kr

시간 나시면 한번들 살펴보시고 지적 부탁드립니다~ ㅋ

ㅡ_ㅡ;

7339989b62a014c4ce6e31b3540bc7b5f06455024f22753f6235c935e8e5의 이미지

글쓴이: 7339989b62a014c... / 작성시간: 화, 2005/10/04 - 7:26오전

아마 가변 길이는 자바 스크립트를 이용해야 할 것입니다.
그냥 할 수 있는 방법이 있다면 제발~ 가르쳐 주세요. :)

hyeonseok의 이미지

글쓴이: hyeonseok / 작성시간: 화, 2005/10/04 - 9:59오전

tinywolf wrote:
아직 한참 미완성이지만.. 연구실에서 짬날 때마다 홈피를 수정하고 있습니다.
만들고 있을 때는 쓸데없는 짓한다고 구박받지만..
만족스럽게 ㅤㄷㅚㅆ을 때는 무언가 희열이 느껴진다고 해야하나..
네.. 자기만족입니다.. OTL..

http://vr.knu.ac.kr

시간 나시면 한번들 살펴보시고 지적 부탁드립니다~ ㅋ

와우..수고 하셨습니다. CSS 걷어냈다가 첫줄에 있는 메세지 보고 간만에 웃었습니다. :)

xhtml 이랑 css 뱃지 링크를..
http://validator.w3.org/check/referer
http://jigsaw.w3.org/css-validator/check/referer
로 걸면 referer로 웹페이지를 체크할 수 있습니다.

hyeonseok의 이미지

글쓴이: hyeonseok / 작성시간: 화, 2005/10/04 - 10:00오전

ditto wrote:
아마 가변 길이는 자바 스크립트를 이용해야 할 것입니다.
그냥 할 수 있는 방법이 있다면 제발~ 가르쳐 주세요. :)

javascript 를 사용하는 것도 하나의 좋은 방법이고,
javascript 를 사용하지 않으려면 float 를 이용해서 박스를 배치하고 아래에서 clear 시켜 주면 됩니다.

M.W.Park의 이미지

글쓴이: M.W.Park / 작성시간: 화, 2005/10/04 - 10:27오전

IE가 박스모델을 잘못 처리하고 있습니다.
Dan Cederholm의 책에선 다음의 링크와 함께 예제를 소개하고 있습니다.

http://www.tantek.com/CSS/Examples/boxmodelhack.html

-----
오늘 나의 취미는 끝없는, 끝없는 인내다. 1973 法頂

댓글 달기

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

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
이것은 자동으로 스팸을 올리는 것을 막기 위해서 제공됩니다.