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 {
text-size-adjust:none;
-webkit-text-size-adjust:none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
line-height: 160%;
}
body {
position: relative;
font-size: 16px;
color: #000;
line-height: 1.6;
font-weight: 400;
}
html,
body {
width: 100%;
height: 100%;
overflow-x: hidden;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display: block;
}
ol,
ul,
li {
list-style: none;
}
blockquote,
q {
quotes: none;
}
b,
strong {
font-weight: 600;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
input,
input[type=text],
input[type=password],
input[type=radio],
input[type=checkbox],
select,
textarea,
button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-family: inherit;
line-height: inherit;
font-size: inherit;
vertical-align: initial;
}
button {
background: none;
padding: 0;
margin: 0;
outline: 0;
border: 0;
color: inherit;
cursor: pointer;
}
button:focus {
outline: 1px dotted #000;
outline-offset: 2px;
}
img {
border: none;
vertical-align: top;
}
a {
display: block;
}
a:link,
a:visited,
a:active,
a:hover {
color: inherit;
text-decoration: none;
}
input[type=text],
input[type=password] {
border-radius: 0;
padding: 2px 0.5rem;
border: 1px solid #666;
box-sizing: border-box;
}
input[type=text]::placeholder {
font-size: 0.8em;
}
label input[type=radio],
label input[type=checkbox] {margin-right:2px;}
input[type=radio] {
margin: 0;
padding: 0;
outline: 0;
vertical-align: middle;
width: 1em;
height: 1em;
border: 1px solid #666;
position: relative;
box-sizing: border-box;
transform: translateY(-1px);
}
input[type=radio]:checked:after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0.5rem;
height: 0.5rem;
background: #298cce;
*color:#298cce;
content: '';
}
input[type=checkbox] {
margin: 0;
padding: 0;
outline: 0;
vertical-align: middle;
width: 1em;
height: 1em;
border: 1px solid #666;
position: relative;
box-sizing: border-box;
border-radius: 100%;
}
input[type=checkbox]:checked:after {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0.5rem;
height: 0.5rem;
border-radius: 100%;
background: #298cce;
*color:#298cce;
content: '';
}
select {
position: relative;
border-radius: 0;
padding: 2px 24px 2px 0.5rem;
border: 1px solid #666;
box-sizing: border-box;
background: url('../image/sub/ic_dropdown.png') no-repeat 95% 50%/auto;
background-color: #fff;
min-width:100px;
}
textarea {
display: block;
border-radius: 0;
padding: 0.5rem;
border: 1px solid #666;
box-sizing: border-box;
resize: none;
}
textarea::placeholder {
font-size: 0.8em;
}
address {
font-style: normal;
}
@media (max-width: 1199px) {
body {
font-size: 14px;
}
}
@media (max-width: 640px) {
select {
background-size: 10px 5px;
}
}
반응형
'웹 개발 > HTML & CSS' 카테고리의 다른 글
[css] 마우스로 드래그했을 때 배경색, 글씨색 바꾸기 (0) | 2023.04.07 |
---|---|
svg animation - svg로 선 그어지는 효과 (0) | 2023.04.07 |
[CSS] hover 효과 (0) | 2022.12.19 |
[HTML&CSS]동영상 반응형으로 삽입하기 (0) | 2022.09.13 |
[HTML&CSS] 레이아웃 마크업과 스타일을 모아둔 사이트 (0) | 2022.09.08 |
댓글