DTD선언으로 중앙정렬 참고사항
그누보드 사이트 내에서 중앙정렬을 찾아서 자료 검색해보니
마땅한 내용이 없어서 직접 찾아보다가 참고 사항으로 내용을 기록합니다
하위내용도 중앙정렬을 포함 내용이라서 링크삽입
http://sir.co.kr/bbs/board.php?bo_table=g4_tiptech&wr_id=20744&sca=&sfl=wr_subject&stx=%EC%A4%91%EC%95%99%EC%A0%95%EB%A0%AC&sop=and
CSS내에서 직접 중앙정렬하기 위해서 적용해보다가 DTD선언에 있어서 문제를 확인했네요
head.sub.php 파일에서 Line 46 입니다
<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> -->
주석처리된 DTD선언문으로 인하여 margin: 0 auto; 의 CSS가 적용되지 않아서
주석문을 변경하였습니다 (IE8 에서 확인된 사항입니다)
변경중에서 확인된 내용은 오페라/사파리/불여우/크롬 모두 DTD선언문 없이도 혹은 주석문 처리하에서도
정상적으로 CSS 내용대로 중앙정렬되지만
IE8에서는 주석문때문에 style.css를 직접 수정하여도 적용되지 않습니다
혹 저처럼 중앙정렬에 애먹지 마시고 주석문을 수정해주시면 IE에서 원활히 중앙정렬 확인되실겁니다
IE 를 제외한 브라우져는 CSS적용후 정상 중앙정렬됩니다
IE를 사용하시려면 아래와 같이 선언문을 변경하세요
변경전 head.sub.php 파일에서 Line 46
<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> -->
<html>
변경후 head.sub.php 파일에서 Line 46
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
IE를 포함한 대부분의 브라우져에서 CSS 적용한 magin: 0 auto; 정상적으로 중양정렬 확인 되실겁니다
마땅한 내용이 없어서 직접 찾아보다가 참고 사항으로 내용을 기록합니다
하위내용도 중앙정렬을 포함 내용이라서 링크삽입
http://sir.co.kr/bbs/board.php?bo_table=g4_tiptech&wr_id=20744&sca=&sfl=wr_subject&stx=%EC%A4%91%EC%95%99%EC%A0%95%EB%A0%AC&sop=and
CSS내에서 직접 중앙정렬하기 위해서 적용해보다가 DTD선언에 있어서 문제를 확인했네요
head.sub.php 파일에서 Line 46 입니다
<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> -->
주석처리된 DTD선언문으로 인하여 margin: 0 auto; 의 CSS가 적용되지 않아서
주석문을 변경하였습니다 (IE8 에서 확인된 사항입니다)
변경중에서 확인된 내용은 오페라/사파리/불여우/크롬 모두 DTD선언문 없이도 혹은 주석문 처리하에서도
정상적으로 CSS 내용대로 중앙정렬되지만
IE8에서는 주석문때문에 style.css를 직접 수정하여도 적용되지 않습니다
혹 저처럼 중앙정렬에 애먹지 마시고 주석문을 수정해주시면 IE에서 원활히 중앙정렬 확인되실겁니다
IE 를 제외한 브라우져는 CSS적용후 정상 중앙정렬됩니다
IE를 사용하시려면 아래와 같이 선언문을 변경하세요
변경전 head.sub.php 파일에서 Line 46
<!-- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> -->
<html>
변경후 head.sub.php 파일에서 Line 46
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
IE를 포함한 대부분의 브라우져에서 CSS 적용한 magin: 0 auto; 정상적으로 중양정렬 확인 되실겁니다
댓글 7개
14년 전
좋은 팁 감사해요
14년 전
하지만 quicks 모드로 이미 작업된 사이트에선
dtd 적용 후 조금씩 어긋나는 부분을 수정할 여건이 안되면 문제가 발생합니다.
(잘 만들었다면 큰 문제는 아니겠지만 대부분 그렇지 못한 경우죠)
그때는 상위 엘리먼트(div로 하나 더 싸거나 body)에 text-align: center;를 적용하고
그 하위에 text-align: left;를 적용하면 됩니다.
물런 하위에는 width가 반드시 지정되있어야 합니다.
dtd 적용 후 조금씩 어긋나는 부분을 수정할 여건이 안되면 문제가 발생합니다.
(잘 만들었다면 큰 문제는 아니겠지만 대부분 그렇지 못한 경우죠)
그때는 상위 엘리먼트(div로 하나 더 싸거나 body)에 text-align: center;를 적용하고
그 하위에 text-align: left;를 적용하면 됩니다.
물런 하위에는 width가 반드시 지정되있어야 합니다.
14년 전
그누보드는
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
보다는
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
이게 바람직 합니다.
이것도 웹표준 유효성 검사하면 에러 수백개 많이 뜹니다. ^^
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
보다는
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
이게 바람직 합니다.
이것도 웹표준 유효성 검사하면 에러 수백개 많이 뜹니다. ^^
13년 전
감사합니다. 덕분에 정상적으로 만들었습니다.
13년 전
감사합니다 :)
12년 전
감사합니다. 무척 해맸습니다.
12년 전
감사합니다!!
게시판 목록
그누4 팁자료실
그누보드4와 관련된 팁을 여러분들과 함께 공유하세요.
나누면 즐거움이 커집니다.
나누면 즐거움이 커집니다.
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 3229 | 11년 전 | 4240 | ||
| 3228 |
평범한아빠
|
11년 전 | 9102 | |
| 3227 |
다케미카코
|
11년 전 | 5375 | |
| 3226 | 11년 전 | 10947 | ||
| 3225 | 11년 전 | 6110 | ||
| 3224 | 11년 전 | 7618 | ||
| 3223 |
다케미카코
|
11년 전 | 11663 | |
| 3222 | 11년 전 | 5181 | ||
| 3221 | 11년 전 | 5314 | ||
| 3220 | 11년 전 | 7091 | ||
| 3219 |
다케미카코
|
11년 전 | 4275 | |
| 3218 |
다케미카코
|
11년 전 | 4785 | |
| 3217 | 11년 전 | 4981 | ||
| 3216 |
다케미카코
|
11년 전 | 11450 | |
| 3215 | 11년 전 | 4873 | ||
| 3214 | 11년 전 | 7989 | ||
| 3213 | 11년 전 | 2656 | ||
| 3212 | 11년 전 | 5412 | ||
| 3211 | 11년 전 | 4825 | ||
| 3210 | 11년 전 | 10022 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기