Notice
Recent Posts
Recent Comments
Link
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 |
Tags
- NanoHttpd
- React
- spring boots
- 백준
- 파이썬
- 광고 id
- kotlin
- 오블완
- 티스토리챌린지
- 오퍼월
- nginx
- 개발
- nuxt
- toml
- it
- EC2
- AWS
- react-native
- Jenkins
- chrome
- python
- Express
- 코딩테스트
- 코테
- Next
- JavaScript
- docker
- css
- TypeScript
- Android
Archives
- Today
- Total
내맘대로 개발일지
[CSS] 이미지 모자이크( blur ) 하는 방법 본문

😢 내가 겪은 문제
이미지를 모자이크 처리하는 경우가 생각보다 많았다.
미리보기를 생성하거나, 로딩바를 생성했을 경우 또는 데이터 시각화를 통해 집중시키는 효과를 보고 싶을 때 사용하였다.
bulr 라는 단어는 생각이 나는데 잘 기억이 안나는 경우가 많아서 다른 사람들도 그렇지 않을까 싶어서 기록해둔다.
실제로 나는 잘 기억이 안나서 자꾸 검색해보게 되더라 ^^
filter: blur(5px);
-webkit-filter: blur(5px);
5px 만큼 모자이크 처리를 하는건데, 생각보다 5px 만큼만 해도 적당하니, 잘 조절해서 사용하면 될 것같다.
-webkit-filter 같은 경우에는 WebKit 기반 브라우저(예: 사파리)에 대응하기 위해 같이 사용해주는게 좋다.
'CSS' 카테고리의 다른 글
| [CSS] Text 가로세로 가운데정렬 (0) | 2023.09.19 |
|---|---|
| [CSS] 이미지 정사각형 유지하는 방법 (0) | 2023.08.23 |
| [CSS] 이미지 세로 중앙(수직) 정렬 하는 방법 (0) | 2023.08.21 |
| [CSS] @media 사용하는 방법 (0) | 2023.08.17 |
| [CSS] 높이 100% 하는 방법 (0) | 2023.08.17 |