인터렉티브 모션과 자바스크립트를 공부하고 있는 웹 퍼블리셔에요 :-9

Study/Design

UI Design in Photoshop 19.11.23 https://www.youtube.com/watch?v=32u6z5NM0vM&t=28s 더보기 --- - 펜툴(P)을 쓸 때 패스 대신 모양으로 설정하면 해당 패스대로 모양을 만들 수 있다. - 이렇게 만들어진 패스는 패스 선택 도구(A)로 모양을 바로 바꿀 수 있어서 편하다. - 도형을 그릴 땐 왠만하면 모양(U)으로 그리기! 실시간 속성 변경도 된다. ---

2019. 11. 24.

Study/JavaScript

zerocho님의 글을 보고 따라 만들어본 Text RPG 스크립트입니다 :> 이런저런 기능을 쉽게 추가할 수 있을 거라 생각했는데 예상보다 시간이 더 걸림ㅋㅋㅋㅋ 그래도 게임은 게임인지라 재미있었던 작업이었어요!! 못 넣은 기능도 많고 리팩토링은 하지도 못했지만ㅋㅋㅋㅋ (밸런스는 엉망이고 버그는 고이 접어 나빌레라) 일단 직접 짜봤다는 거에 만족하며 일단락! Codepen 링크 See the Pen Text RPG (19.11.12) by NY KIM (@nykim_) on CodePen. var makeMonster = function (lv) { var lv = lv || 0; var newMonster = new Character(); var random = getRandom(0, (monster..

2019. 11. 12.

Study/Design

Flat Design Potted Plants 19.11.09 https://www.youtube.com/watch?v=pTV2n7fT4fk 더보기 --- - option을 잡고 늘리면 중앙점을 기준으로 늘릴 수 있다. - 튀어나온 부분을 잘라내고 싶다면, 기본도형과 잘라낼 도형을 모두 잡는다. Shift+M(도형 구성 도구) 을 누르고, Option을 누른 채로 튀어나온 부분을 클릭한다. 또는, Option을 누른 채 원하는 영역을 드래그 해도 된다. --- Animal Silhouette Moonlight 19.11.09 https://www.youtube.com/watch?v=RtnCn65MdN0 더보기 --- - 구름 모양을 만들 때 산포 브러쉬를 쓰면 편하다. 원형 하나를 만든 뒤 선택한 후, ..

2019. 11. 9.

Study/JavaScript

출처: https://www.zerocho.com/category/JavaScript/post/573d812680f0b9102dc370b7 프로토타입 체인을 이용하면 부모가 가진 기능에 더해 새로운 기능을 추가할 수 있습니다. SASS의 @extend와 비슷한 기능이죠. 우선 생성자 하나를 만들어봅니다. 생성자 함수는 대문자로 시작했죠? function Vehicle(name, speed){ this.name = name; this.speed = speed; } 이제 new Vehicle()을 통해 고유의 name과 speed를 갖는 객체를 만들 수 있게 됐습니다. 그런데 이 생성자 함수를 통해 만들어진 객체들에게 공통적인 기능(함수)을 추가하려고 해요. 그럴 때는 this를 쓰는 대신, prototyp..

2019. 11. 5.

Study/JavaScript

1. window 객체 window 객체가 뭐냐구요? 어... 이거 말고 이거요! window 객체는, 브라우저 전체를 담당하는 탑 오브 탑 객체를 말합니다. Document 객체 또한 window 객체 안에 들어 있습니다. 콘솔에 window. 라고만 쳐도 어마어마한 메서드 리스트가 출력되는 것이 보입니다. 진정한 대빵 객체라고 할 수 있겠네요. 이 대빵 객체를 우리는 전역객체 (글로벌객체) 라고 부릅니다. 전역객체의 특권(?)은 window를 생략하더라도 메서드를 호출할 수 있다는 거죠. 너무 유명해서 이름을 안 불러도 아는... 뭐 그런 느낌으로...? window.document === document //TRUE window 아래에는 screen, history, document, locatio..

2019. 11. 4.

Study/CSS

See the Pen Responsive Video by NY KIM (@nykim_) on CodePen. 먼저 비디오(iframe)에게 position: absolute; top: 0; left: 0; width: 100%; height: 100%;를 준다. 그리고 비디오의 바로 위 부모에게 position: relative; width: 100%; heigth: auto; padding-top: 50%를 주면 된다. Responsive Video .video { width: 100%; max-width: 900px; margin: 30px auto; border-radius: 30px; background-color: #f0f0f0; padding: 40px; box-sizing: border-bo..

2019. 10. 31.

Study/etc.

https://studio-jt.co.kr/ 디자인이 깔끔하고 예뻤던 사이트. 많이 배웠습니다! 감사함니당( ´ ▽ ` )ﾉ # 프로젝트 리스트의 이미지를 CSS background image 와 태그 두 개로 표현했다. 검색엔진 노출 때문인 것으로 추정. # 어르신 브라우저 대응을 위해 flexbox를 쓰지 않고 있었다. 연습도 할 겸 float, table 등으로 대체해서 써봤다. 써 본 결론은? 그래도 플박이 최고임. # 대부분의 이미지는 jpg로 처리한 듯 했다. 왠만하면 jpg로, 투명처리가 필요할 때만 png로 한다면 이미지 용량을 줄일 수 있을 듯. # 요기서 손이 건물 뒤로 스윽 사라지는 걸 어떻게 표현하지 고민했는데 그냥 overflow 처리했다! 애니메이션은 CSS로 적당히~ 이 영역의..

2019. 10. 31.