홈으로
Issue No. 20240420

개발·디자인

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

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

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

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

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

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

프리랜서 일감 구하기 서비스들

프리랜서 또는 예비 프리랜서 여러분들을 위해 외주 일감을 구할 수 있는 웹사이트들을 모아 봤습니다.콘텐츠는 계속 업데이트 할 예정입니다. 국내 서비스 (크몽같은 재능마켓은 제외하고, 프로젝트-프리랜서 매칭 서비스 위주로 소개) 위시켓https://www.wishket.com/ 디자인그룹나인http://designnine.co.kr/…

반응형 웹, 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해설…

새 강의 출시 – CSS Flex & Grid 제대로 익히기

안녕하세요!웹퍼블리셔/프론트엔드개발자/코딩하는디자이너들을 위한.. 그 외에도 앞으로 계속 CSS 코딩을 해나가실 분들을 위한 새 강의를 출시했습니다. 앞으로 CSS 레이아웃의 표준이자 기반이 될 Flex와 Grid를 핵심개념과 함께 여러가지 예제를 통해 실무 활용까지 익힐…

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

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

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

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

웹사이트 개편

이전 스튜디오밀 웹사이트가 “1분코딩”으로 새로 출발합니다. 이전 웹사이트와 달리 디자인/개발/IT 관련 콘텐츠/미디어 웹사이트로 운영할 예정이에요. 페이스북 1분코딩을 팔로우 해두시면 콘텐츠 업데이트 소식을 빠르게 받아보실 수 있습니다. 얘는 1분코딩의 “일분이”에요 고맙습니다!…