모바일메뉴

EOND

검색
마이페이지
홈페이지제작솔루션 CMS WEB 툴팁 위키 지식인 CMS 포럼 경매모듈 질문•답변
HTML5/CSS3
글쓰기
-
가
+
크로스브라우징 팁 정리
이온디
2009.01.01 20:37
4204
0
https://eond.com/162805
object(HotopayModel)#900 (23) { ["error"]=> int(0) ["message"]=> string(7) "success" ["variables"]=> array(0) { } ["httpStatusCode"]=> int(200) ["module"]=> string(7) "hotopay" ["module_info"]=> NULL ["origin_module_info"]=> NULL ["module_config"]=> NULL ["module_path"]=> string(52) "/home/eond/web/eond.com/public_html/modules/hotopay/" ["xml_info"]=> NULL ["module_srl"]=> NULL ["mid"]=> NULL ["act"]=> NULL ["template_path"]=> NULL ["template_file"]=> NULL ["layout_path"]=> NULL ["layout_file"]=> NULL ["edited_layout_file"]=> NULL ["stop_proc"]=> bool(false) ["user"]=> object(Rhymix\Framework\Helpers\SessionHelper)#899 (20) { ["member_srl"]=> int(0) ["user_id"]=> NULL ["user_name"]=> NULL ["nick_name"]=> NULL ["email_address"]=> NULL ["phone_number"]=> NULL ["homepage"]=> NULL ["blog"]=> NULL ["birthday"]=> NULL ["denied"]=> NULL ["status"]=> NULL ["is_admin"]=> string(1) "N" ["is_site_admin"]=> NULL ["profile_image"]=> NULL ["image_name"]=> NULL ["image_mark"]=> NULL ["signature"]=> NULL ["description"]=> NULL ["group_list"]=> array(0) { } ["menu_list"]=> array(0) { } } ["request"]=> object(Rhymix\Framework\Request)#10 (13) { ["method"]=> string(3) "GET" ["compat_method"]=> string(3) "GET" ["url"]=> string(28) "coding/162805/comment/465170" ["hostname"]=> string(8) "eond.com" ["domain"]=> NULL ["protocol"]=> string(5) "https" ["callback_function"]=> string(0) "" ["_route_status":protected]=> int(200) ["_route_options":protected]=> object(stdClass)#11 (5) { ["cache_control"]=> bool(true) ["check_csrf"]=> bool(true) ["is_forwarded"]=> bool(false) ["is_indexable"]=> bool(true) ["enable_session"]=> bool(true) } ["module"]=> string(5) "board" ["mid"]=> string(6) "coding" ["act"]=> string(16) "dispBoardContent" ["args"]=> array(5) { ["page"]=> int(9) ["document_srl"]=> string(6) "162805" ["comment_srl"]=> string(6) "465170" ["mid"]=> string(6) "coding" ["act"]=> string(16) "dispBoardContent" } } ["ajaxRequestMethod"]=> array(2) { [0]=> string(6) "XMLRPC" [1]=> string(4) "JSON" } ["gzhandler_enable"]=> bool(true) }

이 글은 정찬명님의 나라디자인에서 '크로스브라우징 팁'을 읽고 정리한 내용을 갈무리해놓았습니다.

1) 바른 DTD 사용.
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2) 공동 선택자(*) 활용
* { margin:0; padding:0; font-size:small; font-family:돋움, Dotum, AppleGothic, sans-serif;}

공통선택자에 font 를 정의하는 이유는 body 태그에 적용한 font 속성은 form 내부의 element 와 th, td 태그에까지 이를 상속하지 않는데 반하여 공통선택자에 이것을 적용하면 모든 element 에 대한 font 를 완벽하게 통일할 수 있기 때문입니다. 또한 font 에 대표속성(예: {font:small 돋움, Dotum, AppleGothic, sans-serif})을 사용하지 않는 이유는 이를 사용하는 경우 h1~h6, th, strong 태그가 기본적으로 지니고 있는 font-weight 까지 모두 초기화(normal) 되기 때문입니다. font의 대표속성을 사용할 때 font-weight 따위를 정의하지 않으면 font-wight:normal 상태로 렌더링 됩니다.

