뫙뭉

웹사이트나 애플리케이션에서 로딩 중인 페이지를 효과적으로 보여주는 방법 중 하나가 **스켈레톤 로딩(Skeleton Loading)**입니다. 스켈레톤 로딩은 실제 콘텐츠가 표시되기 전에, 콘텐츠가 배치될 위치에 미리 회색이나 반투명한 블록을 띄워 보여주는 방식으로, 사용자는 로딩을 기다리면서도 화면 구성을 미리 파악할 수 있습니다. 이번 글에서는 스켈레톤 로딩 애니메이션이 무엇인지, 그리고 CSS를 활용해 간단하게 구현하는 방법을 단계별로 설명해 보겠습니다. 스켈레톤 로딩이란? 스켈레톤 로딩은 웹이나 모바일 앱에서 콘텐츠가 로드될 위치에 기본적인 블록 형태를 미리 보여주는 방법입니다. 사용자는 콘텐츠가 나타날 위치를 미리 시각적으로 인지할 수 있기 때문에 로딩을 기다리는 동안의 불편함이 줄어들고, UX..

단 몇 줄의 코드로 색다른 효과를 낼 수 있다! 오늘도 코드가 원하는대로 짜지지 않아 김빠짐을 경험하여 유튜브와 코드팬속에서 헤엄치던 중...역시나 사이트에 재미를 선사하는 요소로 hover effect를 빼놓을 수 없지 않을까 라는 생각을 했다.그리고 조금은 색다른 효과를 내보는 것도 재밌겠다 싶어오늘은 단순히 색만 바뀌는 것이 아닌 빛번짐 효과로 좀 더 화하고 쨍한 느낌의 효과를 내는 법에 대해서 소개해보려한다. 굉장히 간단하니 겁내지 마시라!! 내가 직접 구현해 본 Hover effecthttps://codepen.io/swpark907/pen/qBVNqYg Light bleed hover effect(Pure CSS)Light bleed hover effect(Pure CSS)...codepen...

이전 포스트에서 열심히 '한글자씩 나타나는 애니메이션'에 대해 만들었다.그런데 문제가 하나 있다.해당 요소는 저~~~기 밑에 있는데 사이트가 렌더링이 되자마자 애니메이션이 발동된다면 여태 힘들게 애니메이션을 만든 의미가 없지 않은가!! 요소가 화면 안에 들어왔을 때 애니메이션이 발동되어야 된다 이말이다. 그래야 내가 열심히 만든 애니메이션을 자랑할 수가 있다. 그렇기 때문에 오늘은!! 요소가 화면에 보일 때 애니메이션이 작동하도록 하는 방법에 대해 블로깅하려 한다. 화면의 위치와 요소의 위치우선 화면의 상단의 위치를 알아야겠지. 이것은 간단하다.window.pageYoffset;window.scrollY;방법은 위의 두가지가 있는데 둘의 차이가 무엇이냐.window.scrollY 는 구형 브라우저에서 작..

웹사이트에 심심함을 덜어줄 무언가가 필요하다!! 얼마전에 포트폴리오를 재정비할 계획이 있었다.사실 신입 포트폴리오, 심지어 비전공자라 하면 쓸 말이 많지가 않더라. 나만 그런것인가...그렇다면 뭔가 심심하지 않은 애니메이션으로 시각적 즐거움을 채우면 좋지 않을까 라는 생각이 자연스럽게 들게된다.뭔가 샤랄라~ 하는 느낌으로 한글자씩 나타나는 애니메이션을 넣으면 좋겠다라는 생각에 일단 코드를 생각나는대로 끄적여 보았다. 참고로 이와 함께 샤랄라~~ 하는 느낌이 화면에 나타나는 순간에 발동되길 바란다면, 관련 글이 있으니 참고하면 좋을 것 같다. (물론 내가 작성한 글이다 ㅎㅎ)2022.01.24 - [개발자일기/Tutorial] - 화면에 나타나면 애니메이션이 작동되게 하라!(CSS, VanilaJS) 생각..

예전부터 즐겨보던 유튜브 채널인 Online Tutorial 에 흥미로운 영상이 올라왔다. 원본영상: https://www.youtube.com/watch?v=ShPPkZEeLPo&t=662s Circular Navigation, 활성화 되면 원형으로 메뉴가 펼쳐지는 메뉴 네비게이션! 다른 프로젝트를 진행하며 막힘의 연속에 지쳐가고 있을 때 머리도 식힐겸 가볍게 만들어 볼 것이 생겨 신이 났던 것 같다. 사실 영상을 보며 따라서 코드만 배껴 쓰면 만들어지는 기능이지만 그렇게 하면 당연히 의미가 없으니 영상은 아이디어를 얻는 소스일 뿐! 시연 영상만 보고 처음부터 혼자 만들어 보려고 노력하였다. 사용 기술은 HTML, CSS, VanilaJS이다. 디자인 요소가 강조된 튜토리얼이다보니 JS는 active ..