# CSS Tips

> Clean Markdown view of GeekNews topic #4148. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=4148](https://news.hada.io/topic?id=4148)
- GeekNews Markdown: [https://news.hada.io/topic/4148.md](https://news.hada.io/topic/4148.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2021-04-28T09:08:56+09:00
- Updated: 2021-04-28T09:08:56+09:00
- Original source: [markodenic.com](https://markodenic.com/css-tips/)
- Points: 21
- Comments: 2

## Topic Body

다른 튜토리얼에서 잘 보지 못한 팁들 모음

- 타이핑(깜박이는 커서) 효과

- Drop-Shadow(); 필터

- scroll-behavior: smooth; 부드러운 스크롤

- 센터 정렬하기

- 이미지/이모지 커서

- Truncate Text

- -webkit-line-clamp : 특정 줄수로 텍스트 자르기

- ::selection

- resize:both; 모든걸 사이즈 조절 가능하게

- :target 으로 Modal 만들기

- calc()

- :empty 셀렉터

- 커스텀 스크롤바

- position: sticky;

- CSS 스크롤 스냅

- attr() 을 이용한 다이나믹 툴팁

- caret-color 로 커서 색상 변경

- ::in-range , ::out-of-range

- background-clip 으로 멋진 배경의 헤드라인 글자 만들기

## Comments



### Comment 5045

- Author: alstjr7375
- Created: 2021-04-30T08:37:49+09:00
- Points: 1

타이핑효과는 몰랐던 건데 유용하네요

### Comment 5016

- Author: xguru
- Created: 2021-04-28T09:11:16+09:00
- Points: 2

요즘 센터정렬은 글에선 3줄인데.. 이렇게 2줄로도 한다는 군요.

.center {

ㅤdisplay: grid;

ㅤplace-items: center;

}