위의 사진과 같은 텍스트를 컷아웃(Cut out) 텍스트라고 합니다. CSS로 위와 같은 효과를 만드는 방법을 알아보겠습니다. .cut-out-text { mix-blend-mode: screen; } 가장 중요한건 mix-blend-mode: screen; 입니다. 텍스트에 배경을 믹스할 때 이러한 속성을 사용합니다. screen은 이미지 합성 방식입니다. 포토샵을 잘 다루고 익숙하신 분들은 아시겠지만, 속성이 많습니다. 이 부분은 차후 다루겠습니다. 그라디언트 배경 See the Pen Cut Out Text by wooncloud (@wooncloud) on CodePen. 사진 배경 See the Pen Cut Out Text2 by wooncloud (@wooncloud) on CodePen.

개요 이번 CSS 코드는 이렇게 카드에 배경화면을 넣고 linear-gradient를 넣어 페이드 효과를 주는 방법입니다. background shortcut을 사용하여 1. 그라디언트 2. 이미지 url 순서로 넣어서 효과를 완성할 수 있습니다. .card-fade-bg-right { background: linear-gradient(to right, #000F, #0000), url('image url'); } .card-fade-bg-left { background: linear-gradient(to left, #000F, #0000), url('image url'); } .card-fade-bg-top { background: linear-gradient(to top, #000F, #0000), ..

See the Pen long text fade out by wooncloud (@wooncloud) on CodePen.

코드를 예쁘게 이미지로 만들어주는 툴 - carbon.now.sh — Wooncloud Blog (tistory.com) 코드를 예쁘게 이미지로 만들어주는 툴 - carbon.now.sh 제가 여러분께 보여드릴 코드가 있습니다. 아래에 그 코드를 공유하니 한번 봐주시기 바랍니다. const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj) const compose = (...fns) => res => fns.re wooncloud.tistory.com 예전에 위의 링크와 같은 내용으로 포스트를 쓴 적이 있었습니다. 그런데 carbon 사이트보다 좀 더 예쁘고 유용한 사이트들이 많아서, 이번에 코드를 이미지화 해..

정규식을 이용한 공격 ReDos ReDOS는 정규표현식을 사용자로부터 입력받았을 때 발생할 수 있는 보안 문제입니다. 특정 정규식 패턴은 입력값을 평가하는데 오래 걸립니다. ReDos는 이를 이용해 정규식 평가에 오랜 시간이 걸리게 하는 알고리즘 복잡성 공격입니다. 타깃이 되는 정규식 로직은 자체적으로 반복되는 그룹이 주원인이며, 이 정규식에 어느 정도 만족하는 대량의 문자 등을 입력하여 가용성이 떨어지게 만듭니다. ReDos 원인은 정규식을 평가하는 엔진이 Backtracking을 사용하는 엔진이라면 발생합니다. 주로 NFA (Nondeterministic Finite Automaton) 엔진이 그 원인입니다. NFA 방식은 JAVA, javascript, .NET, PHP, Perl, Python, ..

정말로 간단하고 예쁘게 자신이 만든 웹에 크리스마스를 맞이하여 눈을 내리게 해봅시다. https://embed.im/snow/ 위의 링크에 들어가면 확인할 수 있습니다. 방법은 정말 간단합니다. 위의 스크린샷에서 보시다시피 아래와 script를 추가하면 됩니다. See the Pen Snow (Pure CSS) by alphardex (@alphardex) on CodePen.

개요 Excalidraw는 손으로 그린듯한 러프한 다이어그램을 그리는 툴입니다. 이번에 추천하는 프로그램은 정말 정말 추천하는 프로그램 중 하나입니다. 많은 사람들이 PPT로 순서도를 그리죠. 하지만 PPT는 순서도를 그리는데 최적화되지 않기 때문에, 사용성에 불편함이 많이 있습니다. Excalidraw는 이런 순서도를 쉽게 그릴 수 있게 최적화되어 있습니다. 그리고 프로그램이 가볍고 브라우저 환경에서 사용합니다. 가장 좋은 기능은, 공유 세션을 만들어서 다른 사람을 초대해 함께 협업할 수 있는 것이 큰 장점입니다. https://excalidraw.com/ Excalidraw — Collaborative whiteboarding made easy Excalidraw is a virtual collabo..

제가 여러분께 보여드릴 코드가 있습니다. 아래에 그 코드를 공유하니 한번 봐주시기 바랍니다. const pluckDeep = key => obj => key.split('.').reduce((accum, key) => accum[key], obj) const compose = (...fns) => res => fns.reduce((accum, next) => next(accum), res) const unfold = (f, seed) => { const go = (f, seed, acc) => { const res = f(seed) return res ? go(f, res[1], acc.concat([res[0]])) : acc } return go(f, seed, []) } 블로그에 이렇게 코드를 공유..

https://www.thunderclient.com/ Thunder Client - Rest API Client Extension for VS Code Thunder Client is a hand-crafted lightweight Rest API Client extension for Visual Studio Code www.thunderclient.com 비주얼 스튜디오 코드를 사용한다면 Postman을 또 설치할 필요 없이 Rest API를 테스트할 수 있습니다. 사용 화면 Thunder Client의 전반적인 모습입니다. 만든 테스트를 저장하고 불러올 수 있고, 테스트에 필요한 여러 가지 필수 기능들이 있습니다. UI와 디자인이 심플하고 VS Code에 맞춤이라 어려워 보이지 않고 거부감이 없습니..