Buy Me a Coffee
CSS Transition과 Animation, 그리고 CSS Animation을 기반으로 한 Web Animation API의 기본적인 내용들을 정리해 봅니다. 스크롤 압박이 있지만, 1분 내외의 영상들로 짤막하게 구성해서 보시는 데에 큰 부담은 안가지셔도 될 거예요.…
1월에 유튜브에 올렸던 영상인데, 글이 조금 늦었네요~Canvas를 이용해 드라마 경이로운 소문의 융의 땅을 만들어 봅니다. 융의 땅이 뭔지 모르셔도 그냥 저런 빛 움직임을 만드는 강의라고 생각하고 보시면 됩니다. 외부 라이브러리를…
코로나19 시대, 제주 사는 개발자의 하루 이 페이지는 BBC 비주얼저널리즘 팀에서 제작한 ‘재택근무의 일상화’… 코로나19가 바꿀 사무실의 미래 페이지를 비슷하게 구현해 본 개발 예제입니다. 시각적 기능만 비슷하게 만들어 본 것이므로,…
화려한 인터랙티브 웹에 대한 수요가 많아지며 일반 HTML 요소들로는 표현이 어려운 캔버스(Canvas)의 사용이 점점 많아지고 있어요. 캔버스는 특성상 계속 반복적으로 렌더링하는 식이다보니, 아무래도 일반 웹페이지보다 기기에 부하가 많이 걸리죠~그래서 캔버스를…
요즘 대부분의 서비스들은 외부 링크를 공유했을 때 아래 그림과 같이 링크에 있는 콘텐츠의 이미지와 제목, 요약글을 표시해 줍니다. 무조건 자동으로 되는건 아니고요, 해당 웹페이지에서 오픈 그래프(Open Graph)라는 메타 정보를 적절한…
모바일 트래픽이 데스크탑을 앞지른 시대인 요즘은, 모바일이나 데스크탑 어디에서도 콘텐츠가 무리 없이 보이도록 대부분의 웹페이지들이 반응형으로 제작됩니다. 반응형 페이지를 만들 때 폰을 세로로 들고 있느냐 가로로 들고 있느냐를 판별하고, 그에…
요즘 운영체제들은 대부분 라이트 모드/다크 모드를 지원하죠?CSS 미디어 쿼리에서도 자동으로 라이트 모드와 다크 모드를 인식하고 그에 맞는 CSS를 적용할 수 있는 속성이 있습니다. 바로 prefers-color-scheme! See the Pen CSS) Detect…
프리랜서 또는 예비 프리랜서 여러분들을 위해 외주 일감을 구할 수 있는 웹사이트들을 모아 봤습니다.콘텐츠는 계속 업데이트 할 예정입니다. 국내 서비스 (크몽같은 재능마켓은 제외하고, 프로젝트-프리랜서 매칭 서비스 위주로 소개) 위시켓https://www.wishket.com/ 디자인그룹나인http://designnine.co.kr/…
글을 시작하기 전에..이 질문에 대한 답은 정답이 없으며, 작업자 개개인마다 선호하는 방식이 다를 수 있습니다. 이 글 역시 제 생각을 쓴 것이니 참고 삼아 봐주세요~ 반응형 웹을 만드는 요소는 여러가지가…
당연하지만, 이 글은 제 개인적인 의견입니다.정답이 아니니 참고 정도로 보아주세요😉그치만, 제 개인적 경험으로는 확실한 방법이라고 장담합니다. 결론부터 이야기하면, 바로 코딩을 배우는 것 입니다.여기서 말하는 코딩은 주로 웹 페이지 시각 구현의…
Oh! 감탄사가 나오는 역동적인 인터랙티브 웹사이트 만들기 온라인 강좌 시리즈. 수강평을 확인해보세요 :)