테스트 사이트 - 개발 중인 베타 버전입니다

제일 이해안되는 문제..

· 13년 전 · 2096 · 25
안녕하세요.
그누보드 DTD버전(슈쿠마님이 올려주신..)을 사용중인데요.

head.sub.php의 내용에 어떠한 단어라도 수정되던지, 추가되면
왼쪽 #side의 css가 흐트러지네요;;

github의 dtd버전도 사용해봤지만 위와 같은 현상이 일어나고있슴당..
사이트에 들어가보시면 "잉"이란 단어를 <head>안에 하나 넣었는데도 저렇게 다 깨집니다ㅠㅠ
다시 지우고 업로드해도 그대로구요.
(혹시나 문자셋 문제일까봐 강제로 UTF-8로 설정되게까지 해놨는데도 안되네요)

압축을 풀었던 원본 파일(head.sub.php)을 웹서버에 다시 업로드하면 정상적으로 보인답니다;;

파일질라 프로그램으로 사용하는데요. (알FTP로도 시험해봤슴당)
이게 어떤 문제때문에 일어나는지 전혀 모르겠습니다, 또 저만 이런 현상이 일어나는 것 같은데..;
파일 저장할 때 오류가 생기는건가요-_-?..

저번 "logo 크기에 제한이 있나요?" 라고 질문한 것도 지금 현재 이 글과 같은 문제때문에 일어났던 현상이네요..
완전 미궁 속이네요ㅠㅠ아시는 분 없나요?

지금 확인해보니 전체적으로 모든 파일이 다 그렇네요..

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 25개

크롬에서는 별 문제 없이 보이네요.. ^^
익스9에서 개발자 툴로 보니까, 삽입하신 글자때문인지 문서구조를 제대로 보여주지 못하는 것 같습니다.

거기에 그 글자를 꼭 넣어야 하는 이유가 있나요?
head 태그 안에서 허용되는 태그들을 넣어도 똑같은 현상인가요?
네. 크롬에서는 정상적으로 보입니다.
익스플로러(제가 사용하는 버전은 8)에서는 깨져보이네요.

마찬가지로 head 태그 안에서 허용되는 것 (<title></title>)을 넣어도,
깨집니다. "잉"이라는 글자를 삭제 후 업로드해도 깨지구요.
압축을 풀었던 그 원본 head.sub.php만을 다시 그대로 업로드해야 정상적으로 보이네요.

왜 이런지 모르겠어요ㅠ
혹시 사용하시는 에디터의 저장 옵션이 utf-8 (with BOM) 인가요?
without BOM으로 바꾸실 수 있으면 시도해보세요.
그런 옵션은 보이지않네요..ㅜ,ㅜ
업로드 프로그램은 파일질라를 사용하고, 편집기는 XP 기본 notepad를 사용합니다.
xp notepad는 사용하지 말기를 권장드립니다.

utf-8의 경우 BOM을 붙히는 것으로 알고 있어요..

notepad++나 에디터플러스등 프로그램 전용 에디터를 사용하세요.
BOM 문제네요.

http://validator.w3.org/check?uri=http%3A%2F%2Fyotaeji.dothome.co.kr%2F&charset=%28detect+automatically%29&doctype=Inline&group=0&user-agent=W3C_Validator%2F1.3

다른 에디터를 쓰시길 바랍니다.
DOC TYPE 선언을 안하고 계시니까 padding 이 quirks mode 에서는 안먹어서 깨지는 겁니다.

지금 몇번째 같은 말씀을 드렸는지.....

html, 그러니까 웹페이지 문서를 작성하실때, 가장 먼저 하셔야 하는것이 어떤 DOC TYPE 선언을 하느냐 입니다.

이건 html 의 가장 기본이 되는, 음.. 다시 말해 MS 워드로 예를 들자면, 내 문서가 .doc 가 될건지, .docx 가 될건지, 이걸 결정하는 것 과 똑같습니다.

지금 보세요. DOC TYPE 선언을 안하셔서 quirks mode 로 페이지가 rendering 되고 있는데, quirks mode 에서는 padding 이 먹질 않습니다. 이 얘기 벌써 몇번씩 해드렸는데... 그래서 로그인 area 가 깨지고 있다고 저번주에도 말씀드렸었습니다.

<head></head> 안에 뭘 넣고 안넣고 이게 문제를 일으키는게 아니라 DOC TYPE 을 이해하시지 못하고 있는게 문제입니다.

그래서 예제까지 작성해 드렸는데, 같은 문제를 놓고 일주일째 씨름을 하시네요...

무작정 자꾸 뭘 하시려고 하시지 마시고, 일단 html 에 대한 기본적인 이해가 필요합니다.

http://focusjweb.tistory.com/9

이 문서 하나 읽는데 5분이면 됩니다. 이런 기본적인 개념을 갖추지 않고 자꾸 안되는걸 되게 하려고 하시는거는 본인만 손해 입니다.

<!doctype html>

이거 한줄만 때려넣으면 해결되는걸 왜 쌩고생을 하고 계십니까?

이거 말고도, 다른거 아무거나 넣어도 됩니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

strict, transition, loose, 하여간 어떤 DOC TYPE 이던간에 quirks mode 만 아니면 되는 겁니다. 그럼 padding 은 왠만해서는 다 먹습니다.

가장 좋은건 HTML5 의 <!doctype html> 라고도 벌써 수차례 말씀드렸었구요.

휴........
슈쿠마님의 dtd 수정본에서 doctype을 선택하게 하신것 같은데,
정말로 다평정님 소스에는 출력이 안되어 있네요.. ?
어디선가 빵꾸가 난듯 하군요..

그나저나, 워드프레스 쪽에서는 비슷한 경우의 원인이 BOM 이었다네요.. ^^;
http://wordpress.org/support/topic/header-appearing-in-body-tag
전 적용된걸로 보이는데요~.. 페이지 소스 보기로 봐도 적용되어있는데..흠
간단히 해석 좀 부탁드려도 될까요~..
헉.. 소스보기라 하니까 보이네요..-_-
크롬 개발자 환경에서는 안보였거든요..

게시글 목록

번호 제목
8265
20403
20402
20401
20400
8259
20399
20398
8255
8249
8246
8242
20396
8240
20395
20394
31033
28385
20393
28380
20392
28377
20391
20390
20389
20388
20387
20386
20385
20384
20383
20382
8238
20380
20379
28376
28372
20378
20377
8235
20375
20374
20373
20372
20371
20370
28370
20369
28366
20368
20367
20366
20365
20364
20363
20362
20361
20360
20359
8231
20358
20357
20356
20355
20354
20353
20352
20351
20350
20349
20348
20347
20346
20345
20344
20343
20342
20341
20340
20339
20338
20337
20336
20335
20334
20333
20332
20331
20330
20329
20328
20327
20326
20325
20324
20323
20322
20321
20320
20319