Buy Me a Coffee
코로나19 시대, 제주 사는 개발자의 하루 이 페이지는 BBC 비주얼저널리즘 팀에서 제작한 ‘재택근무의 일상화’… 코로나19가 바꿀 사무실의 미래 페이지를 비슷하게 구현해 본 개발 예제입니다. 시각적 기능만 비슷하게 만들어 본 것이므로,…
화려한 인터랙티브 웹에 대한 수요가 많아지며 일반 HTML 요소들로는 표현이 어려운 캔버스(Canvas)의 사용이 점점 많아지고 있어요. 캔버스는 특성상 계속 반복적으로 렌더링하는 식이다보니, 아무래도 일반 웹페이지보다 기기에 부하가 많이 걸리죠~그래서 캔버스를…
요즘 대부분의 서비스들은 외부 링크를 공유했을 때 아래 그림과 같이 링크에 있는 콘텐츠의 이미지와 제목, 요약글을 표시해 줍니다. 무조건 자동으로 되는건 아니고요, 해당 웹페이지에서 오픈 그래프(Open Graph)라는 메타 정보를 적절한…
글을 시작하기 전에..이 질문에 대한 답은 정답이 없으며, 작업자 개개인마다 선호하는 방식이 다를 수 있습니다. 이 글 역시 제 생각을 쓴 것이니 참고 삼아 봐주세요~ 반응형 웹을 만드는 요소는 여러가지가…
멋쟁이 개발자님들이 CSS Flex와 Grid를 재밌게 공부할 수 있도록 만든 게임들을 소개해 드릴게요. Flexbox FroggyCSS 코드로 개구리가 수련잎에 올라갈 수 있도록 돕기https://flexboxfroggy.com/#ko해설 라이브 영상 https://youtu.be/IbTLHILrLn0 Grid GardenCSS 코드로 당근밭 가꾸기https://cssgridgarden.com/#ko해설…
요청한 작업을 수행하려면, 워드프레스는 웹 서버에 접속해야 합니다. 계속 진행하기 위해 FTP 증명서를 입력하세요. 증명서가 기억나지 않는다면 웹 호스트에게 연락하세요. 워드프레스 웹사이트를 가상서버호스팅(VPS)에서 운영하다보면 플러그인을 설치할 때 해당 폴더에 대한…
얼마 전 지디넷에서 이런 기사를 봤어요. 유저 에이전트 스트링(User Agent String)은 주로 우리 웹사이트에 접속한 사용자의 환경, 그러니까 운영체제가 뭔지, 사용하는 브라우저는 뭔지 등의 정보를 담고 있는 문자열입니다. 이걸 이용해서…
CSS Transition과 Animation, 그리고 CSS Animation을 기반으로 한 Web Animation API의 기본적인 내용들을 정리해 봅니다. 스크롤 압박이 있지만, 1분 내외의 영상들로 짤막하게 구성해서 보시는 데에 큰 부담은 안가지셔도 될 거예요.…
1월에 유튜브에 올렸던 영상인데, 글이 조금 늦었네요~Canvas를 이용해 드라마 경이로운 소문의 융의 땅을 만들어 봅니다. 융의 땅이 뭔지 모르셔도 그냥 저런 빛 움직임을 만드는 강의라고 생각하고 보시면 됩니다. 외부 라이브러리를…
Oh! 감탄사가 나오는 역동적인 인터랙티브 웹사이트 만들기 온라인 강좌 시리즈. 수강평을 확인해보세요 :)