매뉴얼::기본속성

Basic attribute

기본 속성 클래스입니다.

position .position-relative .position-absolute .position-static .position-fixed

position .relative .absolute .static .fixed

display .display-block .display-inline-block .display-inline .display-none

display .block .inline-block .inline .none

display-table .display-table .display-table-row .display-table-cell

display-table .table .table-row .table-cell

float .float-left .float-right .float-none

vertical-align .vertical-align-top .vertical-align-middle .vertical-align-bottom

vertical-align .top .middle .bottom

overflow .visibility-hidden .overflow-hidden

clear .clear-both .after-clear-both

clear .clear .after-clear

position

PC

.position-relative .position-absolute .position-static .position-fixed

.relative .absolute .static .fixed

모바일 옆으로 보기

.m-position-relative .m-position-absolute .m-position-static .m-position-fixed

.m-relative .m-absolute .m-static .m-fixed

모바일 바로보기

.e-position-relative .e-position-absolute .e-position-static .e-position-fixed

.e-relative .e-absolute .e-static .e-fixed

CSS code


/* positon */
.position-absolute,.absolute{position:absolute}
.position-relative,.relative{position:relative}
.position-static,.static{position:static}
.position-fixed,.fixed{position:fixed}

/* m-position */
@media screen and (max-width:683px){
.m-absolute{position:absolute !important}
.m-relative{position:relative !important}
.m-static{position:static !important}
.m-fixed{position:fixed !important}
}

/* e-position */
@media screen and (max-width:439px){
.e-absolute{position:absolute !important}
.e-relative{position:relative !important}
.e-static{position:static !important}
.e-fixed{position:fixed !important}
}

display

PC

.display-block .display-inline-block .display-inline .display-none

.block .inline-block .inline .none

모바일 옆으로 보기

.m-display-block .m-display-inline-block .m-display-inline .m-display-none

.m-block .m-inline-block .m-inline .m-none

모바일 바로보기

.e-display-block .e-display-inline-block .e-display-inline .e-display-none

.e-block .e-inline-block .e-inline .e-none

CSS code


/* display */
.display-block,.block{display:block}
.display-inline-block,.inline-block{display:inline-block;*display:inline;*zoom:1}
.display-inline,.inline{display:inline}
.display-none,.none {display:none !important}

/* m-display */
@media screen and (max-width:683px){
.m-display-block,.m-block{display:block !important}
.m-display-inline-block,.m-inline-block{display:inline-block;*display:inline;*zoom:1}
.m-display-inline,.m-inline{display:inline}
.m-display-none,.m-none{display:none !important}
}

/* e-display */
@media screen and (max-width:439px){
.e-display-block,.e-block{display:block !important}
.e-display-inline-block,.e-inline-block{display:inline-block;*display:inline;*zoom:1}
.e-display-inline,.e-inline{display:inline}
.e-display-none,.e-none{display:none !important}
}

display-table

PC

.display-table .display-table-row .display-table-cell

.table .table-row .table-cell

모바일 옆으로 보기

.m-display-table .m-display-table-row .m-display-table-cell

.m-table .m-table-row .m-table-cell

모바일 바로보기

.e-display-table .e-display-table-row .e-display-table-cell

.e-table .e-table-row .e-table-cell

CSS code


/* display-table */
.display-table,.table{display:table;width:100%}
.display-table-row,.table-row{display:table-row}
.display-table-cell,.table-cell{display:table-cell}

/* m-display-table */
@media screen and (max-width:683px){
.m-display-table,.m-table{display:table;width:100%}
.m-display-table-row,.m-table-row{display:table-row}
.m-display-table-cell,.m-table-cell{display:table-cell}
}

/* e-display-table */
@media screen and (max-width:439px){
.e-display-table,.e-table{display:table;width:100%}
.e-display-table-row,.e-table-row{display:table-row}
.e-display-table-cell,.e-table-cell{display:table-cell}
}

float

PC

.float-left .float-right .float-none

모바일 옆으로 보기

.m-float-left .m-float-right .m-float-none

모바일 바로보기

.e-float-left .e-float-right .e-float-none

CSS code


/* float */
.float-left{float:left}
.float-right{float:right}
.float-none{float:none;clear:both}

/* m-float */
@media screen and (max-width:683px){
.m-float-left{float:left}
.m-float-right{float:right}
.m-float-none{float:none;clear:both}
}

/* e-float */
@media screen and (max-width:439px){
.e-float-left{float:left}
.e-float-right{float:right}
.e-float-none{float:none;clear:both}
}

vertical-align

PC

.vertical-align-top .vertical-align-middle .vertical-align-bottom

.top .middle .bottom

