반응형 전체 글71 PICO-8 판타지 비디오 게임 콘솔 TO THE MOON 🌕 지인이 만든 PICO-8 판타지 비디오 게임 콘솔! 재미있는데 나는 어렵다...... 한번 해보시길~ TO THE MOON TO THE MOON 플레이! 게임 설명 총 9개의 문문을 먹고 달을 향해라! 캐릭터 소개 문서폿 문문 문 키 사용법 ↑ ← ↓ → : 방향 조절 Z: 점프 X: 부스터 게임 TIP 대각선으로 점프가 가능하다 대각선 점프와 부스터를 이용하면 쉽다고 함 나는 현재 여기서 빠져나가지 못하고 있다.................. 🥺 반응 좋으면 만든이가 더 많은 맵은 제공해줄 수도 있으니까 많이많이 알려졌으면 좋겠다 🎉 스코어 확인하기 2021. 3. 11. 노션 디데이 함수 추가(Notion D-day Formula) 노션에서 디데이 기능을 추가하고 싶어서 구글링해보니 역시 나와 같은 생각을 가진 사람들이 이미 있었다 👏 그래서 노션에서 디데이를 어떻게 추가하는지에 대해 가져와 봄~ 디데이를 적용하기 전에는 우선 이렇게 완료일을 노출시켰음 그랬더니 완료일까지 몇일이 남았는지 직관적으로 인지하지 못함 역시 이럴 때는 디데이가 최고지!! 그래서 구글링해서 노션 디데이 설정하는 방법을 찾았다 ✨ 노션 페이지에서 프로퍼티를 추가한다 이때 프로퍼티 속성은 Formula로 타입을 설정한다 디데이를 설정하기 전에 디데이를 설정할 날짜 프로퍼티도 추가해야 함 나는 이렇게 완료일이라는 프로퍼티를 추가해서 디데일 기준일로 설정할 수 있도록 만들었다 디데일 기준일을 추가해주고 나서 이제 디데이 설정하기! Formu.. 2021. 3. 8. 기획자, 디자이너, 개발자 협업은 어떻게 해야하나? 개발 언어 등 실무적인 기술 공부도 중요하지만 요즘 드는 생각은 업무 방식에 대해서도 공부(?)를 해야할 것 같다는 생각이 든다 그래서 제일 먼저 고민해본 주제는 협업이다 표준국어대사전에서 정의하는 협업이란 이러하다 협업 協業 1. 명사 | 경제 | 많은 노동자들이 협력하여 계획적으로 노동하는 일. 2. 명사 | 경제 | 생산의 모든 과정을 여러 전문적인 부문으로 나누어 여러 사람이 분담하여 일을 완성하는 노동 형태. 반의어: 분업 우리는 하나의 목표를 가지고 각자 본인 포지션에 맞게 일을 한다 쉽게 말하면 기획자는 기획을 하고 디자이너는 디자인을 하고 개발자는 개발을 한다는 말이다 하지만 하나의 업무에 대해 기획자와 디자이너 그리고 개발자는 각각 사고방식의 차이가 있다 그래서 하나의 업무를 같이 하는데.. 2021. 3. 4. Apollo 튜토리얼 - 데이터 소스에 연결하기 튜토리얼 보러가기 데이터 소스는 스키마 필드를 채우는 데 사용하는 데이터를 보유하는 모든 데이터베이스, 서비스 또는 API이다 GraphQL API는 모든 데이터 소스 조합과 상호 작용할 수 있다 REST API 연결하기 [ src/datasources/launch.js 파일에 아래 코드 붙여 넣기 ] const { RESTDataSource } = require('apollo-datasource-rest'); class LaunchAPI extends RESTDataSource { constructor() { super(); this.baseURL = 'https://api.spacexdata.com/v2/'; } } module.exports = LaunchAPI; 데이터 가져오기 방법 작성하기 1... 2021. 2. 8. Apollo 튜토리얼 - 스키마 만들기 Apollo로 풀 스택 앱을 빌드하는 방법을 알아보기 위해 튜토리얼을 따라 해보자! 튜토리얼을 통해 만들어 볼 앱은 SpaceX 출시에 대한 좌석을 예약하기위한 대화 형 앱이라고 한다 우주 여행을 위한 Airbnb라고 생각하고 만들기~ 여기서 사용되는 모든 데이터는 SpaceX-API로 실제 데이터라고 함!! 무튼 이제 튜토리얼 보고 따라하기 시작~ 🚀 튜토리얼 보러가기 예제 앱 클론하기 $ git clone https://github.com/apollographql/fullstack-tutorial.git 기능을 구축하기 위해 스키마를 우선 만든다 스키마는 필요한 데이터를 기능에 따라 서버에 어떻게 요청할지에 대한 정보를 담는다 Apollo 서버 설정하기 [ start/server 디렉토리에 아폴로 서.. 2021. 2. 4. modal과 popup 차이 프론트엔드 작업을 하다보면 'modal로 만들어 주세요~'와 'popup으로 만들어 주세요~'라는 요청이 들어온다 이때 modal과 popup 무슨 차이가 있지? 하는 생각에 찾아봤던 글들을 정리해 봄! 모달(MODAL) 이란 사용자의 이목을 끌기 위해 사용하는 화면 전환 기법이지만 화면을 전환한다기 보다는 이목을 집중해야 하는 화면을 다른 화면 위로 띄워 표현하는 방식이다 모달은 내비게이션 인터페이스와는 달리 정보의 흐름을 가지고 화면을 이동한다기 보다는 꼭 이목을 끌어야하는 화면에서 사용된다 그래서 모달로 보이는 화면은 되도록 단순하고 사용자가 빠르게 처리할 수 있는 내용을 표현하는 것이 좋다 팝업(POPUP)이란 과거 ‘팝업(Popup)’은 작은 새로운 윈도우를 띄우는 기능을 말했다 사이트 접속 직.. 2021. 2. 3. 어도비 너무 비싸? Adobe 모든 플랜 저렴하게 싸게 구매하는 법! 브라우저에 SVG를 이용하여 그려보기에 도전하려 했으나 백터 그래픽을 구현하기 위해서는 Adobe illustrator가 필요하다고.... 어차피 나중에 구매해서 이용하려던 거였으니 이참에 구매하자고 마음을 먹었다 그런데 어도비... 뭐 이리 비싸니....? 😭 그리하여 저렴하게 Adobe 모든 플랜을 구매하는 법을 찾았다!! 어도비 사이트 바로가기 먼저 어도비 플랜을 살펴보자! 개인 / 기업 / 학생 및 교사 / 초중고등학교 및 대학교 이렇게 4가지의 플랜이 있다 이 중에서 보통은 개인 플랜으로 구매하는데 가격이.... 62,000원...😱 꽤 비싼 금액 때문에 내가 필요한 앱만 골라 구매해서 이용하기에는 모든 앱을 구매하는 것이 더 효율적이라 생각한다 그치만 69,000원은 너무 비싸다는 거... 개.. 2021. 2. 1. 반응형에서 이미지 비율 유지하기 반응형에서 이미지를 넣었을 때 이미지 비율 그대로 유지되는 방법을 끄적여봄~ 이미지 그대로의 비율 유지하기 [HTML] [css].image-wrapper { width: 100%;}.image { max-width: 100%; height: auto;} 가로 세로 비율 유지하기 [HTML] [css].image-wrapper { position: relative; width: 100%; height: 0; padding-bottom: 56.26%; overflow: hidden; } .image-wrapper .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 여기서 . image-wrapper의 padding-botto.. 2021. 1. 16. 크롬 확장프로그램 headingsMap으로 페이지의 헤딩 구조를 확인해보자! 크롬에는 다양한 확장 프로그램이 있다 저번에 넷플릭스에서 사용하면 유용한 크롬 확장 프로그램을 소개했었는데 이번에는 웹페이지를 제작할 때 사용하면 유용한 크롬 확장프로그램 중 하나를 소개하려 한다 웹 페이지를 제작할 때는 페이지의 헤딩 구조를 잘 짜는 것도 중요하다 페이지를 만든 후에 페이지의 헤딩 구조를 맞게 짰는지 일일히 확인하는 것도 일이 된다 그럴 때 크롬 확장프로그램 headingsMap을 사용하면 완전 꿀!!!(나는 이미 설치해서 삭제 버튼이 노출되고 있음) 크롬 확장프로그램 headingsMap 설치하기 headingsMap을 설치하고 헤딩 구조를 확인를 페이지를 띄운다 나는 예시로 네이버를 띄운 후에 headingMap을 실행시킴 그러면 좌측에 크롬 확장 프로그램 HeadingMap이 뜨면.. 2021. 1. 12. 이전 1 2 3 4 5 6 7 8 다음 반응형
