eunyo의 it이야기

팝업 안에 탭 메뉴 안에 슬라이드가 들어가는 작업을 했는데,, 팝업, 탭메뉴 누를 때마다 슬라이드 깨지는 현상 ,,ㅠ 아무리 찾아봐도 해결책을 못 찾다가 드디어 해결! $('.slideshow_container').slick({ arrow: true, slidesToShow: 1, setPosition: 0, //깨짐 방지 infinite:false, }); 슬라이드에 setPosition:0 항목을 넣어준 후, function openModal(modalname) { $('.slideshow_container').resize() // 팝업 열때 슬라이드 깨짐 방지 $('.slideshow_container').slick('refresh'); // 팝업 열때 슬라이드 깨짐 방지 }..

해킹인가 싶어서 찾아봤는데 해킹은 아니고 저런 식으로 협박[?]해서돈을 내게 하는 악질적인 수법이라고 하니까 너무 걱정하지마세요! 구글에서 웹서핑하다가 "귀하의 아이폰이 심각하게 손상되었습니다"라는 웹사이트가 자주 뜨는데이제는 한 단계 업그레이드됐는지 캘린더까지 ,, 절레절레 - 캘린더에 경고! 귀하의 아이폰이 (4)에 의해 심각하게 손상되었습니다. - iPhone에서 감염을 제거하고 데이터를 보호하십시오. - 악성 공격으로부터 iPhone을 제거하십시오. - 휴대폰 데이터가 유출 될 수 있습니다. 위와 같은 알림이 반복됩니다.그냥 무시하려다가 계속 뜨길래 해결방법을 찾았습니다. 방법은 설정 > 캘린더 > 계정 > events(계정) > 계정 삭제입니다! 위의 방법을 사용하면 간단하게 캘린더에서 지워지더..

차트를 사용할 때 사용하기 좋은 플러그인인 chart.js의 사용법과 옵션을 알려드리겠습니다. Chart.js는 강력한 오픈소스 라이브러리로 활용성이 높아요 :) 01. 우선 GitHub에서 Chart.js 파일을 다운받아 설치해줍니다. github.com/chartjs/Chart.js chartjs/Chart.js Simple HTML5 Charts using the tag. Contribute to chartjs/Chart.js development by creating an account on GitHub. github.com chart.js 사이트안에 많은 예제 파일과 사용법이 있으니까 참고하세요 :) 02. JS 연결을 해줍니다. npm 연결 다운받은 파일로 연결 03. 페이지에 컨버스를 삽입한..

웹 접근성이란 마우스나 키보드를 사용하지 못하는 경우에도 동일한 환경에서 볼 수 있도록 제작하는 방법입니다. 요즘 규모가 큰 웹페이지에서는 필수로 사용하고 있고, 또한 기업에서도 웹 접근성을 준수할 수 있는 직원을 뽑으려고 합니다. 그중에서 가장 기본적인 스킵 내비게이션을 알려드리겠습니다. 보통 콘텐츠가 많은 홈페이지에서 tab키로 원하는 콘텐츠까지 도달하기가 어려운데, 이러한 불편함을 스킵네비게이션으로 통해 해소해주는 방법입니다. 웹 접근성을 위한 본문 바로가기 HTML 본문 바로가기 CSS #skipNav{position:relative;z-index:9999;} #skipNav a{position: absolute; top: -200px; left:0; width: 100%; line-height:..

오늘은 자바스크립트가 작동 안 할 때, 비활성화 상태일 때 처리 방법에 대해 알려드리겠습니다. 사실 요즘에 자바스크립트를 지원하지 않는 브라우저는 없지만, 사용자가 자바스크립트를 비활성화 한 상태에서 웹 브라우저를 사용한다면 레이아웃이 깨져 보이거나 자바스크립트로 개발된 영역이 작동이 안됩니다. 사용자가 자바스크립트가 꺼져있다는 사실을 인지 못한다면 오류라고 생각을 할 수 있기 때문에 방법은 noscript 태그는 자바스크립트가 활성화되어있을 때는 표시되지 않고, 자바스크립트가 비활성화 됐을 때만 보이는 태그입니다. 스크립트 비활성화 시 메시지 출력 아래와 같이 메시지를 출력하여 대체 방안을 마련합니다. 브라우저의 자바스크립트가 비활성화되어있는 상태입니다. 원활한 웹서비스를 이용하기 위해서는 자바스크립트..

오늘은 jquery ui의 datepicker 사용법에 대해 알려드리겠습니다. 1. 가장 먼저 head에 링크를 넣어줍니다. 다운로드하여서 적용할 경우에는 (https://jqueryui.com/download/)로 가서 다운로드하시면 됩니다. 2. datepicker가 될 input을 작성해 줍니다. 3. $(function() { $( "#Date" ).datepicker({ }); }); 가장 기본의 스크립트를 추가해줍니다. 해당 input의 id 혹은 class를 작성하면 됩니다. 실행화면 datepicker 옵션 $("#Date").datepicker({ showOn: "both", // 버튼과 텍스트 필드 모두 캘린더를 보여준다. buttonImage: "/application/db/jquer..

한 줄 글자 자르기 p{ display: inline-block; width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } display : block 요소나 inline-block 요소 둘 다 사용 가능합니다. white-space : nowrap은 줄바꿈 처리가 되지 않도록 합니다. overflow:hidden은 넘치는 텍스트를 숨깁니다. text-overflow : ellipsis 는 넘치는 텍스트를 숨긴 후 '...' 처리를 해줍니다. 한 줄 글자 자르기는 크롬, 익스 모두 잘린 후... 처리되어 보입니다. 두줄 / 여러줄 글자 자르기 p{ overflow: hidden; text-overflow: ellipsi..

A 사이트에서 B사이트의 내용을 iframe으로 불러올 때, 자동으로 iframe 높이를 조절하게 해주는 스크립트입니다. A사이트 html js //browser compatibility: get method for event // addEventListener(FF, Webkit, Opera, IE9+) and attachEvent(IE5-8) var myEventMethod = window.addEventListener ? "addEventListener" : "attachEvent"; // create event listener var myEventListener = window[myEventMethod]; // browser compatibility: attach event uses onmessa..

오늘은 반응형 웹 디자인을 제작하기 위한 미디어 쿼리 해상도 분기점 리스트를 공유하려고 합니다. 반응형 웹의 자세한 제작 방법이 궁금하시다면 아래의 포스트를 참고하세요. 반응형 웹(Responsive web) 만들기 - 뷰포트와 미디어쿼리 기본 설정 반응형웹을 적용하기 위해서는 먼저 meta viewport를 설정해주어야 합니다. html 태그에 뷰포트 태그를 선언해줍니다. width=device-width : 화면의 넓이를 디바이스의 넓이로 지정 initial-scale=1: 기본 사이즈를 1로 지정함. 디바이스별 분기점 1. 4개의 반응형 분기점 1. 낮은 해상도의 PC, 태블릿 가로 : ~1024px 2. 테블릿 가로 : 768px ~ 1023px 3. 모바일 가로, 태블릿 : 480px ~ 767..

리셋 css / reset css란? 모든 웹 브라우저에서 동일하게 보이기 위해서 사용하는 것으로, 브라우저 자체의 css style을 리셋시켜주는 css이다. 크로스 브라우징을 위해서는 *필수적인* css라고 생각하면 된다. /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, s..