eunyo의 it이야기

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..

작업을 하다 보면, 엑셀이나 한글파일에 표를 첨부해주는 경우가 무지무지 X10 많다. 표 작업을 할 때 복붙 하면 html으로 변환해주는 드림위버를 사용해서 작업했었는데, 유료이기도 하고 쓸데없는 클래스와 색상까지 인라인 속성으로 변환해줘서 오히려 손이 가는 상태.. 그러다가 표 -> html 변환해주는 사이트를 발견! css도 제거할 수 있는 옵션이 있어서 정말 유용하게 잘쓸듯! 링크는 아래와 같음 https://www.tablesgenerator.com/html_tables new table을 눌러주시면 됩니다!

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 › 이것은 두 번째 탭의 보도자료 목록 입니다..

탭메뉴가 한페이지당 여러개가 사용되는 경우가 있다. 그때 클래스를 달리하여 하는 방법도 있지만, 유지보수나 운영측면에서 좋지않은 코드이기 때문에, rel값을 이용해 여러개를 사용하는 방법을 알아보겠다. See the Pen abpNGgW by aldo814 (@aldo814) on CodePen. 상단과 같이 탭메뉴가 되는 영역에 rel값을 주고, 해당 탭메뉴에 id값을 동일하게 해주면 간단하게 페이지내 여러 탭메뉴를 사용할 수 있다.

웹사이트를 만들때, 레이어팝업이 여러개가 사용되는 경우가 있다. 그때 사용하면 좋을 코드이다. See the Pen jOyqxvj by aldo814 (@aldo814) on CodePen.