Css Generator

Class Name

className

Preview Demo

Border Preview

Preview Copy

적용된 HTML

적용된 CSS

.border_class_example {
    width: 200px;height: 100px;
    border: 1px solid #ccc;
    padding: 10px;
}

position

borderPositionUnit

position 사용

Position top

Position top number Position top 0

borderPositionUnit

Position top 사용

Position right

Position right number Position right 0

borderPositionUnit

Position right 사용

Position bottom

Position bottom number Position bottom 0

borderPositionUnit

Position bottom 사용

Position left

Position left number Position left 0

borderPositionUnit

Position left 사용

display

display 사용

border

border top, right, bottom, left 개별 설정

borderWidth number borderWidth 1px

borderStyle

borderWidthUnit

border 사용

border 개별 테두리

borderColor

borderColor_opacity number borderColor_opacity 1

border top

border top : borderWidth number border top : borderWidth 1px

border top : borderStyle

border top : borderColor

borderColor_top_opacity number borderColor_top_opacity 1

border right

border right : borderWidth number border right : borderWidth 1px

border right : borderStyle

border right : borderColor

borderColor_right_opacity number borderColor_right_opacity 1

border bottom

border bottom : borderWidth number border bottom : borderWidth 1px

border bottom : borderStyle

border bottom : borderColor

borderColor_bottom_opacity number borderColor_bottom_opacity 1

border left

border left : borderWidth number border left : borderWidth 1px

border left : borderStyle

border left : borderColor

borderColor_left_opacity number borderColor_left_opacity 1

border-radius

border-radius top, right, bottom, left 개별 설정

borderRadius number borderRadius 0

borderRadiusUnit

border-radius 사용

borderRadius 개별

border-radius-top

border-radius-top number border-radius-top 1px

border-radius-right

border-radius-right number border-radius-right 1px

border-radius-bottom

border-radius-bottom number border-radius-bottom 1px

border-radius-left

border-radius-left number border-radius-left 1px

width

sizeWidth

sizeWidthUnit

size Width 사용

height

sizeHeight

sizeHeightUnit

size Height 사용

padding

padding top, right, bottom, left 개별 설정

padding number borderPadding 10px

borderPaddingUnit

padding 사용

padding 개별

padding-top

padding-top number padding-top 1px

padding-right

padding-right number padding-right 1px

padding-bottom

padding-bottom number padding-bottom 1px

padding-left

padding-left number padding-left 1px

margin

margin top, right, bottom, left 개별 설정

margin number borderMargin 0

borderMarginUnit

margin 사용

margin 개별

margin-top

margin-top number margin-top 1px

margin-right

margin-right number margin-right 1px

margin-bottom

margin-bottom number margin-bottom 1px

margin-left

margin-left number margin-left 1px

background-color

backgroundColor_opacity number backgroundColor_opacity 1

border 사용

color

cssColor

cssColor_opacity number cssColor_opacity 1

color 사용

gradient Type

gradientType

gradientType Linear gradientType Radial

gradient 사용

gradient Color1

gradient color1

gradient_color1_opacity number gradient_color1_opacity 1

gradient Color1 percent

gradient_color1_per number gradient_color1_per 1

gradient Color2

gradient color2

gradient_color2_opacity number gradient_color2_opacity 1

gradient Color2 percent

gradient_color2_per number gradient_color2_per 1

font-size

fontSize number fontSize 12px

fontSizeUnit

font-size 사용

font-weight

fontWeight

font-weight 사용

line-height

line-height number lineHeight 12px

lineHeightUnit

line-height 사용

text-align

text-align 사용

vertical-align

vertical-align 사용

transition Property

transition 사용

transition duration (s)

transition_opacity number transition_opacity 0.5

transition Function

transitionFunction

box-shadow Color

boxShadowColor

boxShadowUnit

Inset

box-shadow 사용

box-shadow X

boxShadow_x number boxShadow_x 5px

box-shadow Y

boxShadow_y number boxShadow_y 5px

box-shadow Spread

boxShadow_spread number boxShadow_spread 5px

box-shadow Blur

boxShadow_blur number boxShadow_blur 5px

box-shadow Opacity

boxShadow_opacity number boxShadow_opacity 1

text-shadow Color

textShadowColor

textShadowUnit

text-shadow 사용

box-shadow X

textShadow_x number textShadow_x 2px

box-shadow Y

textShadow_y number textShadow_y 2px

box-shadow Blur

textShadow_blur number textShadow_blur 2px

box-shadow Opacity

textShadow_opacity number textShadow_opacity 1

Preview Demo

Border Preview

적용된 HTML

적용된 CSS

.border_class_example {
    width: 200px;height: 100px;
    border: 1px solid #ccc;
    padding: 10px;
}

로그인

회원로그인

로그인

Css Generator

Css Generator

C.m.A Util

Css Generator