크로스 브라우징 쉽게 하기!!
크로스 브라우징...
모든 브라우저에서 똑같이 보여야하는것이죠.
대부분 크로스브라우징이 잘 안되는건 같은 html tag라도 지정하지 않은 margin이나 padding의 기본값이 다르기 때문입니다!! (체크박스에 기본마진값이 있다니!!)
고로 크로스브라우징을 쉽게 하려면 문서작성에 사용한 html tag에 관해 모든 margin과 padding 값을 css 최상단에 0으로 선언 한 후 진행하면됩니다. (인풋 텍스트 height를 30px로 지정하면 항상 크롬에서 32px로 표기되었던 지난날 ㅠㅠ...기본 padding값이 들어있을줄이야...)
기본적인 사항이지만 스킨이라던지 홈페이지에서 일부분만 변경할 시 놓치는 부분이어서...
모든 브라우저에서 똑같이 보여야하는것이죠.
대부분 크로스브라우징이 잘 안되는건 같은 html tag라도 지정하지 않은 margin이나 padding의 기본값이 다르기 때문입니다!! (체크박스에 기본마진값이 있다니!!)
고로 크로스브라우징을 쉽게 하려면 문서작성에 사용한 html tag에 관해 모든 margin과 padding 값을 css 최상단에 0으로 선언 한 후 진행하면됩니다. (인풋 텍스트 height를 30px로 지정하면 항상 크롬에서 32px로 표기되었던 지난날 ㅠㅠ...기본 padding값이 들어있을줄이야...)
기본적인 사항이지만 스킨이라던지 홈페이지에서 일부분만 변경할 시 놓치는 부분이어서...
댓글 8개
돼지코구뇽
12년 전
body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,blockquote,button{margin:0;padding:0;-webkit-text-size-adjust:none}
body,input,textarea,select,table,button{color:#000;font-family:'dotum','돋움','AppleGothic',sans-serif;font-size:100%;font-weight:normal;}
table {border-collapse:collapse; border-spacing:0;}
img,fieldset {border:0;}
img,input,select,textarea{vertical-align:top;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal; font-weight:normal;}
strong {font-weight:bold;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;}
abbr,acronym {border:0;}
이런식으로 최상단에 먼저 css 정의하고 작업한다는 말이지요?ㅎ 감사합니다
body,input,textarea,select,table,button{color:#000;font-family:'dotum','돋움','AppleGothic',sans-serif;font-size:100%;font-weight:normal;}
table {border-collapse:collapse; border-spacing:0;}
img,fieldset {border:0;}
img,input,select,textarea{vertical-align:top;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal; font-weight:normal;}
strong {font-weight:bold;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;}
abbr,acronym {border:0;}
이런식으로 최상단에 먼저 css 정의하고 작업한다는 말이지요?ㅎ 감사합니다
12년 전
css reset
12년 전
저도 css reset 강추~
12년 전
맞는거 같아요 저두 css reset 파일 하나 만들어놓고 무조건 그거부터 집어넣구 코딩하니..편하더라구요 ㅋ
12년 전
reset 파일은 하나씩 있어야 하고~ 허나 ..form 에서 padding값을 재조정할경우 크로스브라우징할때 머리아프다능.... width 값도 달라지고 머리아파요 ㅋ
스피드애드
12년 전
좋은 정보 감사합니다 .. 갈 길이 머네요 ㅋ
12년 전
검색으로 찾아보니 css reset 하면 사이트성능이 저하된다는데 정말인가요?
http://www.cmsfactory.net/css-tutorial-css-reset
http://www.cmsfactory.net/css-tutorial-css-reset
0gusxo0
11년 전
전 항상 리셋해서 작업하는데 그런건 모르겠네요
css 자체가 원래 크게 성능에 영향을 안주는데
만약에 성능이 저하된다고 해도 신경쓸 정도는 아니지 않을까요?
css 자체가 원래 크게 성능에 영향을 안주는데
만약에 성능이 저하된다고 해도 신경쓸 정도는 아니지 않을까요?
게시글 목록
| 번호 | 제목 |
|---|---|
| 18790 |
JavaScript
공백제거
|
| 18788 |
PHP
셀렉트박스 간편하게 만들기
1
|
| 18786 | |
| 18783 |
PHP
게시판의 페이징 방법
2
|
| 18780 |
PHP
이미지에 워터마크 처리하기
2
|
| 18769 |
Mobile
Chrome 를 이용한 모바일모드
10
|
| 5549 | |
| 27272 | |
| 27267 | |
| 30785 | |
| 30782 | |
| 27264 | |
| 18767 |
JavaScript
스크립트오류 제거
1
|
| 18765 |
JavaScript
간단한 쿠키지원 팝업 스크립트
1
|
| 18764 | |
| 18763 |
JavaScript
대소문자변환
|
| 5546 | |
| 18760 | |
| 18758 | |
| 18755 |
JavaScript
홈페이지 브라우저 크기 고정시키기
2
|
| 18752 |
JavaScript
iframe 아이프레임 투명처리
2
|
| 27256 | |
| 27247 | |
| 5539 | |
| 18750 | |
| 27244 | |
| 27243 | |
| 18749 |
JavaScript
금액 입력시 자동으로 천단위구분기호(,) 붙여주는 함수
|
| 18747 | |
| 18745 |
JavaScript
출생년도에 따른 나이 계산 자바스크립트
1
|
| 18741 | |
| 18740 | |
| 18738 |
JavaScript
iframe에서 페이지를 닫을 때
1
|
| 18731 |
JavaScript
iframe 높이 자동조절 스크립트
6
|
| 18730 |
JavaScript
자바스크립트 인공지능 장기게임-Minimax
|
| 27240 | |
| 5535 | |
| 18728 |
JavaScript
금액을 한글로 표기 해주는 스크립트;
1
|
| 18726 |
JavaScript
전화번호 입력시 자동 하이픈 넣기
1
|
| 18724 |
JavaScript
사업자번호체크스크립트 간단버전
1
|
| 5532 | |
| 26500 |
견적서
홈페이지 제작 견적서
14
|
| 27237 | |
| 5529 | |
| 30776 | |
| 18721 |
jQuery
플러그인 만들기 간단 예제
2
|
| 20725 | |
| 27232 | |
| 18719 |
JavaScript
퀵메뉴
1
|
| 18717 | |
| 18714 |
JavaScript
입력박스안에 왠 아이콘?
2
|
| 18712 |
JavaScript
게시판 글작성시 일부 태그막기
1
|
| 18709 |
jQuery
랜덤한 레이아웃과 효과
2
|
| 27213 | |
| 27200 | |
| 18706 |
JavaScript
자동으로 textarea 크기 조절하기
2
|
| 18704 |
JavaScript
textarea 자동 늘려주기 2
1
|
| 18702 |
JavaScript
해당 브라우저에 지원하는 이벤트 확인
1
|
| 18701 |
JavaScript
자바스크립트로 논리적인 XOR 연산하기.
|
| 18700 |
JavaScript
동적 셀렉트박스 다루기.
|
| 18698 |
JavaScript
자바스크립트 이벤트 핸들러 (Event Handler)
1
|
| 18697 |
JavaScript
함수명을 변수로 해야할 때
|
| 18696 |
JavaScript
이메일 유효성 정규식 - 자바스크립트
|
| 18694 | |
| 5525 | |
| 27199 | |
| 18691 | |
| 5515 | |
| 5510 | |
| 5501 | |
| 18690 | |
| 18687 | |
| 5496 | |
| 18686 | |
| 18676 | |
| 26496 |
서식
영수증 양식
3
|
| 18675 | |
| 30773 | |
| 18671 |
JavaScript
이미지 슬라이드 관련입니다.(자바,제이쿼리)
3
|
| 30767 | |
| 18667 |
JavaScript
롤오버시 서브메뉴가 나타나는 기본 스크립트
3
|
| 18658 |
jQuery
회사에 히스토리에 써먹을 만한 자료
8
|
| 18650 | |
| 18648 |
MySQL
고수님들 도와주세요!
1
|
| 5494 | |
| 5490 | |
| 20705 | |
| 5485 | |
| 18645 |
Mobile
json 파싱방법
2
|
| 27194 | |
| 20684 |
정규표현식
정규표현식 의 핵심. 패턴변경자 1
20
|
| 18642 | |
| 5482 | |
| 27185 | |
| 5478 | |
| 5473 | |
| 5467 | |
| 18636 | |
| 5462 | |
| 5443 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기