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

4강 그누보드4 dtd 변경 및 오류 찾기 (html5)

지운아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 13년 전 · 5046 · 19

4강 그누보드4 dtd 변경 및 오류 찾기 목차

  1. 그누보드4에서 dtd 선언하는 법
  2. 그누보드4 dtd 선언 Before & After
    1. 초기화면
    2. 회원가입, 약관
    3. 회원가입, 정보입력
    4. 회원가입, 완료
    5. 아이디/패스워드 찾기
    6. 현재접속자
    7. 최근게시물
    8. 전체검색
    9. 쪽지, 받은쪽지
    10. 쪽지, 보낸쪽지
    11. 쪽지, 쓰기
    12. 쪽지, 읽기
    13. 스크랩
    14. 포인트
    15. 게시판, 목록
    16. 게시판, 읽기
    17. 게시판, 쓰기
  3. 스터디 그룹 모집 알림

그누보드4에서 dtd 선언하는 법

그누보드4에서 dtd 관련 내용을 다루는 부분은 head.sub.php 입니다.
head.sub.php 는 그누보드4를 설치한 루트 디렉토리에 있습니다.
아래의 소스비교를 통해 head.sub.php 에서 그누보드4 dtd 를 변경하는 방법을 알아보겠습니다. (html5로) 

        <!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> -->
        <html>
        
        <!doctype html>
        <html lang='ko'>

다 됐습니다. 이게 끝입니다. 이제 그누보드4를 html5로 사용하실 기본준비가 끝이 났습니다. 너무 쉽다구요? ㅎㅎㅎ
그럼 다음 장에서 그누보드4의 dtd 선언을 html5 로 바꿨을 때 나타나는 현상을 살펴보겠습니다.

그누보드4 dtd 선언 Before & After

그누보드4 dtd 를 html5 로 선언했을때 레이아웃의 변화를 살펴보겠습니다. 각 섹션의 첫번째 이미지가 dtd 선언 전이며, 두번째 이미지가 dtd 선언 후의 스크린샷입니다.
브라우저는 ie9 기준입니다. 왜냐구요? 제가 자주 써서요...

초기화면

최상단 라인 깨짐, 아웃로그인 input 높이 높아짐, 검색 배경 깨짐

회원가입, 약관

타이틀과 radio button 이 가운데 정렬로 바뀜

회원가입, 정보입력

input 높이 높아짐

회원가입, 완료

안내메세지 가운데 정렬됨

아이디/패스워드 찾기

label 가운데 정렬, input 높이 높아짐, 안내메세지 가운데 정렬

현재접속자

title header 깨짐

최근게시물

a 링크 가운데 정렬

전체검색

select 랜더링 변경됨, input 높이 높아짐

쪽지, 받은쪽지

안내메세지 가운데 정렬, 스크롤바 없어짐

쪽지, 보낸쪽지

안내메세지 가운데 정렬, 스크롤바 없어짐

쪽지, 쓰기

textarea 랜더링 변경, 스크롤바 없어짐

쪽지, 읽기

쪽지 내용 가운데 정렬, 스크롤바 없어짐

스크랩

스크롤바 없어짐

포인트

스크롤바 없어짐

게시판, 목록

select 랜더링 변경됨, input 높이 높아짐

게시판, 읽기

댓글에 답변 버튼 위치 낮아짐, input 높이 높아짐

게시판, 쓰기

input 높이 높아짐, 파일첨부 행의 파일첨부란 왼쪽 정렬됨
목록
이전글 다음글

댓글 작성

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

로그인하기

댓글 19개

현님
프로필 보기이 회원 글보기이 회원의 댓글보기
 13년 전
으아 !! 엄청 유용한 정보 !!!! 감사합니다 !
흑형GDT
프로필 보기이 회원 글보기이 회원의 댓글보기
 13년 전
수고하셨습니다. 2빠
지운아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 13년 전
미리보기 중 일부 이미지는 리사이징을 잘못 처리하고 있습니다. 가까운 시일 내에 수정하겠습니다.
참고로 현재 강좌에서 사용하는 '이미지'와 '캡션' 그리고 '이미지 리사이즈' css 는 다음과 같습니다.
혹시 이미지 등비율 리사이징 css 아시는 분 계시면 알려주세요. ㅠ

