본문 바로가기

코딩

(37)
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 } /..
아이콘 폰트 사용하기 (무료버전) https://ux.stories.pe.kr/46 아이콘 폰트(Icon font) 자유자제로 사용하기 웹사이트를 제작 시 생동감 있는 사이트를 만들기 위해서는 아이콘은 필수로 들어가는 요소입니다. 간단하게는 블릿에서 부터 중요하게는 웹사이트의 매인 이미지 까지도 아이콘으로 사용하는 경우가 있는데 예전.. ux.stories.pe.kr
부드러운 트윈맥스 버튼 움직임 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..
swiper centeredSlides error swiper centeredSlides 사용시 페이지 리로드는 괜찮지만 resize시엔 가운데가 잘 안맞는 경우가 있다. 이 땐 spaceBetween 으로 인해 오류가 생기는거라 spaceBetween을 0으로 수정하고 각 slide에 margin으로 간격 주면 해결~!
[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
HTML/CSS/JAVASCRIPT 개념 정리 된 사이트 http://tcpschool.com/html-tag-attrs/input-multiple 코딩교육 티씨피스쿨 4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등 tcpschool.com
포트폴리오 contact 폼 추가하기 - 플러그인 추천 https://blog.usefulparadigm.com/%EB%9E%9C%EB%94%A9-%ED%8E%98%EC%9D%B4%EC%A7%80%EC%97%90-%EC%BB%A8%ED%83%9D-%ED%8F%BC-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0-39ad8131291f 랜딩 페이지에 컨택 폼 추가하기 검색엔진이나 광고 등을 통해 접속하는 사용자가 최초로 보게 되는 웹페이지를 가리켜 흔히 랜딩 페이지(Landing Page)라고 부릅니다. 랜딩 페이지를 설계할 때 핵심은 사용자가 클릭할 만한 가치를 제공함으로써 랜딩 페이지를 방문하게 만드는 것… blog.usefulparadigm.com https://elri.blog/html5up-contact-form
SVG 기본 개념 정리 사이트 모음 1. SVG 가이드 (번역본) https://svgontheweb.com/ko/ 웹에서 SVG 사용하기 들어가며 우리는 픽셀의 시대를 살아가고 있습니다. 웹 디자이너와 웹 개발자들에게 픽셀이란 뗄레야 뗄 수 없는 친구이면서 골치덩어리입니다. 완벽한 웹 사이트를 위해서는 파일 용량을 줄여 성능을 높여야 합니다. 웹 상에 아이콘, 로고, 일러스트레이션 이미지 등을 사용한다면, SVG를 사용하는 것이 유일한 방법입니다. SVG는 확장 가능한 벡터 그래픽(Scalable Vector Graphics)의 약자로 모든 스크린에서 화질이 선명하며, 최소 용량이고, 편집 svgontheweb.com 2. SVG 제작 방식 https://mytory.net/archives/11175 SVG 활용 2 – 일러스트레이터를 ..
[css] 마우스 커서 이미지 바꾸기 - 브라우저별 이미지 확장자 유의 https://jsfiddle.net/Kimara/nnj7L0xc/ Custom Cursors 커서 모양을 이미지로 바꿀 수 있다. 모바일용 브라우저, 오페라 에서는 적용 X 익스 6이상 O body, html {cursor: url(smiley.gif), url(myBall.cur), auto} a {cursor: url(smiley.gif), url(myBall.cur), auto} 첫번째 이미지(smiley.gif)가 없거나 가져오지 못했을 때, 두번째 이미지(myBall.cur)가 적용되고, 이것도 실패하면 마지막에 설정된 값(auto)이 적용된다. 이미지를 가져오지 못할 경우에 적용될, 마지막 설정(키워드 값)은 반드시 해줘야 한다. 브라우저 호환성을 위해서 url을 먼저 나열한 후, 키워드 값..
카카오 지도 API 간단 사용법 https://developers.kakao.com/apps 카카오계정 로그인 여기를 눌러 링크를 확인하세요. accounts.kakao.com 다음 지도API가 카카오 지도API 로 변경 위 사이트로 이동하여 앱 만들기 -> 생성된 앱 이동시 상세정보 나옴 -> 앱정보 : 플랫폼 통해 설정시 키 발급 http://apis.map.kakao.com/ 카카오 API 해당파트를 선택해서 가이드 라인에 따라 생성 DEMO, WIZARD 통해 기본 생성 가능하다.