eunyo의 it이야기

01 React 기초 :: 작업환경 구축 및 시작하기 리액트를 시작하기 앞서, 다운로드하여줘야 하는 것이 있습니다. 1. 소스 코드 에디터(Visual Studio code 추천) https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. cod..

포토샵을 사용하다 보면 메모리 부족 현상이 발생하는데요. 오류 메세지가 뜨면서 저장이 안 되는 현상, 파일을 못 불러오는 현상이 생깁니다. 대표적으로 메모리(RAM)가 부족하므로 '저장' 명령을 완료할 수 없습니다. 혹은 메모리(RAM)]가 부족하므로 미리보기를 할 수 없습니다. 라는 오류 메세지가 뜹니다. 그때, 간단하게 해결할 수 있는 방법을 알려드리겠습니다. 1. 첫번째 방법 포토샵에서 "편집 > 제거 > 모두"를 클릭해서 제거해줍니다. 영문은 Edit > Purge > All입니다 이때 포토샵 작업했던 작업내역, 클립보드 저장내역들이 삭제됨으로 주의해주세요 :) 이렇게 했음에도 동일한 현상이 일어난다! 라고하면 레지스트리를 변경하여야 합니다. 키보드의 '윈도'키와 'R'키를 동시에 눌러 실행을 불..

안녕하세요. 요즘에는 제플린으로 작업도 많이 하고, 또 제플린 사용하는 퍼블리셔를 우대하는 곳도 많더라고요 :) 저도 공부할겸, 포토샵과 제플린을 사용하는 방법을 알아보겠습니다. 첫 번째로 제플린 홈페이지에 들어가서 다운로드하여줍니다 :) zeplin.io/ 홈페이지 하단에 보시면 다운로드 받을수 있는 링크가 있어요! 컴퓨터에 맞는 파일을 다운로드 받아주시면 됩니다 *중요한 건* install이 다운로드되면 install Photoshop Plugin을 함께 설치할 거냐는 안내문구가 나오는데 꼭 함께 설치해주세요! 그리고 다운로드가 완료되면, 창 > 확장 프로그램 > Zeplin을 활성화해주세요 :) 영문일 때는 Windows > Extensions > Zeplin을 활성화시켜주세요! 포토샵에서 제플린을..

jQuery ui를 사용하여 tooltip 구현하는 방법을 알아보겠습니다. jQuery ui를 다운로드하여 사용하시려면 아래 링크에서 버전 확인 후 다운로드하여주시면 됩니다. jqueryui.com/download/#! version=1.11.4 Download Builder | jQuery UI Download Builder jqueryui.com [사용 방법] jQuery-ui.css 파일과 jqurey.js, 그리고 jquery-ui.js를 추가해줍니다. 다음은 js영역에 선언해주시면 끝입니다 :) $( function() { $( '대상' ).tooltip(); } ); 그리고 css를 사용해서 커스텀하는 방법입니다. [결과 화면] 코드 Tooltips can be attached to any e..

parallax.js 플러그인입니다. 패럴랙스 스크롤링 효과는 스크롤의 움직임에 따라 콘텐츠가 반응하여 시간차 움직임을 보이는 효과입니다. 아래 사이트에서 다운받거나 옵션을 확인해보세요 :) pixelcog.github.io/parallax.js/ [사용방법] 01. 설치 jquery와 함께 parallax.js를 추가해주세요. 02. html 마크업 해당 영역에 class="parallax-window" , data-parallax="scroll" data-image-src="이미지 경로"를 추가해줍니다. 자바스크립트로 호출할 경우에는 아래항목을 추가해주시면 됩니다. $('.parallax-window').parallax({imageSrc: '/path/to/image.jpg'}); 03. css 추가..

웹페이지를 작업할 때에, 저작권 불펌 방지를 위해 드래그 금지, 우클릭 금지를 걸어야 할 때가 있습니다. html로 처리하는 방법과, css로 처리하는 방법을 알아보겠습니다. 모든 웹페이지에서 적용가능하다고 하니 참고하세요~ [css로 처리하는 방법] div{ -webkit-touch-callout: none; user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; } [html로 처리하는 방법] 1) 왼쪽 버튼 클릭 금지 2) 마우스 드래그 금지

