HTML5 - 190623 Basic Study 64(에릭마이어 reset.css)

1. CSS Code

html, body, div, span, applet‎, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}

img{

 border:0;

}

 

2. 모바일 코딩 필수 공통영역 CSS Code

* {
 margin:0;
 padding:0;
 -webkit-text-size-adjust:none; }
body {
 color:#666;
 font-size:14px;
 font-family:Helvetica, AppleGothic, 돋움, Dotum; }
img, fieldset { border:0 }
ul, ol, li, dl { list-style:none; }
h1, h2, h3, h4, h5, h6 {
 font-size:100%;
 font-weight:normal; }
hr { display:none; }
a { color:inherit; }
a, a:link {
 color:#333;
 text-decoration:none; }
a:visited { color:#333; }
a:hover, a:active {
 color:#333;
 text-decoration:none; }
em, i, address {
 font-style:normal;
 font-weight:normal; }
legend, caption {
 display:none;
 clear:both; }
input, textarea, select, button, table {
 font-size:inherit;
 font-family:inherit;
 line-height:inherit; }
section, nav, article, aside, hgroup, header, footer { display:block }
textarea, input {
 background:url(none);
 -webkit-border-radius:1px;
 -webkit-apprearance:none; }
textarea { resize:none; }
label { cursor:pointer; }
.helv { font-family:돋움, HelveticaNeue, Dotum, 굴림, Gulim, Apple-Gothic; }
.verd { font-family:verdana, 돋움, HelveticaNeue, Dotum, 굴림, Gulim, Apple-Gothic; }
.bold { font-weight:bold; }

 

3. 수정 CSS Code

@charset "utf-8";
/* CSS Document */

/* PC 버전 */
* {
	margin: 0;
	padding: 0;
	font: inherit;
	/* 그림이나 input 상자 주변글자 사이의 배치 */
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
/* 호환성 보기 : 크로스브라우징 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
/* 글꼴이나 줄간격 */
}
ol, ul {
	/* 목록을 삭제 */
	list-style: none;
}
blockquote, q {
/* 홋 따옴표 없애기 */
	/* quotes: none; */
}
/* blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
} */
table {
	/* 표 테두리와 셀 테두리를 단일 실선으로 고정 */
	border-collapse: collapse;
	/* 표 간격 */
	border-spacing: 0;
}
img {
	/* 익스플로러 하위버전에서 그림테두리가 나오는 것을 방지 */
	border: 0;
}
/* 모바일 겸용 버전 */
* {
	margin: 0;
	padding: 0;
	/* 크롬(모바일 전용) / 글자크기 자동 조절 방지 */
	-webkit-text-size-adjust: none;
}
/* img, fieldset { border:0 } */
body {
	font-size: 14px;
}
h1, h2, h3, h4, h5, h6 {
	/* font-size: 100%; */
	/* font-weight: normal; */
}
hr {
	/* 수평선 숨기기 */
	display: none;
}

/* base.css */
/* a관련 테그는 필수 */
a {
	color: inherit;
}
a, a:link {
	color: #333;
	text-decoration: none;
}
a:visited {
	color: #333;
}
a:hover, a:active {
	color: #333;
	text-decoration: none;
}

/* 글자 관련 테그 */
em, i, address {
	/* 글자모양 기울임체 */
/* 	font-style: normal;
	font-weight: normal; */
}
legend, caption {
/* 	display: none;
	clear: both; */
}
input, textarea, select, button, table {
/* 	font-size: inherit;
	font-family: inherit;
	line-height: inherit; */
}
textarea, input {
/* 	background: url(none);
	-webkit-border-radius: 1px;
	-webkit-apprearance: none; */
}
textarea {
	/* 크롬에서 크기 변경 */
	resize: none;
}
label {
	cursor: pointer;
}
.helv {
	font-family: 돋움, HelveticaNeue, Dotum, 굴림, Gulim, Apple-Gothic;
}
.verd {
	font-family: verdana, 돋움, HelveticaNeue, Dotum, 굴림, Gulim, Apple-Gothic;
}

/* 자주쓰는 속성은 클래스로 정의 */
.bold {
	font-weight: bold;
}