인기 글
- HTML & CSS 쉽게 놓칠수 있는 CSS Issue 이슈 해결 1. ie8~10 빈 공간의 a태그 활성화 안되는 문제블라블라 -> 위와 같은 구문은 IE(인터넷 익스플로러)에서 태그가 빈공간으로 인식하여 해당 영역이 활성화되지 못한다.따라서 두가지 해결방법이 있다.1. 태그 안에 태그를 넣어 영역을 채워준다.2. css에서 background image 를 사용하여 사이즈를 100% 주어 영역을 채워준다. 2. IE8에서 input 실행안되는 이슈input[type=""]에서 input 숨기는 css에visibility: hidden을 사용하게 되면 IE8에서 인식을 하지 못한다. input[type=""] {position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; marg..
- HTML & CSS [CSS] 3개의 점을 이용한 로딩 아이콘 GIT : https://github.com/nzbin/three-dots DEMO : https://nzbin.github.io/three-dots/ 출처 : http://rwdb.kr/three-dots/
- ATOM (아톰) 에디터추천) 아톰 (ATOM ) 입문 프로젝트 진행을 하다보면 협업을 위해 GIT을 이용하는 경우가 많은데,개발자가 많이 사용하는 에티터 툴인 만큼 ATOM(아톰)이 GIT에 최적화되었단 말이 많다. 이전에는 프론트단에서 쓰기엔 툴이 좀 무겁다는 말도 있었지만요새같은 최신식 컴퓨터에선 크게 무리되지않는다. 다만 FTP는 개인적인 견해지만 에디트플러스만큼 편한건 아닌것같다. 하지만 패키지를 이용하여 좀 더 사용에 편리해졌다. 1. ATOM 설치 https://atom.io/ : 아톰 공식 사이트 서브라임텍스트/ 에디터플러스 와는 다르게 FREE 로 이용 가능한 아톰 !상단 공식 사이트에서 아톰을 다운받아주면 된다. 프로그램 설치까지는 크게 어렵지 않지만 이후 사용하기까지가 약간 복잡할 것이다.필자도 아직 초보단계로, 추후 이용을 위해 현재 기..
- GIT [GIT PAGE 설정방법] github로 무료 도메인 만들기 @ GIT HUB PAGE 만들기 1. GITHUB 접속 - 계정 로그인 2. Repository 만들기* 여기서 저장소 이름은 반드시 username.github.io 로 저장(기존엔 .com이었지만 .io로 바뀌었음 > 참고문서) 3. Git bash 혹은 GUI GIT 프로그램으로 GIT 이용1) git clone (git url)2) git add . 3) git commit -m "커밋메세지입력"4) git push5) 계정 로그인 클론 > 업데이트된 내용 확인 > 커밋 > 푸쉬 > 계정정보 확인 4. 새 창에서 URL 입력창에 저장소 이름 입력 (username.github.io) @ 이미 git project 가 있는 상태에서 해당 repository에 대한 github page를 만드는 법..
- MOBILE 모바일 인앱 브라우저 변수 지정 // 페이스북 인앱 변수지정 function isFacebookApp() { var ua = navigator.userAgent || navigator.vendor || window.opera; return (ua.indexOf("FBAN") > -1) || (ua.indexOf("FBAV") > -1);} // 아이폰 페이스북 인앱 지정 function isFacebookApp() { var ua = navigator.userAgent || navigator.vendor || window.opera; return (ua.indexOf("FBAN") > -1) || (ua.indexOf("FBAV") > -1); } var iOS = /iPad|iPhone|iPod/.test(navigator.userA..
최신 리스트
- JAVASCRIPT bxslider 탭에서 auto 롤링 오류날때 $(function(){ var settings = function() { var settingOff = { slideWidth: 680, mode: 'vertical', infiniteLoop:true, minSlides:8, maxSlides:8, moveSlides:1, controls:false, slideMargin:7, pager: false, auto: false } var settingOn = { slideWidth: 680, mode: 'vertical', infiniteLoop:true, minSlides:8, maxSlides:8, moveSlides:1, controls:false, slideMargin:7, pager: false, auto: true, pause: 1000 } /..
- HTML & CSS 아이콘 폰트 사용하기 (무료버전) https://ux.stories.pe.kr/46 아이콘 폰트(Icon font) 자유자제로 사용하기 웹사이트를 제작 시 생동감 있는 사이트를 만들기 위해서는 아이콘은 필수로 들어가는 요소입니다. 간단하게는 블릿에서 부터 중요하게는 웹사이트의 매인 이미지 까지도 아이콘으로 사용하는 경우가 있는데 예전.. ux.stories.pe.kr
- JAVASCRIPT 부드러운 트윈맥스 버튼 움직임 function hexagon_motion(){ $('.box_hexagon a').on('mouseenter',function(){ var $button = $(this).find('.hexagon_figure, .space_img, .hexagon_btn'); var duration = 0.4; var delay = 0.12; TweenMax.to($button, duration, {scaleY: 1.1, ease: Expo.easeOut}); TweenMax.to($button, duration, {scaleX: 1.1, scaleY: 1, ease: Back.easeOut, easeParams: [3], delay: delay}); TweenMax.to($button, duration * 1.25..
- JAVASCRIPT swiper centeredSlides error swiper centeredSlides 사용시 페이지 리로드는 괜찮지만 resize시엔 가운데가 잘 안맞는 경우가 있다. 이 땐 spaceBetween 으로 인해 오류가 생기는거라 spaceBetween을 0으로 수정하고 각 slide에 margin으로 간격 주면 해결~!
- JAVASCRIPT [Jquery] 텍스트 말줄임 스크립트 https://cccat.tistory.com/32 [J-query/css] 길어진 텍스트 말줄임 스크립트로 처리하기 문장이 길면 뒤에 ...표시가 되도록 주로 css로 처리를 한다. 부득이하게 안먹히는 경우도 있고, 원하는대로 처리가 되지 않는 경우가 많기 때문에 스크립트로 처리 할 경우도 생긴다. css로 처리할 경우 div {tex.. cccat.tistory.com https://jsfiddle.net/4dxy5rez/5/ Edit fiddle - JSFiddle jsfiddle.net