제일 이해안되는 문제.. > 퍼블리셔팁

퍼블리셔팁

퍼블리싱과 관련된 유용한 정보를 공유하세요.
질문은 상단의 QA에서 해주시기 바랍니다.

제일 이해안되는 문제.. 정보

HTML 제일 이해안되는 문제..

본문

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

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

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

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

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

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

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

댓글 25개

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

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

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

왜 이런지 모르겠어요ㅠ
xp notepad는 사용하지 말기를 권장드립니다.

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

notepad++나 에디터플러스등 프로그램 전용 에디터를 사용하세요.
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
절대 제 얘기를 서운하게 생각하시지 마시구요, 잘 생각해 보세요.  사람은 누구나 결과물을 만들어 내고 싶은 impulse (충동) 이 있습니다.  빨리 멋진 웹페이지 하나를 만들고 싶은 마음은 누구나 다 똑같을 겁니다.

그런데 그 충동을 꾹 참으시고, 일단 책을 파시고, 학문적으로 먼저 접근을 하셔서, 기본 이론을 단단히 갖추시면, 그게 엄청난 시간의 절감을 가져 옵니다. 

문서위에 <!doctype html> 이렇게 하나 넣으세요.  그럼 해결되요.  이런 답을 드리는 거는, 물고기를 잡아 드리는거지, 낚시하는 법을 가르쳐 드리는게 아닙니다.  일단 물고기를 잡기보다는 낚시하는 법을 배우시길 바랍니다.

저두, 지금 배우고 있는게 있는데, 저도 얼마나 그걸 구축하고 싶은지 모릅니다.  그렇지만 그냥 꾹 참고, 계속 이론만 파고 듭니다.  결과적으로 이게 더 빠른 방법임을 잘 알기에, 매일 한시간씩 공부만 합니다.  코딩은 전혀 하지 않구요.  제가 코딩하는걸 얼마나 좋아하는데, 그걸 안하고 꾹 참고 책만 파려니까, 저도 참 많이 괴롭습니다. 

그런데, 어짜피 이론을 완벽하게 이해하지 못하는 상태에서 뭘 만들어 낸다고 하더라도, 그건 장기적으로 아무런 도움이 되지 않거든요. 

아무쪼록 현명한 판단을 하셔서, 좋은 결과가 있으셨으면 좋겠습니다.
이미 DTD 선언에 대해서도 수도없이 검색해보고 알아봤구요,
여러가지로 선언해봤는데 현재 이 글의 문제에 대해서는 변함이 없습니다.
페이지 소스 보기로 보시면 맨 위에 DTD 선언이 되어있습니다.
혹시 댓글 중간에 남긴것이 뭍힐까봐 새로 남깁니다.
BOM문제인것 같습니다.  doctype 선언전에 남은 BOM찌꺼기 때문에 doctype도 제대로 처리 못하는 것 같습니다.

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
아.. 저는 그냥 우클릭해서 파일을 다운받아보니 DTD 선언이 되어 있지 않길레...

그런데 이상하네요... XP Notepad 에서는 아무런 hidden character 도 뭍어나지 않습니다. 

오히려 드림위버나 에딧플 에서 hidden character 가 뭍어나오는 경우가 있어서, htaccess 파일 같은 것 작성할때는 필수적으로 notepad 를 써야 하거든요...

Notepad 에서 뭍어나오고 있는건 아닌 것 같습니다.
hidden character가 뭔가요?
그런데 notepad++에서 옵션을 utf-8(BOM 없음)으로 적용하고 저장해보니 이제 페이지가 정상적으로 출력되네요ㅎㅎ
정말로 정상적으로 출력이 되시나요??? 훔....

첫 페이지를 좀 면밀하게 살펴봤습니다.

첫페이지에서는 그냥 프레임으로 외부 페이지를 불러오고 있거든요.

첫 페이지에서 프레임으로 외부 페이지를 불러오는 구조인데, 그 외부 페이지의 DOC TYPE 이 선언이 안되어 있네요.  불러오는 페이지는 DTD 선언이 되어 있지만, 불려들어와지는 페이지는 DOC TYPE 선언이 되어 있지 않는 상태입니다.

그래서 패딩이 안 먹힌 것 같은데요??

"평생 무료도메인, 미니홈피, 블로그, 홈페이지 등등의 긴주소를 짧게! 신청시 바로 사용가능 DYD.KR" 이 문구가 나오는 페이지를 말하고 있는겁니다.

아무튼 잘 해결되시길....

hidden character 이란 가끔 드림위버나 에딧플에서 보이지 않는 캐릭이 문서에 섞여 들어가서 오류를 발생하는 경우가 있습니다.  문서를 열어보면 안보이는데, 몇 byte 안되는 찌꺼기 같은 것들이 섞여 들어가서 hidden character 라고 부릅니다.
프레임 구조는, 도메인 포워딩 방식 중 masking을 안할때 나오는 구조같습니다. (적어도 고대디 호스팅에서는 그렇더군요..^^;)
근데, 다평정님이 사용하시는 호스팅은, 그런 도메인 포워딩을,DOCTYPE도 선언안되어 있고, 타이틀을 원래 내용으로 바꾸지 못하는 등, 제대로 처리해주지 못하는 것 같고요..
제 경우 (고대디 호스팅)을  바탕으로 추론해본것입니다.
도메인 포워딩 해주는 쪽에서 문제가 있을수도 있고요..

제가 잘 아는 분야는 아니라서 더 정보를 드리기는 힘들것 같네요.. ^^;
어쨋든 현재 사용하시는 도메인 포워딩 + 호스팅에서는
몇가지 문제(타이틀, doctype 등)가 있어보입니다. ^^
아 그렇군요. 전 dyd.kr은 당연히 다평정님 도메인이고, 그중 서브도메인을 dothome으로 포워딩 하는 줄 알았는데, 도메인 자체가 포워딩이었군요.. ^^

네, 그렇게 하시면 지금의 몇가지 문제는 없어지겠네요. ^^
XP notepad도 저장했을 경우 캐릭셋 지정이 안되기때문에 , 목적하는 캐릭셋과 상이할 경우 히든캐릭셋이나 찌꺼기가 붙을 수 있습니다.
또한 , 엔터값이 리눅스시스템과 윈도우 시스템에서 서로 다르기때문에 충분히 문제가 생길 수 있습니다.
리눅스 서버 라면 기본 노트패드는 피하세요 xp고 win7이고..
드림위버는 당연히 코드 편집기 로는 무겁고요. 에딧플러스나 울트라에딧 등 추천합니다...
파일 방식도 좀 알아 놓으셔야 되겠네요. 그리고, 실전 경험 없이 공부만하고 아는척만 하는 사람말 절대 듣지 마세요.
이론 아무리 좋아도 비슷한 수준이라면, 경험자를 절반도 따라갈수 없어요
안녕하셨어요? ^^
요새도 구글 analytics로 가끔 보면, 크롬 익스텐션 많이 사용하시는 것을 확인할 수 있었습니다. ^^
그 이후로 통 손을 못대었는데, 문제가 있거나 필요한 기능이 있으시면 언제든지 알려주세요. ^^*
전체 797
퍼블리셔팁 내용 검색 HTML에서

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1402호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT