.flexbox {
display : flex / inline-flex / flexbox / inline-flexbox;
flex-direction : row / column / row-reverse / column-reverse / inherit / initial / unset;
flex-wrap : nowrap / wrap / wrap-reverse / inherit / initial / unset;
flex-flow : row wrap;
justify-content : flex-start / flex-end / center / space-between / space-around / space-evenly / inherit / initial / unset;
align-items : flex-start / flex-end / center / stretch / inherit / initial / unset;
align-content : flex-start / flex-end / center / stretch / space-between / space-around / space-evenly / inherit / initial / unset;
flex-grow : 0 / 1 / inherit / initial / unset;
flex-shrink : 0 / 1 / inherit / initial / unset;
flex-basis : auto / 0 / 50% / 100px / 10rem / inherit / initial / unset;
flex : 0;
flex : 1; /* flex: 1 1 0; flex-grow: 1; flex-shrink: 1; flex-basis: 0; */
flex : 1 500px; /* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */
flex : 50%;
flex : 100%;
flex : initial; /* flex: 0 1 auto */ /* 기본값 */
flex : auto; /* flex: 1 1 auto */ /* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
flex : none; /* flex: 0 0 auto */
flex : inherit / unset / content;
order : 012345 / inherit / initial / unset;
align-self : auto / baseline / flex-start / flex-end / center / stretch / inherit / initial / unset;
}
.item:nth-child(1) { flex-shrink: 0; width: 100px; }
.item:nth-child(2) { flex-grow: 1; }
.item:nth-child(3) { flex: 2 1 0; }
.transform {
transform : none / perspective() / inherit / initial / unset;
transform : matrix() / matrix3d();
transform : rotate(20deg) / rotate3d() / rotateX(30deg) / rotateY(45deg) / rotateZ(90deg);
transform : scale(0.5, 0.5) / scale3d() / scaleX(0.5) / scaleY(0.5) / scaleZ(0.5);
transform : skew(20deg, 20deg) / skewX(20deg) / skewY(20deg) ;
transform : translate(-50%, -50%) / translate3d(0, 0, 0) / translateX(-50%) / translateY(-50%) / translateZ(-50%);
transform-origin : 50% 50% / top / bottom / center / left / right / inherit / initial / unset;
transform-style : flat / preserve-3d / inherit / initial / unset;
}
::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 10px; background: #dedede; }
.tooltip { right: inherit; left: 50%; transform: translateX(-50%); }
.center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; margin: auto; }
.btn { position: absolute; left: 50%; transform: translate(-50%, 0%); }
[type="text"]
[class*="btn"]
[class^="step"]
:nth-child(odd)
:nth-child(even)
:nth-child(n+4)
:nth-child(2n)
:nth-child(2n-1)
:nth-child(3n+1)
:nth-last-child(2)
:nth-of-type(1)
:nth-of-type(2n)
:nth-last-of-type(2)
:nth-col
:nth-last-col
:not(:first-child)
:not(:last-child)::after
input[leadonly]:not(.css)
*:not(.btn01,.btn02,.btn03)
span + input
span ~ input
::after { content: ''; display: block; clear: both; }
input::-webkit-input-placeholder { color: #000; }
.css {
font : 15px HyundaiFont; -webkit-text-size-adjust: none;
box-sizing : border-box / content-box / inherit / initial / unset;
display : flow-root;
display : -webkit-box; overflow: hidden; max-height: 40px; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.width {
width : auto / 100% / 100vh / 100vw / 100vmin / 100vmax;
width : calc(49px / 2); max-width: 80vw;
}
.height {
height : auto / 100% / 100vh / 100vw / 100vmin / 100vmax;
height : calc(49px / 2);
max-height : calc(75 * (1vw + 1vh - 1vmin));
}
.margin { margin-left : auto; margin-left : 50%; }
.text {
word-break : break-all / keep-all / break-word;
text-transform : lowercase uppercase;
}
.background {
box-shadow : 0 2px 2px 0 rgba(0,0,0,0.1);
box-shadow : 0 2px 2px 0 rgb(0 0 0 / 8%);
background : transparent url() no-repeat center / 50px 50px;
background : #f7f9ff url() no-repeat right 10px center / 50px 50px;
background : #f7f9ff url() no-repeat right 10px top 10px / 50px 50px;
background : #f7f9ff url() no-repeat 0 0 / 100% auto;
background : #f7f9ff url() no-repeat 50% 50% / 20px 20px;
background : #f7f9ff url() no-repeat -100px 0 / 250px auto;
background : #f7f9ff url() no-repeat calc(100% - 10px) 50% / 20px auto;
background : #f7f9ff url() no-repeat calc(100% - 10px) 50% / calc(49px/2) calc(41px/2);
background : linear-gradient(85deg, #00be96, #00cad9);
background : linear-gradient(105deg, #3d5bdc 0%, #488ff6 100%);
background : linear-gradient(105deg, #3d5bdc 0%, #416ce5 30%, #488ff7 75%);
background : linear-gradient(115deg, #3d5bdc 0%, #4294f3 30%, #4294f3 60%, #3d5bdc 100%);
background : linear-gradient(to right bottom, #3d5bdc 0%, #488ff6 45%, #488ff6 55%, #3d5bdc 100%);
background : linear-gradient(to top, #fffccc 50%, transparent 50%);
}
.transition {
transition : all 0.2s ease; -webkit-transition: all 0.2s ease; -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -ms-transition: all 0.2s ease;
transition : 300ms;
}
.hidden { position: absolute; top: 0; left: 0; width: 1px; height: 1px; padding: 0; overflow: hidden; visibility: hidden; background: none; color: transparent; font-size: 0; line-height: 0; }
.file-wrap { vertical-align: middle; display: inline-block; position: relative; width: 60px; height: 20px; overflow: unset; background: url(bg_file_wrap.png) #fff no-repeat 0 0; }
.input-file:focus + label { outline: 1px solid #000; }
/* animation 1 */
.animation { animation: color 5s ease-in-out infinite; -webkit-animation: color 5s ease-in-out infinite; }
@-webkit-keyframes color {
0%, 100% { stroke: #1e88e5;}
25% { stroke: #3d5bdc;}
50% { stroke: #0f82be;}
75% { stroke: #00bfa5;}
}
@keyframes color {
0%, 100% { stroke: #1e88e5;}
25% { stroke: #3d5bdc;}
50% { stroke: #0f82be;}
75% { stroke: #00bfa5;}
}
/* animation 2 */
.animation { animation: btn 3s infinite; }
@keyframes btn {
0% { background-color: #fff; color: #1e88e5; }
30% { background-color: #fff; color: #1e88e5; border: 2px solid #1e88e5; }
75% { background: linear-gradient(to right bottom, #6da5f8 0%, #6b9df4 90%, #6da5f8 100%); }
100% { background: linear-gradient(to right bottom, #6da5f8 0%, #6b9df4 90%, #6da5f8 100%); color: #fff; border: 2px solid #fff; }
}
/* animation 3 */
.animation { animation: rotation 1s infinite linear; }
@keyframes rotation {
from { transform: rotate(0deg); }
to { transform: rotate(359deg); }
}
@-webkit-keyframes rotation {
from { -webkit-transform: rotate(0deg); }
to { -webkit-transform: rotate(359deg); }
}
/* animation 4 */
.animation { animation: circle 1s linear infinite; }
@keyframes circle {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}
/* animation 5 */
.animation {
animation-name: loading-rotate;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
transform-origin: center;
}
@keyframes loading-rotate {
100% { transform: rotate(360deg); }
}
@media only screen {}
@media screen and (min-width: 320px) {}
@media screen and (max-width: 320px) {}
@media screen and (min-width: 320px) and (max-width: 360px) {}
@media all and (min-width: 320px) and (max-width: 360px) {}
Tags:
IT
