강상원의 IT 블로그

본문 바로가기

Contents

Recent Posts

Trending Posts

Web (HTML, CSS) 스크롤에 따라 애니메이션 효과 적용해주는 간단 라이브러리: AOS 1. AOS(Animate On Scroll) 라이브러리 소개 가끔 웹서핑을 하다 보면 스크롤 위치에 따라 글자, 사진 등의 컨텐츠가 나타나는 효과가 적용된 사이트를 볼 수 있다. 스크롤을 했을 때 요소에 나타나기 애니메이션 효과를 구현해주는 라이브러리를 소개하고자 한다. 바로 AOS(Animate On Scroll Library)이다. 간단한 적용 예시와 설명은 라이브러리 홈페이지에서도 확인할 수 있다. https://michalsnik.github.io/aos/ AOS - Animate on scroll library AOS Animate On Scroll Library Scroll down michalsnik.github.io 2. 준비 과정 혹 JavaScript를 다루는 방법을 모르더라도, 태그..
Web (HTML, CSS) Neumorphism (뉴모피즘) CSS로 만들기 1. 뉴모피즘 소개 디자인 커뮤니티인 Dribble에 한 디자이너가 새로운 형태의 UI 디자인을 올렸고, 이것이 큰 호응을 얻으면서 뉴모피즘은 2020년도에 주목받는 UI 트렌드 중 하나가 되었다. (New + Skeuomorphism = Neumorphism) 이를 웹사이트에 적용하기 위한 효과적이면서도 간단한 방법을 찾다 보니 box-shadow 속성을 이용하면 비교적 쉽게 구현 가능하다는 사실을 알게 되었다. 1-1. Neumorphism.io 사용 우선 슬라이더로 다양한 옵션을 조절해 복사 -붙여넣기 가능한 CSS 코드를 만들어주는 서비스인 Neumorphism.io를 소개하고자 한다. 이를 이용하면 손쉽게 원하는 뉴모피즘 효과에 해당하는 코드를 얻을 수 있다. Neumorphism/Soft UI..
Web (React, Django) React JS API Key(키) 숨기기 1. 문제 인식 앞선 포스트에서 create-react-app으로 미세먼지 정보 OpenAPI를 받아오는 React Application을 제작하는 과정을 소개했었다. 이러한 API에서 데이터를 받아오는 기능을 구현하는 React Application을 제작할 때는 API Key가 노출되지 않도록 하는 것이 중요하다. GitHub public repository에 올리거나 배포할 경우 API Key가 다른 사용자에 의해 악용될 우려가 있기 때문이다. 실제로 필자도 아무 생각 없이 GitHub Public Repositiry에 API Key가 포함된 코드를 올렸다가 바로 이런 이메일을 받았다. GitGuardian은 GitHub에서 다체적으로 운영하는 서비스도 아니고 가입한 적도 없는데.. 뭐지 GItHu..

티스토리툴바