아카이브 썸네일형 리스트형 기획자를 위한 파워포인트목업을 소개합니다. 시간은 금이라네 친구! 오늘은 기획자들에게 꿀같은 파워포인트목업을 소개해드릴까 합니다. 웹사이트 화면설계서를 작성하다보면 모바일 목업, 아이콘, 풀다운메뉴, 차트 등을 이용해서 기획을 할 일이 많은데요. 이를 일일이 아이콘을 그리고 이미지를 잘라내면서 작업하는 것은 여간 귀찮은 일이 아닐 수 없습니다. 오늘 소개해는 파워목업(PowerMockup)이라는 녀석은 이러한 번거로운 작업을 아주 간편하게 해주기 때문에 기획자의 체력과 멘탈 소모를 줄여주는 착한녀석입니다. 그럼 이 파워풀한녀석을 어떻게 설치하고 사용하는지 아래의 목차를 통해서 간략하게 소개해 드리도록 하겠습니다. 링크를 클릭하면 해당 목차로 이동되니 필요에 따라 사용해주세요 ! 1.설치방법 2.사용방법 3.프리라이센스 이용방법 1. 설치방법 - .. 더보기 순수 CSS만으로 오프캔버스 메뉴 만들기 자바스크립트나 Jquery 도움 없이 순수하게 html과 css만을 이용해 오프캔버스 메뉴를 만드는 방법을 소개합니다.이 방법은 지금 현재 코드랩 블로그에서 타블릿 PC와 모바일 해상도에 적용해 사용하고 있는 방법입니다. 아래 결과물과 소스를 한번 먼저 보여드리고 간략히 원리를 설명하겠습니다. See the Pen #offcanvas - pure css by moksunung (@moksunung) on CodePen. 위와 같이 오프캔버스를 구현하는 원리는 다음과 같습니다. 1. 체크박스를 만든 뒤 display:none; 하여 감춥니다. 2. 위 체크박스에 연결되는 label을 만들어 버튼으로 사용합니다. (토글버튼 = 라벨 1번) 3. 마찬가지로 체크박스에 연결되는 또 하나의 label을 posit.. 더보기 transform을 이용한 3d 기법 CSS3의 transform은 웹사이트 UX를 향상시키는데 아주 중요한 역할을 하고 있는데요. 저는 transform2d만을 사용해왔는데 이참에 공부하고자 3d사용법에 대해서 구글링을 좀 하면서 다양한 사용법을 살펴봤는데 역시나 재미있게 표현하는 사람들이 많더라고요. 그래서 저도 몇가지 사이트를 참조하면서 코드를 하나 짜봤습니다. css3 tranform3d 개념 이해하기 http://www.w3schools.com/css/css3_3dtransforms.asp css3 tranform3d 시뮬레이션 할 수 있는 웹사이트 http://css3.bradshawenterprises.com/transforms/ perspective 시뮬레이션 할 수 있는 웹사이트 http://hanbit.co.kr/exam/.. 더보기 이전 1 2 다음
