4강 그누보드4 dtd 변경 및 오류 찾기 (html5)
4강 그누보드4 dtd 변경 및 오류 찾기 목차
그누보드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 기준입니다. 왜냐구요? 제가 자주 써서요...
초기화면
회원가입, 약관
회원가입, 정보입력
회원가입, 완료
아이디/패스워드 찾기
현재접속자
최근게시물
전체검색
쪽지, 받은쪽지
쪽지, 보낸쪽지
쪽지, 쓰기
쪽지, 읽기
스크랩
포인트
게시판, 목록
게시판, 읽기
게시판, 쓰기
|
댓글을 작성하시려면 로그인이 필요합니다.
댓글 19개
참고로 현재 강좌에서 사용하는 '이미지'와 '캡션' 그리고 '이미지 리사이즈' 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%}
는 너무 대충일까요? ^^;
내일 출근하는데로 반영해야겠어요. ^^
감사드립니다.
와우!!
대단하십니다 감사히 잘 읽었습니다
물론 아니겠지만, 모두 동일한 오류현상을 보여서 기분좋아지는(?) 독타입이네요.ㅎㅎ
그누보드 반응형 강좌때 위 포멧을 참조해야 겠습니다.
말 자체에 집중하지 마시고 다음과 같이 이해하시면 됩니다.
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">