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

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

지운아빠
프로필 보기이 회원 글보기
 · 13년 전 · 9138 · 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년 전
정말 필요했던 정보인대 궁굼증을 전부 해결해주셨네요~ 좋은정보 감사합니다 ^^

게시글 목록

번호 제목
1199
반응형웹 반응형웹 스크립트로 바꾸기 3
1197
반응형웹 반응형 레이아웃의 첫걸음 예제소스
1181
부트스트랩 부트스트랩 MIT 라이센스? 3
1165
부트스트랩 data-toggle 체크박스 활용
785
표준화 9강 최신글(skin/latest) 스킨 7
455
반응형웹 *. 반응형 웹 관련 개발자 설문조사 결과 17
426
표준화 8강 아웃로그인 스킨 (skin/outlogin) 7
311
표준화 7강 갤러리 게시판 스킨 (skin/board) 21
287
반응형웹 7. 서버측 반응형 웹 접근방법 17
247
반응형웹 6. 반응형 이미지 46
237
반응형웹 잠깐글2. 반응형 테이블 12
236
표준화 6강 일반 게시판 스킨 (skin/board) 19
220
반응형웹 5. 반응형 네비게이션/메뉴 25
215
반응형웹 잠깐글1. 반응형 웹은 ???다. 11
205
반응형웹 4. 반응형 레이아웃 21
179
반응형웹 3. 반응형 그리드 23
167
반응형웹 2. CSS3 미디어쿼리와 스크린 경계 19
133
반응형웹 1. 반응형 웹 디자인/모바일 퍼스트의 이해 58
119
반응형웹 반응형 웹 강좌를 시작하며 33
108
표준화 번외편 - 퍼블리싱을 한다는 것은? 17
98
표준화 5강 그누보드4s 레이아웃 계획 및 구성 11
86
표준화 4강 그누보드4 dtd 변경 및 오류 찾기 (html5) 19 현재글
82
표준화 3강 html5 시맨틱 마크업과 그누보드 12
64
표준화 2강 장애인차별금지법의 이해 - 웹 접근성 16
50
표준화 1강 웹 표준, 웹 접근성의 이해 30
46
표준화 그누보드4 웹 표준화 강좌 규칙 11
34
표준화 그누보드4 웹 표준화 커리큘럼 21
1
표준화 그누보드4 웹 표준화 강좌를 시작하며 37
이전
전체 목록