자주 쓰는 CSS 코드

1. 그리드

display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: 20px

2. float
:after {content:"";display:block;clear:both}
>div {
float:left;
}

 

3.select 모양성형
background:#fff url("../images/sub/select_arrow.png") no-repeat;
background-position: right 5px center;
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
select::-ms-expand {
    display: none;
}

5. 글자를 단어단위로 끊기
word-break: keep-all;

 

6. 대문자,소문자로 만들기

text-transform:
capitalize(첫번째 글자를 대문자)
uppercase(모든 글자를 대문자)
lowercase(모든 글자를 소문자)

7. 삼각형만들기
border-style: solid;
border-width: 5px;
border-color: transparent transparent #e60000 transparent;

 

8. 태그의 순서
div span:last-of-type

9. 블러처리
-webkit-backdrop-filter: saturate(180%) blur(5px);
    backdrop-filter: saturate(180%) blur(5px);

10. 프로필에 이미지 가운데로
object-fit: cover;

width:100%;

height:100%

11. 한줄 이상은 ... 처리
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;

12. 4줄이상은 ...처리
overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    white-space: normal;
    height: 4.8em;