3) 의도하지 않았던 여백이 발생하는 경우는 보통 inline 형태의 element 문제 또는 IE 의 버그 때문 입니다. inline 형태의 element 는 항상 line-height 를 지니고 있습니다. 따라서 의도하지 않았던 여백이 발생하는 경우 일단 inline element 의 line-height 문제가 아닌지 먼저 확인해 보아야 합니다. line-height 도 화면에서 분명히 면적을 차지하고 있습니다. 안타깝게도 line-height 속성을 CSS 에서 따로 정의하지 않았다면 웹 브라우저 제품마다 line-heght 를 다르게 렌더링 할 것입니다. 이 때문에 어떤 브라우저에서는 의도한 대로 나타나지만 어떤 브라우저에서는 박스와 박스 사이에 여백이 생길 수도 있는 것입니다. 또 다른 문제는 잘 알려진 IE 버그로서 block 된 li 에 발생하는 알 수 없는 여백의 문제 입니다. 이럴 때에는 해당 li 가 화면에서 차지하는 면적을 제거하기 위하여 li {float:left; clear:both} 를 적용하고 float 된 li 의 면적이 부모 element 에게는 유효하게 전달되도록 ul {overflow-hidden} 을 적용해 보시기 바랍니다.

4) 화면 레이아웃을 결정할 때 position 속성을 사용하거나 또는 float 을 사용하라고 배웠을 것입니다. {position:absolute} 상태일 때에는 화면에서 면적을 차지하지 않는다는 것을 잘 알고 계실껍니다. 그리고 {position:absolute} 상태일 때에는 그다지 렌더링 관련 버그를 만나는 경우가 없을 것입니다. 하지만 float 의 경우 IE 에서는 버그가 있으므로 FF, OP 브라우저와의 차이가 발견되면 일단 IE 를 믿지 마시기 바랍니다. 이것에 대한 문제해결은 float 이 화면에서 면적을 차지하지 않는다는 사실과 IE 에서는 이와 관련된 버그가 있다는 사실을 인지하는 것으로부터 시작됩니다. 자주 발견되는 IE 의 렌더링 오류는 float 된 요소와 float 되지 않은 요소가 만나는 방법입니다. float 은 원래 주변의 inline 요소만 흐르도록 하는것이 맞지만 IE 는 block 된 이웃 요소도 float 의 영향을 받습니다.
IE 처럼 렌더링 시키려면 b 상자에도 float 속성을 넣어주면 됩니다. float 된 element 는 float 되지 않은이웃 element 와 서로 간섭하지 않지만 float 된 이웃 element 끼리는 서로의 면적을 인식하게 되기 때문입니다. 추가적으로 IE 6.x는 float된 요소에 적용된 margin을 두 배로 출력하는 버그가 있습니다. 따라서 float을 사용할때 margin을 함께 사용하지 않는것도 중요한 팁 입니다.
0
0
목록
글쓰기 신고 스크랩

댓글 0

댓글작성칸으로
HTML5/CSS3
-
가
+
전체 웹표준 웹접근성 부트스트랩 반응형 웹 UI HTML5 jQuery Script CSS Meta Table Form 미분류 PHP Flash CGI DIV 웹폰트 크로스브라우징 위지윅에디터 svg 프레임워크 map swiperjs
3 4 5 6 7 8 9 10 11 12
글쓰기
메뉴닫기
profile
로그인 해주세요.
자유게시판 글쓰기 저장함 쪽지
전체글보기 인기글 인기멤버 태그

전체 게시판

닫기

마이페이지

로그인을 해주세요

네이버로 로그인
ID/PW찾기 회원가입