본문 바로가기

분류 전체보기

 (44)
[입문] TWEENMAX 트윈맥스 배우기 1 - 기본 평소 CSS Transition, Animation으로 HTML 애니메이션 작업을 많이 하는 편이었는데, 이벤트성 페이지에선 작업이 많을경우 소스가 길어지는것도 있고 복잡해져 한계가 있다. jquery animation 역시 부드럽게 보이지 않을 때도 있으므로, 애니메이션 라이브러리인 TWEENMAX로 처리하는게 좋을것으로 판단하여 트윈맥스 공부를 시작하고자 사용법 포스팅을 시작하였다. 트윈맥스는 greensock 에서 만든 라이브러리로 https://greensock.com/ 위 사이트에 접속하여 다운을 받거나 cdn을 연결해주면 사용이 가능하다. - 기본 템플릿.to() 트윈맥스에서 가장 기본적으로 사용하는 것은 TweenMax.to() 이다. .to()는 일반적으로 .animate() 라고 생각하면..
JAVASCRIPT 공부 1. JQUERY와 함께 사용할때 [0] 을 붙이는 이유? $(element) = JQUERY$(element)[0] = JAVASCRIPT [0]을 붙여 자바스크립트 형태로 만드는 이유는 객체로 사용하기위함(ex : offset, length 등 자바스크립트 메서드를 사용해야할때 ) 2. 변수 = var elemant배열(ARRAY) = [ ]객체 = { } * 자료형 문자열(String) 문자열은 데이터에 문자를 저장하는 겁니다.var string = "string" // 큰 따옴표 var string2 = 'string' // 작은 따옴표 var string3 = "'string'" // 작은따옴표가 문자열에 들어있으면 큰따옴표로 감쌉니다. var string4 = '"string"' // 반대의 ..
[CSS] background 색상값 지정 css 색상값을 입력할 때 다음 색상의 단위 사용 가능 1. 색상 이름 (red, black, white 등 …) 2. rgb (red, green, blue) 값 3. rgba (red, green, blue, alpha) 값 4. hsl (hue, saturation, lightness) 값 5. hsla (hue, saturation, lightness, alpha) 값 1. RGB #f00#ff0000rgb(255,0,0)rgb(100%, 0%, 0%) - 위 색상은 모두 같은 색상 - 16진수는 3자리나 6자리로 가능 - #rgb는 #rrggbb와 같음 (예 : #fb0 = #ffbb00, #fff = #ffffff) 또한 RGBA의 alpha는 투명도값으로 0.0 ~ 1.0 사이로 사용 가능 ..
아톰(ATOM) 프론트 패키지 추천 * 현재 설치된 패키지툴 ● Atom Beautify 코드정리(정렬)을 손쉽게 해주는 프로그램. Ctrl + Shift + B 로 사용가능하다.사용 언어마다 설정이 개별적으로 필요하다. -> HTML/ CSS는 잘 정리되는데 PHP는 안되는 오류가 있다. 반나절동안 관련 문서를 다 뒤져봤는데도 해결하지 못함 ㅠㅠ혹시 관련하여 처리방법을 아시는 분은 말씀 부탁드립니다. ● Emmet https://atom.io/packages/emmet흔히 젠코딩이라 불리는 플러그인이다. 손가락 관절에 무리를 줄여주고 커피시간을 벌어주는 편리한 플러그인
에디터추천) 아톰 (ATOM ) 입문 프로젝트 진행을 하다보면 협업을 위해 GIT을 이용하는 경우가 많은데,개발자가 많이 사용하는 에티터 툴인 만큼 ATOM(아톰)이 GIT에 최적화되었단 말이 많다. 이전에는 프론트단에서 쓰기엔 툴이 좀 무겁다는 말도 있었지만요새같은 최신식 컴퓨터에선 크게 무리되지않는다. 다만 FTP는 개인적인 견해지만 에디트플러스만큼 편한건 아닌것같다. 하지만 패키지를 이용하여 좀 더 사용에 편리해졌다. 1. ATOM 설치 https://atom.io/ : 아톰 공식 사이트 서브라임텍스트/ 에디터플러스 와는 다르게 FREE 로 이용 가능한 아톰 !상단 공식 사이트에서 아톰을 다운받아주면 된다. 프로그램 설치까지는 크게 어렵지 않지만 이후 사용하기까지가 약간 복잡할 것이다.필자도 아직 초보단계로, 추후 이용을 위해 현재 기..
[jquery] 이미지 파일명 숫자에 따른 애니메이션 효과 이미지 파일명을 숫자로 순서를 나누어애니메이션 효과를 표현해야하는 경우가 있다. 1. 파일명 변경 프로그램으로 파일명을 편하게 바꾸자 아래 파일을 다운로드 하세요. DarkNamer 8216.exe [변경취소] - 작업한 내용을 취소[목록지우기] - 드래그 한 파일 목록 지우기[직접바꾸기] - 파일 한개씩 입력한 파일명으로 변경[목록정렬] - 원하는 정렬순으로 정렬[경로명앞에] - 폴더이름을 파일이름 앞에 추가합니다.[경로명뒤에] - 폴더이름을 파일이름 뒤에 추가합니다.[경로통일] - 파일목록에 있는 파일들을 한 폴더명으로 통일합니다.[확장자삭제] - 확장자를 삭제합니다.[확장자추가] - 확장자를 입력한 글자로 추가합니다.[확장자변경] - 확장자를 변경합니다. 2. setInterval 을 응용하자 va..
테이블 글자 깨짐 현상 table-layout 이용 table-layout 속성을 이용하여 테이블 고정하기table-layout 속성값을 fixed로 지정하면 셀안의 데이터가 길어서 지정한 너비 이상으로 셀을 밀어버리는 것을 방지합니다.보통 셀안의 내용이 한글인 경우 공백이 중간 중간에 들어가므로 자동으로 지정한 너비에서 줄바꿈이 일어납니다. 셀안의 데이터가 한글인 경우 지정한 셀의 크기에 따라서 자연스럽게 줄바꿈이 일어납니다. 테이블의 너비가 200픽셀로 셀안의 내용에 비해서 좁더라도 아래와 같이 자연스럽게 줄바꿈이 일어납니다.셀안의 데이터가 한글인 경우 지정한 셀의 크기에 따라서 자연스럽게 줄바꿈이 일어납니다.반면 홈페이지 주소와 같이 영문으로 공백이 없는 경우는 셀을 밀어버리는 현상이 발생합니다. http://www.homejjang.com/09/b..
(펌) 네이티브앱 vs 웹앱 vs 하이브리드앱 장단점 비교 모바일 어플리케이션을 제작하려고 결정한 후, 네이티브앱, 웹앱, 하이브리드앱 등 여러가지 앱 제작 방법을 보셨을 테고, 각 앱의 차이점이 궁금하실 텐데요. 각 앱별 장단점을 적어보겠습니다. 네이티브앱네이티브 앱을 만들기 위해선 iOS 플랫폼 이라면 오브젝티브C나 스위프트를 이용하여 만들고, 안드로이드 플랫폼에선 자바를 사용하여 만들어야합니다. 장단점을 살펴봅시다. 네이티브앱의 장점1. 성능이 웹앱, 하이브리드앱에 비하여 가장 높다.2. 네이티브API를 호출하여 사용함으로 플랫폼과 밀착되어 있다.3. 해당 언어에 익숙한 사용자라면 좀 더 쉽게 접근할 수 있따. 네이티브앱의 단점1. 플랫폼에 한정적이다.2. 해당 플랫폼에서 요구하는 언어에 제약적이다. 따라서 해당 언어와 플랫폼의 API를 다루는데 익숙해야 ..
(펌) 웹사이트의 개발환경 및 개발트렌드 알아내기 출처: http://steambread.tistory.com/15 [너찐빵 Blog] 오랜만에 글을 씁니다. 이번엔 각종 웹사이트들의 개발환경(사용하고 있는 프레임워크, 언어, 라이브러리 등)을 알아내고 세계적으로 자주 쓰이는 개발관련 트렌드를 알아보는 시간을 가져볼까 합니다. 각종 사이트들이 어떻게 어떤 기술로 만들어 졌는지, 나는 무엇을 사용하고 있는지 또 트렌드는 어떤지 알아보는 흥미로운 시간이 될 것같네요. 1. wappalyzer.com (크롬, 파이어폭스 확장프로그램)wappalzer는 카테고리별 현재 가장 많이 쓰이는 각종 기술들을 보여주고, 확장 프로그램을 설치하면 현재 자신이 보고 있는 페이지의 개발환경을 알아볼 수 있습니다. 해당 사이트 메인에 들어가시면 영어를 해석해보세요. 아래는 카..
모바일 아이프레임 이슈 이번 프로젝트 하면서 완전 질색한게 있으니 그건 바로 모바일 아이프레임 안드로이드만 해도 그나마 괜찮다. 크나큰거 아닌 이상 잘 불러와주니까..근데 복병은(아니, 어쩌면 항상) 바로 아이폰 ㅠ_ㅠ 이번에 겪으면서 느낀 아이프레임 이슈에 대해 다뤄보려고 한다. 1. 모바일 리사이즈 오류 (아이폰) 2. 모달창 높이 맞추기 (PC, 모바일 공통) 3. 모달창이 뜨지 않는 현상 (아이폰) 우리가 쓰고 있는 모달창(B-POPUP과 유사)은 현재 보고있는 해상도 창(window.height()) 값을 받아 가운데에 띄우게 해주는데,아이프레임에 들어가있을 경우 window값을 해당 문서의 윈도우 값이 아닌 링크 도메인의 윈도우 값으로 받아, 전체 문서 높이를 받게 된다. 4. 스크롤 이벤트가 되지 않는 현상 (아이..

티스토리툴바