Issue No. 20210418

개발·디자인

BBC 인터랙티브 페이지 “코로나19가 바꿀 사무실의 미래” 클론

코로나19 시대, 제주 사는 개발자의 하루 이 페이지는 BBC 비주얼저널리즘 팀에서 제작한 ‘재택근무의 일상화’… 코로나19가 바꿀 사무실의 미래 페이지를 비슷하게 구현해 본 개발 예제입니다. 시각적 기능만 비슷하게 만들어 본 것이므로,…

Canvas 성능 개선: off-screen Canvas 사용하기

화려한 인터랙티브 웹에 대한 수요가 많아지며 일반 HTML 요소들로는 표현이 어려운 캔버스(Canvas)의 사용이 점점 많아지고 있어요. 캔버스는 특성상 계속 반복적으로 렌더링하는 식이다보니, 아무래도 일반 웹페이지보다 기기에 부하가 많이 걸리죠~그래서 캔버스를…

공유한 링크의 썸네일과 텍스트 표시: 오픈 그래프

요즘 대부분의 서비스들은 외부 링크를 공유했을 때 아래 그림과 같이 링크에 있는 콘텐츠의 이미지와 제목, 요약글을 표시해 줍니다. 무조건 자동으로 되는건 아니고요, 해당 웹페이지에서 오픈 그래프(Open Graph)라는 메타 정보를 적절한…

반응형 웹, min-width와 max-width 중 어떤 것을 사용하는게 좋을까

글을 시작하기 전에..이 질문에 대한 답은 정답이 없으며, 작업자 개개인마다 선호하는 방식이 다를 수 있습니다. 이 글 역시 제 생각을 쓴 것이니 참고 삼아 봐주세요~ 반응형 웹을 만드는 요소는 여러가지가…

CSS Flex와 Grid를 공부할 수 있는 게임들

멋쟁이 개발자님들이 CSS Flex와 Grid를 재밌게 공부할 수 있도록 만든 게임들을 소개해 드릴게요. Flexbox FroggyCSS 코드로 개구리가 수련잎에 올라갈 수 있도록 돕기https://flexboxfroggy.com/#ko해설 라이브 영상 https://youtu.be/IbTLHILrLn0 Grid GardenCSS 코드로 당근밭 가꾸기https://cssgridgarden.com/#ko해설…

워드프레스 플러그인 설치 시 key 파일로 인증하기

요청한 작업을 수행하려면, 워드프레스는 웹 서버에 접속해야 합니다. 계속 진행하기 위해 FTP 증명서를 입력하세요. 증명서가 기억나지 않는다면 웹 호스트에게 연락하세요. 워드프레스 웹사이트를 가상서버호스팅(VPS)에서 운영하다보면 플러그인을 설치할 때 해당 폴더에 대한…

크롬에서 더 이상 ‘유저 에이전트 스트링’을 안 쓴다는데..

얼마 전 지디넷에서 이런 기사를 봤어요. 유저 에이전트 스트링(User Agent String)은 주로 우리 웹사이트에 접속한 사용자의 환경, 그러니까 운영체제가 뭔지, 사용하는 브라우저는 뭔지 등의 정보를 담고 있는 문자열입니다. 이걸 이용해서…