모바일 옆으로 보기

.m-vertical-align-top .m-vertical-align-middle .m-vertical-align-bottom

.m-top .m-middle .m-bottom

모바일 바로보기

.e-vertical-align-top .e-vertical-align-middle .e-vertical-align-bottom

.e-top .e-middle .e-bottom

CSS code


/* vertical-align */
.vertical-align-top,.top{vertical-align:top !important}
.vertical-align-middle,.middle{vertical-align:middle !important}
.vertical-align-bottom,.bottom{vertical-align:bottom !important}

/* m-vertical-align */
@media screen and (max-width:683px){
.m-vertical-align-top,.m-top{vertical-align:top !important}
.m-vertical-align-middle,.m-middle{vertical-align:middle !important}
.m-vertical-align-bottom,.m-bottom{vertical-align:bottom !important}
}

/* e-vertical-align */
@media screen and (max-width:439px){
.e-vertical-align-top,.e-top{vertical-align:top !important}
.e-vertical-align-middle,.e-middle{vertical-align:middle !important}
.e-vertical-align-bottom,.e-bottom{vertical-align:bottom !important}
}

overflow

PC

.visibility-hidden .overflow-hidden

모바일 옆으로 보기

.m-visibility-hidden .m-overflow-hidden

모바일 바로보기

.e-visibility-hidden .e-overflow-hidden

CSS code


/* overflow */
.visibility-hidden{visibility:hidden}
.overflow-hidden{overflow:hidden}

/* m-overflow */
@media screen and (max-width:683px){
.m-visibility-hidden{visibility:hidden}
.m-overflow-hidden{overflow:hidden}
}

/* e-overflow */
@media screen and (max-width:439px){
.e-visibility-hidden{visibility:hidden}
.e-overflow-hidden{overflow:hidden}
.e-overflow-not{overflow:initial !important}
}

clear

PC

.clear-both .after-clear-both

.clear .after-clear

모바일 옆으로 보기

.m-clear-both .m-after-clear-both

.m-clear .m-after-clear

모바일 바로보기

.e-clear-both .e-after-clear-both

.e-clear .e-after-clear

CSS code


/* clear */
.clear-both,.clear{content:".";display:block;height:0;font-size:0;clear:both;visibility:hidden}
.after-clear:after,.after-clear-both:after{content:".";display:block;height:0;font-size:0;clear:both;visibility:hidden}

/* m-clear */
@media screen and (max-width:683px){
.m-clear-both,.m-clear{content:".";display:block;height:0;font-size:0;clear:both;visibility:hidden}
.m-after-clear:after,.m-after-clear-both:after{content:".";display:block;height:0;font-size:0;clear:both;visibility:hidden}
}

/* e-clear */
@media screen and (max-width:439px){
.e-clear-both,.e-clear{content:".";display:block;height:0;font-size:0;clear:both;visibility:hidden}
.e-after-clear:after,.e-after-clear-both:after{content:".";display:block;height:0;font-size:0;clear:both;visibility:hidden}
}

M-속성클래스

모바일 옆으로 보기 해상도에서 적용됩니다.

position .m-position-relative .m-position-absolute .m-position-static .m-position-fixed

display .m-display-block .m-display-inline-block .m-display-inline .m-display-none

display-table .m-display-table .m-display-table-row .m-display-table-cell

float .m-float-left .m-float-right .m-float-none

vertical-align .m-vertical-align-top .m-vertical-align-middle .m-vertical-align-bottom

overflow .m-visibility-hidden .m-overflow-hidden

단축 클래스

position .m-relative .m-absolute .m-static .m-fixed

display .m-block .m-inline-block .m-inline .m-none

display-table .m-table .m-table-row .m-table-cell

vertical-align .m-top .m-middle .m-bottom

E-속성클래스

모바일 해상도에서 적용됩니다.

position .e-position-relative .e-position-absolute .e-position-static .e-position-fixed

display .e-display-block .e-display-inline-block .e-display-inline .e-display-none

display-table .e-display-table .e-display-table-row .e-display-table-cell

float .e-float-left .e-float-right .e-float-none

vertical-align .e-vertical-align-top .e-vertical-align-middle .e-vertical-align-bottom

overflow .e-visibility-hidden .e-overflow-hidden

단축 클래스

position .e-relative .e-absolute .e-static .e-fixed

display .e-block .e-inline-block .e-inline .e-none

display-table .e-table .e-table-row .e-table-cell

vertical-align .e-top .e-middle .e-bottom

font-size

font-size정의

font-size(Editor)

font-size정의

line-height

line-height정의

font-family

font-family정의

text-decoration

text-decoration 정의

font-weight

font-weight 정의