본문 바로가기

ALL

巴拉拉小魔仙 : 파랍랍소마선 완구 "콤팩트, 수정구, 팔레트, 팔찌" 파랍랍소마선(巴拉拉小魔仙)은 중국 마법소녀 애니메이션으로 프리큐어를 표절했다고 논란이 많이된 애니메이션입니다. 이런 오해가 생긴 이유는 완구만 봐도 그 이유를 알 수 있었습니다. 파랍랍소마선 애니메이션의 마법아이템 디자인이 프리큐어 완구랑 비슷한 면이 너무 많더군여! 궁금한 마음에 타오바오에 배대지를 써서 콤팩트, 수정구, 팔레트, 팔찌 완구를 주문해봤습니다. 이것 말고도 파랍랍소마선 완구가 엄청 많았지만 제 통장은 딱 5개만 허락해주더군요... ^ㅁ ^)a 그럼 천천히 하나씩 구동영상과 함께 소개를 시작하도록 하겠습니다. ※ 참고로 완구 이름은 제가 개인적으로 재해석한 부분이 있으니 정확한 이름은 함께 추가해놓은 원제로 확인해주세요! 반딧불 진주 콤팩트 : 海萤珍珠变身器 (저가형) 피치피치핏치의 조개 ..
[다음 스마트워크] 도메인 이메일 주소 연결 (개인도메인으로 메일 사용이 가능한 무료기업메일) 요즘 저처럼 개인 도메인을 메일 주소로 활용하고 싶으신 분들을 많으실 텐데요! 그런 분들에게 도움이 될만한 무료 서비스를 찾아서 공유해보려고 합니다. 바로 다음(DAUM) 스마트워크 인데요 구글이나 네이버에서도 이런 서비스를 제공해주긴 하는데 유료 혹은 유료 예정 서비스라서 저는 다음 스마트워크를 선택했어요! http://mail2.daum.net/hanmailex/domain.html 다음 스마트워크 사이트에 접속해서 신청하기를 진행하던가 다음 메일에 접속해서도 스마트워크 서비스 신청을 할 수 있는데요 하단에 DAUM 스마트워크 버튼을 클릭하면 위와 같은 화면이 뜹니다! 자신에게 맞는 카테고리의 신청하기 버튼을 클릭해주세요~ 그럼 도메인 입력란에 자신이 소유한 도메인을 기입하고 다음 단계로 넘어가 주세..
[웹버튼] 버튼 종류 웹사이트를 제작하다 보면 빼먹을 수 없는 버튼!! 이 웹버튼에도 속성과 공식이 있는데요~ 아래 내용을 보면서 웹 버튼의 종류, 속성, 팁에 대해서 알아볼까 합니다. 먼저 버튼은 3가지 종류로 나눌 수 있습니다 1. positive : 화면의 변화를 주거나 정보를 추가하는 버튼 ("전송" "확인" "더보기" 등) 2. Neutral: 화면의 변화가 없거나 되돌아가는 버튼 ("취소"버튼 등) 3. Negative: 삭제, 리셋, 추가 정보를 차단하는 버튼 positive action button : positive 버튼은 주목성을 높이는 것이 중요합니다. Negative action button : Negative 버튼은 명암 차 등을 이용해서 positive 버튼보다 눈에 덜 띄게 디자인합니다. Neutr..
[해상도] 아이폰 해상도 오늘은 아이폰 해상도에 대해서 알아볼까 합니다. 아래 내용은 iOS Human Interface Guidelines에서 가져온 표입니다. 링크를 타고 들어가야 하는 부분이 있어서 하단에 Launch file or image 만 따로 정리하였습니다. 자세한 내용은 iOS Developer Library 사이트에서 확인 가능합니다. CLICK ▶ For iPhone 6: •750 x 1334 (@2x) for portrait •1334 x 750 (@2x) for landscape For iPhone 6 Plus: •1242 x 2208 (@3x) for portrait •2208 x 1242 (@3x) for landscape For iPhone 5 : •640 x 1136 For iPhone 4s : •..
[나인패치] 앱 제작 시 디자이너에게 유용한 나인패치 앱 제작 시 수많은 디바이스 별로 이미지를 슬라이스 해줘야 하는데요. 이때 유용한 것이 바로 나인패치 입니다. 예를 들어 아이폰의 문자 기능 중에 말풍선 같은 경우에 가로사이즈가 안에 들어가는 텍스트에 따라서 유동적으로 움직여야 합니다. 이럴 때 나인패치를 사용하게 되는데요. 밑에 이미지를 보면서 설명드리겠습니다. 1번의 배경이 투명한 이미지를 등록한다고 했을 때 가로 사이즈가 늘어나면 2번 이미지처럼 늘어나게 됩니다. 이때 3번 이미지처럼 보기 좋게 늘어나도록 고안된 것이 바로 나인 패치 도구라고 할 수 있습니다. 이때 참고하셔야 할 것이 나인패치로 저장된 파일명은 꼭 "파일명.0.png "여야 합니다. 나인패치 툴로 조작하는 것도 좋지만 간단하게 웹에서 변환 가능한 방법이 있어서 소개해 드릴까 합니다..
[오디오 변환] wav mp3 변환 사이트 wav 파일을 mp3로 전환해야 하는 작업이 필요해서 검색하다가 좋은 사이트를 찾아서 포스팅해보려고 합니다. http://media.io 라는 사이트인데요. 이 사이트는 mp3, wav, wma, ogg 등의 오디오 파일을 프로그램 설치 없이 웹사이트 상에서 확장자를 바꿔줍니다. 사이트에 접속하면 위와같은 화면이 보이실 텐데요. 1번에 select files to upload 버튼을 눌러서 가지고 있는 오디오 파일을 업로드합니다. 그 후에 2번 output format에서 변환하고 싶은 확장자를 설정해 줍니다. 3번 select quality는 음질 설정이니 원하시는 것을 선택해주세요. 숫자가 높을수록 음질이 좋습니다. 설정이 다 끝나시면~ 4번 convert를 클릭하면 끝!!
[닉컬렉션] 사진보정프로그램 무료배포 "구글 닉컬렉션" 사진 보정 프로그램 구글 닉컬렉션 전면 무료화!!!! 닉컬렉션(Nik Collection)은 원래 149달러에 판매되고 있는 유료 사진 보정 프로그램(플러그인)인데요~ 구글에서 인수하면서 현재 무료로 배포 중이에요! 사진 좋아하고 편집해야 하시는 분들은 어서 무브 무브!! (전면 무료화라고 해도 언제 유료로 다시 전환될지 모르니.. 파르르) 무료로 배포한다고 그저 그런 플러그인이라고 생각하실 수 있는데요. 절대 아닙니다! 닉컬렉션은 포토그래퍼나 전문가들이 가장 많이 사용하는 플러그인이라는 사실!! 일단 믿고 경험해 보시는 게 좋을 거 같아요! ※ 닉컬렉션 구성 ∙ 아날로그 Efex 프로 - 클래식 카메라, 필름, 렌즈의 느낌 ∙ 색상 Efex 프로 - 색상 수정, 보정, 특수 효과를 위한 종합 필터 세트..
[움짤만들기] 동영상, 사진으로 설치없이 간편하게 GIF 만들기! 요즘 포스팅을 하다 보니 움짤이 필요한 경우가 슬슬 생기더라고요~ 그래서 편히 움짤 만드는 법이 없나 하고 찾아보다가!! 설치 없이 간편하게 웹에서 만드는 방법이 있어서 포스팅을 해보려고 합니다. http://ezgif.com 이 사이트인데요~ 위 사이트에 가시면 이미지, 동영상 원본을 가지고 바로 움짤 gif 제작이 가능합니다. 먼저, 이미지로 움짤을 만드는 방법!! http://ezgif.com/maker 에 접속하시면 아래와 같은 화면이 나타납니다. 그럼 select images에 찾아보기를 클릭해서 이미지들을 업로드한 후에 파란색 Upload 버튼을 눌러주세요! 이미지를 확인하고 디레이 타임을 조정한 후에~ animate it 버튼을 클릭해주세요!! 완료가 되면 하단 부분에 옵션, 리사이즈, 스피..
[폰트] tiff,eot,woff 변환하기 ttf 파일을 웹폰트로 적용하기 위해서는 eot, woff 파일 과정을 꼭 거쳐야 합니다. 그럼 ttf 파일을 eot, woff 로 간단하게 변환하는 방법을 설명해 드리도록 하겠습니다. 첫 번째, ttf 폰트를 eot로 변환하기 http://eotfast.com 사이트에 접속하면 위와 같은 화면이 나오는데, free dounlode 버튼을 클릭해서 파일을 다운로드합니다. 압축을 풀면 위와 같이 파일들을 볼 수 있는데요. 별도의 설치나 실행 없이 ttf 파일을 EOTFAST-1.exe 에 끌어다 올려놓으면 자동변환이 됩니다. 두 번째, ttf 폰트를 woff로 변환하기 http://people.mozilla.org/~jkew/woff 사이트에 접속하면 위와 같은 화면이 나오는데, 윈도우 사용자는 for W..
[윈머지] WinMerge 프로그램 소스 비교 프로그램 퍼블리싱을 하다 보면 소스 비교가 절실할 때가 옵니다. 이걸 양쪽에 켜놓고 하나하나 눈으로 찾다 보면 찾기도 힘들뿐더러 사시 눈이 되겠죠?! 이럴 때 유용하게 사용할 수 있는 프로그램이 있어서 가져왔어요~ 윈머지 (WinMerge)라는 프로그램인데요. 소스를 불러오는 것만으로도 양쪽 시트의 차이점 분석이 가능하고 카피 기능도 있어 소스 비교가 아주 편리했습니다. 먼저 프로그램은 아래 사이트에가서 다운로드하여 주세요. http://winmerge.org 사이트에 접속하면 위와같은 화면이 보입니다. 녹색의 다운로드 버튼을 클릭하고 다운로드한 후에 설치를 해주세요! 윈머지를 실행하면 위와같은 화면이 나오는데요. 빨간색으로 체크한 폴더 모양 아이콘을 클릭하시면, 위와 같이 파일 선택 창이 나타납니다. 비교할 두..
jQuery 자식요소 내 요소 선택 자식요소를 찾는 메소드로는 find()와 children()이 있습니다. 처음에 두가지 요소에 무슨 차이가 있는지 몰라서 그냥 두개를 하나씩 넣어서 되는걸 사용했던 1인입니다. 그런데 이제 알고보니 children() 메소드가 한단계 아래의 요소중에서 찾는다면 find()는 모든 자식 요소 내에서 찾는점이 다르다고 합니다. (와..뭐..막..알듯말듯..계속 걍 번갈아 넣어볼 것 같은 느낌적인 느낌..) 1 2 이렇게 스크립트를 쓰게되면 btn을 클릭했을때 btn 내부에 p를 찾아서 on 클래스를 추가해주라는 내용이 됩니다. 만약에 btn 클래스가 여러개 있고, 내가 클릭한 btn의 자식요소에만 영향을 주고싶다면 아래와 같이 써주세요. 1 2 1 2 $('.btn').click(function() { $(..
jQuery 선택자 (selector) 1. 선택자 (Selector) 1. 기본 선택자 선택자 기능 태그 HTML 태그로 선택 .class 클래스 속성을 가지는 태그 선택 #id id속성을 가지고 있는 태그 선택 * 모든 태그 선택 2. 속성 선택자 선택자 사용법 기능 $("요소 선택[속성]") $("li[tktle]") 요소 중 속성이 포함된 요소만 선택 $("요소 선택[속성=값]") $("li[title='list']") 요소 중 속성이 값인 요소만 선택 $("요소 선택[속성^=텍스트]") $("a[href^='http://']") 요소 중 속성이 텍스트로 시작하는 요소만 선택 $("요소 선택[속성$=텍스트]") $("a[href$='.com']") 요소 중 속성이 텍스트로 끝나는 요소만 선택 $("요소 선택[속성*=텍스트]") $("a..
jQuery 기본 구조 (작성법) 제이쿼리 입문/시작하기 자바스크립트의 라이브러리 중 하나인 JQUERY(제이쿼리) 입문을 해보려고 합니다. 제이쿼리는 자바스크립트를 간결하게 라이브러리화 시켰다고 보시면 되구요~!! 어마어마한 양의 플러그인이 존재하며. 제이쿼리를 이용해서 제가 작업한 스타일시트 등을 컨트롤하면서 화면을 다양하고 다이나믹하게 만들 수 있어서 퍼블리셔들은 꼭 알아야할 부분이라고 생각합니다. 먼저 안에 위 내용을 삽입해서 jquery를 추가시켜 줍니다. (보통은 작업 시작할때 제이쿼리 파일을 다운받아서 웹에 올리고 그 주소를 링크시켜 주는게 좋습니다) 그리고 아래 기본구조 및 입력 방식을 토대로 제이쿼리에 쿼리함수를 입력해 주면됩닌다. 제이쿼리 기본구조 및 작성기초 위와 같이 .click(); 안에 function(){}을 ..
[해상도] 모바일 사이즈 가이드 모바일 해상도 사이즈 가이드 스마트폰의 보급이 확산되고 무수히 많은 제조사들의 합의가 이뤄지지않은 해상도 덕분에 디바이스의 사이즈가 어마무시하게 다양해지고 있는데요~ 이런 디바이스 문제로 인해 디자이너들은 사이즈 별로 디자인 작업을 따로 하거나 반응형으로 디자인을 하고 있습니다. (아하하하...해상도가 다 재각각이야...아하하...다 달라...하하하하하...하하하) 그래서 오늘은 저 처럼 다양한 디바이스 해상도로 인해서 고생하는 디자이너분들을 위해서 "모바일 작업 사이즈" 및 해상도, 팁을 정리해 보려고 합니다. * 아이콘 사이즈(정사각형) -안드로이드 : 36px, 48px, 72px, 76px, 96px, 144px, 512px -아이폰 : 29px, 57px, 58px, 80px 114px 120p..
[JS 변환] jsbeautifier js파일을 보다 보면. min으로 압축된 파일을 볼 수 있습니다. (전 처음에 그거보고 무슨 암호인 줄;;;;;) 압축을 하는 이유는 용량을 줄여 속도를 조금 더 빠르게 하기 위함인데요~ 저와 같은 까막눈 디자이너는... 이럴 때 눈을 감아버려!!! 완전히 꼭 감아버려!!! (가독률 문제가 아닌... 아예 이해 자체를 못하는 비루한 인간...) 이런 저를 위한 아름다운 사이트를 발견했습니다!!! http://jsbeautifier.org 접속하면 보이는 화면입니다~ 철저하게 디자인을 무시한 화면 때문에 많이 당황하셨죠? 무심코 이 사이트에 접속했다면 아마도 이상한 사이트인 줄 알고 냅다 화면을 껐을 거예요! ㅋㅋㅋ 다른 것들은 딱히 만지실 필요도 없고요~ (사실 다른 건 몰라서 눌러보지도 않았습니다 ㅋㅋ..
[소스] 로딩 GIF 인트로 페이지나 로딩 페이지를 만들 때 로딩을 표현해 줄 GIF 소스가 필요하죠?!! 그럴 때는 포토샵에서 이미지를 제작 후 애니메이션 타임라인에서 프레임을 생성해서 loof로 제작하거나, 에프터 이펙트에서 간단하게 만들어서 GIF로 랜더링을 하는데~ 시간적으로 여유가 없거나, 자체 제작이 힘들때는 아래 사이트를 이용해 보세요. http://www.ajaxload.info 위 사이트에 들어가면 손쉽게 다양하고 이쁜 로딩 GIF를 만들고 다운로드하실 수 있습니다. 사이트에 접속하면 위와 같은 귀여운 화면이 보이실텐데요~ indicator type에서 원하는 로딩 이미지를 선택하고 (원형에서 바형식 등 약 40가지 종류가 있습니다), backfround color에서 배경 칼라를 정하고, foreground..
[단축키] 윈도우 스티커 메모장 저는 엄청 덤벙이고 잘 잊어버려서... 병적으로 메모를 하는 스타일입니다 ㅋㅋㅋ 구글 캘린더, 네이버 캘린더, 네이버 메모장, 핸드폰 메모장, 탭 메모장;; 거기다 혹시나 해서 중요한 메모, 인포는 주기적으로 외장하드에 백업합니다 ㅋㅋㅋ ㅋㅋㅋ ㅋㅋㅋ (그 외장하드 잘못될까 봐 보관용 외장하드를 또 살까 고민하는 1인 ㅋㅋㅋ ㅋㅋㅋ 병입니다... 이 정도면;;;;) 회사 업무용 메모장이 필요해서 사용하기 시작한 게 바로 윈도우 스티커 메모장!!! 윈도우 메모장 좋다며 잘 쓰고 있었는데... 갑자기 메모해놨던 글씨에 취소선이 쫙!!!;;; ㄷㄷㄷ 아.. 이거 뭐지 ㅋㅋㅋㅋㅋ 마우스 오른쪽을 눌러봐도 나오는 게 없고 갑갑해서 윈도우 메모장 단축키 몇 가지 물어왔습니다~ 텍스트 굵게 Ctrl+B 텍스트 기울이..
뷰포트 설정 (viewport) 태그를 사용하면 페이지의 초기 비율과 최대/최소 비율, 그리고 사용자에 의한 스케일 조정 여부등을 설정할 수 있습니다. 위와 같이 메타(meta)태그의 이름(name)에 뷰포트(viewport)라고 지정되어 있으면 이는 스케일을 인식합니다. 그리고 content 속성에 스케일링에 관련된 내용을 기술하면 되다. Content속성 주요 내용은 아래와 같습니다. initial-scale : 페이지가 처음 로딩 될 때의 화면 확대 비율 maximum-scale : 최대 확대 비율 (0~1.0) minimum-scale : 최대 축소 비율 (0~1.0) user-scalable : 사용자가 줌으로 확대나 축소에 대한 가능 여부 (yes,no) width : 너비 (device-width 디바이스 너비) heigh..
파비콘 만들기 (favicon) 파비콘은 favorite icon을 줄인 말로 인터넷 주소창이나, 즐겨찾기를 했을때 옆에 보이는 작은 아이콘을 말합니다. 먼저 16x16으로 파비콘으로 사용할 이미지를 제작합니다. (확장자는 png, gif, jpg로 저장해 주세요.) 이미지 제작이 끝나면 ico로 변환해 줘야하는데 아래 사이트에 접속하여 변환이 가능합니다. (ico 변환을 여러곳에서 해봤는데, 아래 사이트에서 변환한 ico 파일만 제대로 작동을 했습니다. 같은 소스로 코딩을 했는데 말이에요~) url : http://www.favicon-generator.org 위 사이트에 접속해서 찾아보기를 클릭하고, 이미지를 등록합니다. generate only 16x16 favicon.ico를 선택한 후 create favicon을 클릭하면 변환..
요소,문단,테이블 1) 요소의 종류와 특징 HTML을 사용할 때는 문법을 준수해야하며, 다음과 같은 요소의 성격을 잘 파악하고 있어야합니다. ※ 블록요소 *줄 바꿈 속성을 가짐 *기본 너비 속성이 100% *블록 요소를 포함 못함 (예외 요소 있음) *인라인 요소를 포함 ,,,,,,,,, ※ 인라인요소 *줄 바꿈 속성이 없음 *내용만큼 너비 유지 *너비와 높이 속성 사용못함 *블록 요소 포함 못함 ,,,,,,,,,,, ※ 범용 요소 *블록 요소임에도 모든 요소를 포함함 ,, 2) 문단 태그 문단 태그는 문서를 작성할 때 필요한 문단요소 입니다. ~ : 제목요소, 숫자가 작을수록 큰 제목 : 단락 구분 요소 : 주소 태그, 주소를 작성할 때 사용 : 구분선 요소 : 짧은 인용 문구 요소 : 긴 인용 문구 요소 : 강조 요소..

티스토리툴바