figure {margin-bottom:10px;text-align:center}
figure img {border:1px solid #ddd}
figure figcaption {display:block;clear:both;margin-top:10px;padding:0 10px;border-left:3px solid #ededed;color:#818385;font-size:0.9em;text-align:left;line-height:1.3em}
figure .figure_before {float:left;margin-bottom:10px;width:330px}
figure .figure_before:before {display:block;content:'Before'}
figure .figure_before img {float:left;width:100%}
figure .figure_after {float:left;margin-bottom:10px;margin-left:30px;width:330px}
figure .figure_after:before {display:block;content:'After'}
figure .figure_after img {float:left;width:100%}
전진
프로필 보기이 회원 글보기이 회원의 댓글보기
 13년 전
figure img { height: auto; }
는 너무 대충일까요? ^^;
지운아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 13년 전
앗 방금 크롬 개발자 도구로 테스트해봤는데 딱이네요!!! 감사합니다!!
내일 출근하는데로 반영해야겠어요. ^^
마스터K
프로필 보기이 회원 글보기이 회원의 댓글보기
 13년 전
정말... 이 강좌는 너무 실무적인거라 너무 유용하고 뭔가 팍 풀리는 기분이네요 ㅠㅠ

감사드립니다.

와우!!
onlymilk74
프로필 보기이 회원 글보기이 회원의 댓글보기
 13년 전
자료가 정말 엄청나시네요.
대단하십니다 감사히 잘 읽었습니다
gilynh
프로필 보기이 회원 글보기이 회원의 댓글보기
 13년 전
문득 doctype을 html5로 하면 모든 브라우저가 동일하게 렌더링 하게 되는건지 착각하게 되네요 .
물론 아니겠지만, 모두 동일한 오류현상을 보여서 기분좋아지는(?) 독타입이네요.ㅎㅎ
지운아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 13년 전
오해할 소지가 있었네요. 내용 추가했습니다. ^^
전진
프로필 보기이 회원 글보기이 회원의 댓글보기
 13년 전
너무 좋네요. ^^
그누보드 반응형 강좌때 위 포멧을 참조해야 겠습니다.
기루기루
프로필 보기이 회원 글보기이 회원의 댓글보기
 13년 전
사이드뷰도 살포시 찍어주세용~
지운아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 13년 전
아 사이드뷰도 있었네요. 알겠습니다. ㅎㅎㅎ
홍익플래시
프로필 보기이 회원 글보기이 회원의 댓글보기
 12년 전
선언을 한다는 의미를 좀 설명해주시면 안 될까요? 사용자에 대한 선언인가요? w3c에 대한 선언인가요?
지운아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 12년 전
저도 처음에 선언이란 단어가 어려웠습니다.
말 자체에 집중하지 마시고 다음과 같이 이해하시면 됩니다.

html 문서를 처음 시작하실 때,
<!doctype html>
처럼 입력해주시면, HTML5 로 선언된 것입니다.

문서 선언 형식은 다음과 같습니다.

HTML 2.0
<!DOCTYPE html PUBLIC "-//IETF//DTD HTML 2.0//EN">

HTML 3.2
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 3.2 Final//EN">

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

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

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

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

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

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

XHTML 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

XHTML Basic 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.0//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd">

XHTML Basic 1.1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN">
길가다꽁해져
프로필 보기이 회원 글보기이 회원의 댓글보기
 12년 전
조금 헷갈릴수 있는데, DTD Type 에 따라서 렌더링 되는 화면이 달라질수 있으므로 명시하는게 좋습니다. 선언이나 정의나 비슷한 개념인데, 웹문서를 어떠한 DTD 형식으로 해석하여 보여주라는 의미로 받아들이시는게 속이 편할거같아요~ DTD를 생략하면 브라우저가 임의로 해석해서 렌더링하기도 하기때문에 가급적 해당 DTD를 표기하고 문법에 맞게 코딩하는게 좋겠죠
직업재활
프로필 보기이 회원 글보기이 회원의 댓글보기
 12년 전
감사하다는 말뿐이네요 ^^ 많이 배워요~~
비스다름
프로필 보기이 회원 글보기이 회원의 댓글보기
 12년 전
잘 보고 있습니다. 감사합니다.
나짱
프로필 보기이 회원 글보기이 회원의 댓글보기
 12년 전
이번 강좌 부터는 좀 어려워지네요. ㅎ
갱쿤
프로필 보기이 회원 글보기이 회원의 댓글보기
 11년 전
정말 필요했던 정보인대 궁굼증을 전부 해결해주셨네요~ 좋은정보 감사합니다 ^^

게시글 목록

번호 제목
28403
반응형 웹 스타디 초안 4
28402
zurb의 foundation (반응형 프레임워크)과 off-canvas 방식 가변형 레이아웃
28401
반응형 레이아웃 와이어프레임
28398
가변형 레이아웃/네비게이션 패턴 2
28397
반응형 이미지 기법들
28394
반응형 웹 디자인 (Responsive Web Design) 2
4504
개발자 아이모듈 관리자페이지를 새로 만들고 있습니다. 11
26593
퍼블리셔 이경우 어떻게 해야할까요?? 6
4502
개발자 포인트 어떻게 올리나여 1
18132
정규표현식 정규식 테스트 가능한 사이트 추천해드립니다~~ 9
28388
구글 애드센스 배경색 설정 (로딩시 노란색으로 깜빡이는 문제 해결) 5
4496
개발자 모바일 기기 해상도와 웹브라우저 해상도 5
4491
개발자 국내/국외 접속국가에 따라서 국문/영문 홈페이지 보여짐은 어떻게?? 4
4486
개발자 도대체...포인트는요... 4
4483
개발자 옷.. 에스알소프트로 출범.. 2
4482
개발자 우와 멋져요~
4479
개발자 cakephp 고수님들께 여쭙니다. 2
18122
PHP 유튜브 API를 활용한 영상 업로드 및 활용 9
18120
JavaScript 흔한 트위터,페이스북 퍼가기 자바스크립트 1
26590
퍼블리셔 우왕..퍼블리셔도 생겼네요~ 2
18113
Linux 리눅스 FFMPEG 자동실행소스(자작임) 6
24419
기획자 리뉴얼 축하드립니다 1
4474
개발자 리자님 익스7로좀 봐주세용 4
4465
개발자 사이트 리뉴얼의 전말 8
4461
개발자 토크게시판과 자유게시판의 차이? 3
4460
개발자 상큼해졌요~
4451
개발자 새로 바뀐 검색 어떠세요? 8
26589
퍼블리셔 이뻐요^^
4450
개발자 새로 바뀐 홈피 넘 멋져요.^^
4448
개발자 아니 홈피가 바꼈네요. 1
24418
기획자 너무예쁘게 바뀌었네요.^^
31037
표준화 그누보드4 웹 표준화 강좌를 시작하며 37
26390
인터넷 쇼핑몰, 생존 노하우는? 6
4446
개발자 오늘 가입했습니다. 1
26585
퍼블리셔 저는 디자이너 이지만요.. 3
26581
퍼블리셔 퍼블리셔 게시판 생겼단 말 듣고 달려왔습니다! 3
26578
퍼블리셔 퍼블리셔라고 말하기는 참 미안하지만..... 2
18098
PHP 웹 소스 긁어오기 14
4443
트래픽 필드 오류로 1
18097
PHP 쇼핑몰과 프로그램 연동작업해주실분 구해요. 메뉴얼있음
26388
구글 크롬, 젤리빈 기본브라우저로…의미는? 1
18094
Mobile 스마트폰에서 영상소스는? 2
30596
HTML 레이아웃이 비뚤합니다. 3
26387
오비고, 스마트TV용 HTML5기반 웹앱 공개
18091
정규표현식 정규식으로 html 태그 지우기 2
4445
기타 염치불구하고 추천좀 부탁드리겠습니다.
18088
jQuery 이미지 슬라이더 만들어보았습니다. 2
18086
jQuery 순차애니메이션 질문좀 드리겠습니다. 1
18085
기타 드림위버 cs6 코딩 글깨집니다.
18082
Linux CentOS release 6.3 Starting httpd: Warning: DocumentRoot [/home/myhome/public_html/] does not exist [ OK ] 뜰 때 2
18081
PHP 접속시마다 랜덤한 페이지를 뿌려주려면
18078
Linux 리눅스용 웹에디터 Kompozer 입니다. 2
18076
PHP 에디터 홈페이지에 삽입하는 방법 1
18074
node.js node.js 0.8.2 번역 문서 1
18072
jQuery CSS3처럼 이미지 라운딩 기능의 제이쿼리 1
18070
jQuery 이 플래시메뉴처럼 바꿔 만들려면... 1
18069
기타 플래시 버전 좀 내려서 저장해주시겠나요-_-??
18066
Mobile 가로 폭 문제 2
18064
MySQL MySQL 테이블명 대소문자 구분안하기 1
18057
PHP 고수님들 도와주세요. 메일발송문제입니다. 6
18056
Flash 플래시 네비 관련
30588
HTML DIV의 justify 정렬 문제 7
18055
JavaScript ie 에서는 되는데 크롬에서는 왜 안될까요?
18054
PHP 질답코너에 문의를 올려도 반응이 없어 도움을 요청합니다.
30585
HTML CGF 사용 방법 (지운아빠님 보시면 참조되실 것 같아서. ㅎㅎ) 2
18051
기타 테이블깨짐 원인좀 알려주세요~~ 2
18050
jQuery 이미지 슬라이드 질문 드립니다.
18048
Mobile 모바일 페이지 확대 축소 도움부탁려요 1
18047
PHP HTTP 로그인 인증창에 대해 질문합니다 도와주세요ㅠㅠ
18044
JavaScript HTTP 로그인 인증창에 대해 질문합니다 도와주세요ㅠㅠ 2
26386
“웹개발자도 쉽게“…새 양방향 3D표준 눈길
18042
기타 플래쉬에 관련된 질문입니다. 1
30580
HTML 메뉴하나 따라 만들어보고 있는데.. Css질문 4
4425
커뮤니티 사이트의 미래와 그누보드 확장성 17
18039
JavaScript 자바에서... 2
18037
Linux 리눅스 특정확장자 하위디렉토리까지 일괄삭제하기 1
18031
JavaScript list.skin.php에서 자바스크립트 출력 문제 입니다. 5
18028
기타 홈페이지 하나 만드려고 하는데요. 호스팅? 2
18027
Mobile 모바일 사이트는 웹표준 코딩 할려면 어떻게 하나요
18022
JavaScript JScript.Encode 복호화 방법 4
18018
MySQL db 값이 가끔 안넘어가는경우가..... 3
18016
MySQL 게시판생성시 테이블을 별도로 생성할때의 장점은? 1
18009
기타 뻔뻔하게 대놓고 추천 부탁드립니다 꾸뻑~~ 6
4423
여기에도 장비 필요하신분들이 있나요 1
18003
jQuery 메인 탭 롤링 배너 입니다. 5
18000
JavaScript jQuery 쉽게 참고 할만한 사이트 없나요? 2
17999
node.js NodeJS 추천사이트
17996
JavaScript 팝업창 관련 질문드려요! 2
17993
JavaScript 고수님들 도와주세요. "웹 페이지 오류 세부 정보"에러가 뜨는데 2
17989
기타 구인 구직 사이트를 개발하고 싶은데 3
17987
jQuery www.hyundaiusa.com 메뉴를 좀 여쭤봅니다. 1
17986
Mobile 모바일 동영상게시판 그누보드스킨 중 무엇을 쓰면 좋을까요?
17985
jQuery jquery 드롭다운메뉴 질문입니다.
17984
jQuery JQuery 소스 해결 좀 부탁드립니다.
4411
모바일 브라우져에서 웹소켓(Websocket) 11
17979
PHP UNION ALL 문의 드립니다람쥐~ ★★★★☆ 4
30576
HTML ssl 웹페이지 적용 질문 드립니다. 3
26383
방문자 늘리기VS개발능력 간 교환이 가능한가요? 2
17975
PHP 공지사항이나 기타 메인페이지에 한줄씩 노출 3
30569
HTML ssl 웹페이지 적용 질문드립니다. 6
이전 다음
전체 목록