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

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

· 13년 전 · 5040 · 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개

으아 !! 엄청 유용한 정보 !!!! 감사합니다 !
수고하셨습니다. 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%}
figure img { height: auto; }
는 너무 대충일까요? ^^;
13년 전
앗 방금 크롬 개발자 도구로 테스트해봤는데 딱이네요!!! 감사합니다!!
내일 출근하는데로 반영해야겠어요. ^^
정말... 이 강좌는 너무 실무적인거라 너무 유용하고 뭔가 팍 풀리는 기분이네요 ㅠㅠ

감사드립니다.

와우!!
자료가 정말 엄청나시네요.
대단하십니다 감사히 잘 읽었습니다
문득 doctype을 html5로 하면 모든 브라우저가 동일하게 렌더링 하게 되는건지 착각하게 되네요 .
물론 아니겠지만, 모두 동일한 오류현상을 보여서 기분좋아지는(?) 독타입이네요.ㅎㅎ
13년 전
오해할 소지가 있었네요. 내용 추가했습니다. ^^
너무 좋네요. ^^
그누보드 반응형 강좌때 위 포멧을 참조해야 겠습니다.

게시글 목록

번호 제목
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