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

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

지운아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 · 13년 전 · 9152 · 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년 전
사이드뷰도 살포시 찍어주세용~
지운아빠
프로필 보기이 회원 글보기이 회원의 댓글보기
 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년 전
정말 필요했던 정보인대 궁굼증을 전부 해결해주셨네요~ 좋은정보 감사합니다 ^^

게시글 목록

번호 제목
1418
부트스트랩 애니메이션 경고
1417
부트스트랩 경고 닫기
1416
부트스트랩 알림 링크
1414
부트스트랩 부트 스트랩 경고 2
1413
부트스트랩 부트 스트랩 웰스
1412
부트스트랩 부트 스트랩 Jumbotron 및 페이지 헤더
1411
부트스트랩 응답 성있는 삽입
1410
부트스트랩 이미지 갤러리
1409
부트스트랩 반응 형 이미지
1408
부트스트랩 부트 스트랩 이미지 - 미리보기 이미지
1407
부트스트랩 부트 스트랩 이미지 - 원
1406
부트스트랩 부트 스트랩 이미지 - 부트 스트랩 이미지 모양
1405
부트스트랩 반응 형 테이블
1404
부트스트랩 문맥 분류
1403
부트스트랩 요약 표
1402
부트스트랩 호버 행
1401
부트스트랩 테두리가있는 표
1400
부트스트랩 부트 스트랩 스트라이프 행
1399
부트스트랩 부트 스트랩 기본 테이블
1398
부트스트랩 부트 스트랩은 HTML <pre>요소
1397
부트스트랩 부트 스트랩은 HTML <kbd>요소
1396
부트스트랩 부트 스트랩은 HTML <code>요소
1395
부트스트랩 부트 스트랩은 HTML <dl>요소
1394
부트스트랩 <blockquote>
1393
부트스트랩 <abbr>
1392
부트스트랩 <mark>
1391
부트스트랩 <small>
1390
부트스트랩 부트 스트랩 텍스트 / 타이포그래피
1389
부트스트랩 2 개의 서로 다른 열
1388
부트스트랩 3 개의 동일한 열
이전 다음
전체 목록