CSS - 리셋 세팅하기

CSS 리셋 세팅하기.

 

 

1. 여백초기화

body,
div,
dl,
dt,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
textarea,
p,
blockquote,
th,
td,
input,
select,
button,
article,
aside,
details,
footer,
header, 
hgroup, 
menu, 
nav, 
section,
figure,
figcaption {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

 

 

2.시멘틱 태그 초기화

article,
aside, 
details, 
figcaption, 
figure,
footer, 
header, 
hgroup, 
menu, 
nav, 
section {
	display: block;
    }

 

3. 간격셋팅

.mt0 {margin-top: 0 !important;}
.mt10 {margin-top: 10px !important;}
.mt20 {margin-top: 20px !important;}
.mt30 {margin-top: 30px !important;}
.mt40 {margin-top: 40px !important;}
.mt50 {margin-top: 50px !important;}
.mb0 {margin-bottom: 0 !important;}
.mb10 {margin-bottom: 10px !important;}
.mb20 {margin-bottom: 20px !important;}
.mb30 {margin-bottom: 30px !important;}
.mb40 {margin-bottom: 40px !important;}
.mb50 {margin-bottom: 50px !important;}

 

4. IR 효과

.ir_pm {
     display: block;
     overflow: hidden;
     font-size: 0;
     line-height: 0;
     text-indent: -9999px;
 }
.ir_wa {
    display: block;
    overflow: hidden;
    position: relative;
    z-index: -1;
    width: 100%;
    height: 100%;
}
.ir_so {
    overflow: hidden;
    position: absolute;
    width: 0;
    height: 0;
    line-height: 0;
    text-indent: -9999px;
}

 

5.클리어픽스

/* 클리어 픽스 */
.clearfix {
    zoom: 1;
}
.clearfix::before,
.clearfix::after {
    content: '';
    display: block;
}
.clearfix::after {
    clear: both;
}