web 라이브러리
body, ul, li, h1 {
margin:0;
padding:0;
list-style:none;
}
a {
color:inherit;
text-decoration:none;
}
/* 라이브러리 */
.block {
display:block;
}
.inline-block {
display:inline-block;
}
.absolute-left {
position:absolute;
left:0;
}
.absolute-right {
position:absolute;
right:0;
}
.absolute-bottom {
position:absolute;
bottom:0;
}
.absolute-top {
position:absolute;
top:0;
}
.absolute-center {
position:absolute;
left:50%;
transform:translateX(-50%);
}
.absolute-middle {
position:absolute;
top:50%;
transform:translateY(-50%);
}
.absolute-middle.absolute-center {
position:absolute;
top:50%;
left:50%;
transform:translateX(-50%) translateY(-50%);
}
.relative {
position:relative;
}
.cell {
float:left;
box-sizing:border-box;
}
.cell-right {
float:right;
box-sizing:border-box;
}
.row::after {
content:"";
display:block;
clear:both;
}
.img-box > img {
width:100%;
display:block;
}
.con {
margin-left :auto;
margin-right :auto;
}
.text-align-center {
text-align:center;
}
.text-align-right {
text-align:right;
}
.width-30px {
width:30px;
}
.width-35px {
width:35px;
}
.width-40px {
width:35px;
}
.width-45px {
width:35px;
}
.width-50px {
width:50px;
}
.width-80px {
width:80px;
}
.width-100px {
width:100px;
}
.width-100p {
width:100%;
}
.width-60p {
width:60%;
}
.width-55p {
width:55%;
}
.width-50p {
width:50%;
}
.width-45p {
width:45%;
}
.width-40p {
width:40%;
}
.width-30p {
width:30%;
}
.width-35p {
width:35%;
}
.width-100p-except-30px {
width:calc(100% - 30px);
}
.width-100p-except-35px {
width:calc(100% - 35px);
}
.width-100p-except-40px {
width:calc(100% - 40px);
}
.width-100p-except-50px {
width:calc(100% - 50px);
}
.width-100p-except-80px {
width:calc(100% - 80px);
}
.width-100p-except-100px {
width:calc(100% - 100px);
}
.height-100p {
height:100%;
}
.height-50p {
height:50%;
}
.border-box {
box-sizing:border-box;
}
.font-size-dot-8rem {
font-size:.8rem;
}
.table-row {
display:table;
}
.table-row.row::after {
display:inline;
clear:non;
}
.table-row > .cell {
float:none;
display:table-cell;
}
.border-red {
border:10px solid red;
}
.border-black {
border:10px solid black;
}
.border-green {
border:10px solid green;
}
.border-blue {
border:10px solid blue;
}
.border-gold {
border:10px solid gold;
}
.border-pink {
border:10px solid pink;
}
/* 라이브러리 - flex */
* > .flex {
display:flex;
}
* > .flex-grow-1 {
flex-grow:1;
}
* > .flex-jc-c {
justify-content:center;
}
* > .flex-jc-s {
justify-content:flex-start;
}
* > .flex-jc-e {
justify-content:flex-end;
}
* > .flex-jc-sb {
justify-content:space-between;
}
* > .flex-ai-c {
align-items:center;
}
* > .flex-ai-s {
align-items:flex-start;
}
* > .flex-ai-e {
align-items:flex-end;
}
* > .flex-as-s {
align-self:stretch;
}
* > .flex-as-c {
align-self:center;
}
* > .flex-as-s {
align-self:flex-start;
}
* > .flex-as-e {
align-self:flex-end;
}
* > .flex-column-nowrap {
flex-flow:column nowrap;
}
* > .flex-column-wrap {
flex-flow:column wrap;
}
* > .flex-row-wrap {
flex-flow:row wrap;
}
.flex-ch-basis-0 > * {
flex-basis:0;
}
* > .flex-1-0-0 {
flex:1 0 0;
}