분류 전체보기
-
CSS Transform 알아보기(1) - 기본개념백수의 개발/웹 2020. 4. 6. 19:01
CSS Transform 개념 알아보기 웹 페이지를 보다보면 마우스를 올리거나, 클릭하거나, 스크롤을 움직이다 보면 페이지 내 요소들이 스르륵~ 샤라락~ 휘리릭~ 하는 모습들을 볼 수 있다. 그런 효과들의 대다수에는 transform 속성이 숨어있다.(모든 것이 그렇지는 않지만... transform + transition를 활용한다.) 그렇다면 오늘 CSS의 속성 중 하나인 Transform에 대해 알아보자. Transform은 말 그대로 변환이다. 우리는 특정 도형(엘리먼트)를 원하는 모양으로 변형시키기 이 transform을 사용한다. 이 transform을 통해 위와 같은 직사각형 도형의 위치를 이동시키거나, 회전시키거나, 비틀거나, 원근법 등 다양한 효과를 줄 수 있다. transform은 크게..
-
CSS 애니메이션 모음 AniCollection백수의 개발/개발을 하면서... 2020. 4. 5. 15:15
CSS 애니메이션 모음 AniCollection 오늘은 CSS를 통해 다양한 효과를 줄 수 있는 오픈소스 AniCollection에 대해 알아보자. 요즘에는 예전처럼 완전 정적인 페이지보다는 조금 더 인터렉티브하고 역동적인 페이지들을 많이 볼 수 있다. 어떤 부분을 클릭하거나, 마우스를 올리거나, 페이지가 로딩될 때 등 다양한 움직임들이 있다. 예전에는 이러한 움직임들을 구현하기 위해서는 Javascript를 통해 하나하나 움직임을 조종?했다면 이제는 CSS만으로도 충분히 가능하다. CSS를 통해 다양한 동적인 움직임을 구현하는 것이 처음에는 그렇게 쉽지만은 않을 것이다. 그래서 AniCollection이라는 오픈소스를 보며 실제로 적용해보고 분석해보며 적용해보자. AniCollection은 여기서 살펴..
-
Github 폴더 편하게 보기 Octotree백수의 일상 & 잡담 2020. 3. 31. 20:36
Github 폴더 편하게 보기 Octotree 오늘은 개발자라면 꼭 알아야하는 사이트 중 하나인 Github에서 Clone 받지 않고도 폴더들을 편하게 찾아볼 수 있게 도와주는 Octotree에 대해 소개하려한다. Github에는 다양한 오픈소스들이 있고, 많은 개발자들이 Github를 통해 프로젝트를 관리한다. 그래서 많은 개발자들이 Github를 많이 사용할 것이다. 나 또한 Github를 많이 사용한다. 이런 Github의 최대 단점이라고 한다면 개인적으로 프로젝트를 둘러보는게 너무 힘들다는 것이다. 간단하게 여러가지 코드들을 살펴보고 싶어도 중첩 된 폴더에 한단계씩 페이지를 로딩하며 들어가는게 여간 귀찮은게 아니다. 그래서 프로젝트를 보기 위해 항상 프로젝트를 다운로드 받거나 클론하여 봤었다. 그..
-
웹 동영상 / 넷플릭스 배속하기 Video Speed Controller백수의 일상 & 잡담 2020. 3. 25. 20:12
웹 동영상 / 넷플릭스 배속하기 Video Speed Controller 오늘은 웹에서 동영상 배속을 할 수 있는 동영상 배속 도구 Video Speed Controller에 대해 소개해보려한다. 빨리빨리의 나라에 살면서 기본 속도의 재생이 굉장히 힘들게 느껴졌을 사람들이 있을 것이라 생각한다. 유튜브는 기본적으로 배속을 제공해주긴 하는데... 선택할 수 있는 배속이 별로 없네... 넷플릭스는 배속을 제공해주지 않네... 기본 재생 속도의 답답함을 풀기위해 찾은 것이 바로 Video Speed Controller이다. 크롬 확장 프로그램으로 여기서 다운받을 수 있다. 일반적으로 우리가 가장 많이 보는 영상이라면 당연 유튜브일 것이다. 유튜브는 아래 사진처럼 기본적으로 배속을 할 수 있는 기능을 제공해준다..
-
웹 페이지 캡처하기 Full Page Screen Capture백수의 일상 & 잡담 2020. 3. 24. 22:43
웹 페이지 캡처하기 Full Page Screen Capture 오늘은 웹 페이지 캡처 도구 Full Page Screen Capture에 대해 소개하려고 한다. 한번씩 웹 페이지 관련해서 어떤 글을 작성하거나 보여주고자 하는 경우가 한번씩은 있을 것이다. 그럴 때 항상 윈도우의 캡처도구나 맥의 기본 캡처 기능들을 사용해왔다. 그런데 하나 문제가 있었던 것이 웹 페이지 캡처를 할 때 스크롤로 가려진 부분을 한번에 캡처하기가 힘들었다. 그럴때면 항상 웹 페이지를 축소시켜서 캡처하곤 했다. 그러다 보면 너무 작아져 잘 보이지도 않고 축소하는데 한계도 있어 꽤나 불편했다. 그래서 찾은게 바로 Full Page Screen Capture이다. 이것도 크롬 확장 프로그램으로 여기서 설치할 수 있다. 한번 이 프로..
-
웹 색상 추출기 ColorPick Eyedropper백수의 일상 & 잡담 2020. 3. 23. 21:13
웹 색상 추출기 ColorPick Eyedropper 오늘은 웹 색상 추출기 ColorPick Eyedropper에 대해 소개하려고 한다. 보통 개발을 하거나 디자인을 할 때 특정 색상값을 얻고자 하는 경우가 더러 있다. 나는 보통 개발을 주로 하다보니까 포토샵을 다루거나 하지 않으니 그림판이나 파워포인트에서 색상 추출을 해서 사용하곤했다. 그게 아니면 맥에 있는 디지털 컬러 측정기가 있긴하다. 그런데 0~255로 된 RGB만 나와서 16진수 값으로 별도로 변환하는 과정이 필요했다. 그래서 웹 페이지에서 보이는 색상들을 가져오는게 꽤나 귀찮았다. 그렇게 찾다가 발견한게 바로 ColorPick Eyedropper이다. ColorPick Eyedropper는 크롬 확장 프로그램으로 여기서 다운받을 수 있다...
-
Request요청 시 공백이 포함된 URL에 유의하라백수의 개발/웹 2020. 3. 18. 20:24
Request요청 시 공백이 포함된 URL에 유의하라 프론트와 백앤드 사이에 데이터를 주고 받기 위해 Rest API를 많이 사용한다. 이를 위해 특정 URL를 통해 요청(Request)를 하게 된다. 이때 사용되는 URL은 ASCII 문자 집합으로 이루어져 인터넷을 통해서만 보낼 수 있다. 그러나 URL에 있는 ASCII로 대체할 수 없는 문자들이 있을 수 있다. 이러한 경우 URL Encoding을 통해 %와 16진수의 조합으로 ASCII로 대체할 수 있도록 변환한다. [ URL Encoding ] 문제점 아래와 같은 url이 있다고 생각해보자. http://www.example.com/?value=">" 이러한 경우 URL Encoding을 통해 적절히 Encoding되어 아래와 같은 URL로 변환..
-
[ JavaScript ] 타입/클래스 비교 연산 Typeof/Instanceof백수의 개발/웹 2020. 3. 17. 21:30
타입/클래스 비교 연산 Typeof/Instanceof Java와 같이 객체를 다루는 컴파일언어 조차도 타입 안정성에 있어서 완전히 자유롭지 않을 것이다. 그러나 컴파일러 조차 없는 Javascript ES6에서 클래스가 도입되었고 타입에 관한 문제가 더 많이 생길 수 있을 것이다. 이를 위해 TypeScript를 통해 조금은 더 타입 안정성을 가질 수 있더라도 여전히 이를 완전히 극복할 수는 없을 것이다. 이를 위해 우리는 타입/클래스 비교 연산을 확실하게 알고, 적용할 수 있어야 할 것이다. 오늘은 typeof와 instanceof를 통해 타입/클래스 비교를 어떻게 할 수 있을지 다루어 보겠다. Typeof typeof는 함수가 아닌 연산자이다. 즉, 괄호를 사용하지 않고 !value, ~value와..