안녕하세요 :) 2년째 퍼블리셔로 일하고있는 eunyo입니다. 지금으로 부터 약 3년전 전공과 다른일을[?] 찾다가 막연히 쇼핑몰을 창업하고싶다! 라는 생각에 배웠던 웹디자인/웹퍼블리싱이였는데 결국에는 웹퍼블리셔로 일하고 있네요 ㅎㅎ 저는 "스마트기기 UX/UI디자인(반응형 웹디자인) 양성과정"을 들었습니다. 말은 거창해보이지만 그냥 [웹디자인/웹퍼블리셔] 과정이라고 생각하시면 되용 학원다니기전 다룰줄 아는건 포토샵 조금, 일러스트 조금이였어요! html이 뭔지, css가 뭔지 아무것도 모르는 상태였습니다. 관련 전공, 직종이 아니였는데.. 잘할 수 있을까? 라는 생각을 했지만 취업해본 결과, 관련된 직종이 아니신분이 훨씬 많기때문에 걱정안하셔도 됩니당 학원을 다녔었던 기간은 4개월 반 정도, 주 5일 ..

분명 크롬에서는 잘 작동되는 게 익스플로러에서는 작동이 안 할 때가 많죠,, html이나 css같은 경우 익스에서 따로 처리해줘야 되는 게 많아서 항상 작업할 때 신경 써줘야 하죠! 보안 문제 때문에 전 세계적으로 ie를 사용하지 않는 추세이지만 우리나라 점유율은 아직도 높아요.. 얼른 ie가 사라졌으면 좋겠네요 :> 아무튼 본론으로! 익스에서만 JQUERY 이벤트가 안 되는 경험은 처음이라,, 많이 구글에 찾아보고 적용해봤는데 무슨 수를 써도 안되길래 좌절했는데,, 방법은 간단했습니다! swiper slider를 적용한 웹페이지였는데 이게 문제였어요! 최신 버전의 swiper slider는 ie를 지원하지 않아서 생긴 오류였습니다 :) 버전을 4.5.0으로 바꿔주니까 문제없이 실행됩니다! 이제 ie를 ..

개인적으로 가장 잘되있다고 생각하는 이미지 슬라이드 플러그인입니다. 플러그인 자체에 사용 예제도 많고 사용법도 간단해서 자주 사용합니다. 또한 반응형까지 지원해줍니다. 우선 kenwheeler.github.io/slick/ 사이트에 가서 플러그인을 다운 받습니다. 상단 메뉴의 get it now > 다운로드에서 다운로드받으시면 됩니다. 01. 추가 사용방법은 가장 먼저, jqurey와 js, css를 추가해줍니다. 혹은 설치하지 않고 사용할때에는 아래 소스를 이용하여 추가해줍니다. CSS JS 그 다음 html에 div이나 ul을 사용하여 마크업해줍니다. 이미지1 이미지2 이미지3 그 다음에는 js를 추가해줍니다. 아래항목은 기본적인 코드입니다 :) $('.slick').slick(); 다음은 slick..

구글에서 치면 바로나오는 소스인데, 웹접근성마크를 획득할 때 참조했던 탭메뉴 소스입니다. 기존의 탭메뉴와 구조가 약간 다른데, 웹접근성 마크가 필요한 프로젝트가 아니여도 사용해도 좋을것 같아서 공유합니다 :) [html] 공지사항 › 이것은 첫 번째 탭의 공지사항 목록 입니다. 2010.12.24 › 이것은 첫 번째 탭의 공지사항 목록 입니다. 2010.12.24 › 이것은 첫 번째 탭의 공지사항 목록 입니다. 2010.12.24 › 공지사항 더보기 보도자료 › 이것은 두 번째 탭의 보도자료 목록 입니다. 2010.12.24 › 이것은 두 번째 탭의 보도자료 목록 입니다. 2010.12.24 › 이것은 두 번째 탭의 보도자료 목록 입니다. 2010.12.24 › 이것은 두 번째 탭의 보도자료 목록 입니다..