odada

기본 개념 기본 개념은 width 비율 만큼 padding-bottom 값을 동일하게 주면 된다. 100%를 주면 1:1 비율이 되는 것이고, 75% 값을 패딩으로 주면 4:3 비율이 되는 것이다. See the Pen Height equal to dynamic width by zinee (@zineeworld) on CodePen. 응용 사례 See the Pen Youtube 비율 by odada (@odada) on CodePen. See the Pen responsive youtube player by zinee (@zineeworld) on CodePen. 응용하여 쓴 사례로는 모바일 웹에서 유투브 임베디드 플레이어를 가로 폭에 맞춰 높이를 늘려줄 때 사용했다. 유튜브 플레이어 비율은 16:9 ..

1. sticky 예제 webflow.com/website/Sticky-On-Scroll Responsive web design tool, CMS, and hosting platform | Webflow Build responsive websites in your browser, then launch with our world-class hosting or export your code. Discover the professional website platform built for your business. webflow.com 2. 오브젝트를 고정시켜주는 라이브러리입니다. stickyjs.com/

// 구글 앱스 메일 설정하기 1. 자신의 구글 계정으로 로그인한 후 아래 사이트에 접속하여 [사본 만들기] 버튼을 클릭해 사본을 만들어 놓습니다. docs.google.com/spreadsheets/u/1/d/1Bn4m6iA_Xch1zzhNvo_6CoQWqOAgwwkOWJKC-phHx2Q/copy Google 스프레드시트 - 스프레드시트를 작성하고 수정할 수 있으며 무료입니다. 하나의 계정으로 모든 Google 서비스를 스프레드시트로 이동하려면 로그인하세요. accounts.google.com 2. 샘플 엑셀 시트 상단 메뉴에서 [도구 > 스크립트 편집기]를 선택합니다. 3. 아래와 같은 스크립트 파일이 나오면 주석 기호(//)를 삭제하고 박스로 표시된 부분에 본인의 구글 메일 주소를 입력합니다. 4...

kenwheeler.github.io/slick/ slick - the last carousel you'll ever need slick is a responsive carousel jQuery plugin that supports multiple breakpoints, CSS3 transitions, touch events/swiping & much more! kenwheeler.github.io

전 세계 대표 CMS, 워드프레스 워드프레스는 세계에서 가장 유명한 CMS입니다. CMS란 Content Management System의 약자로 콘텐츠를 등록, 수정, 삭제할 수 있는 시스템입니다. 1. 워드프레스 웹호스팅 신청 혹은 웹서버 구축 웹호스팅이라는 것은 홈페이지를 운영할 서버(컴퓨터)를 임대해주는 서비스를 말합니다. 자기 집에 있는 컴퓨터로도 서버를 운영할 수는 있습니다만, 설정할 것도 많고 보안과 백업의 편의성을 생각하면 조금의 비용을 지불하고 24시간 돌아가는 웹호스팅 서비스를 이용하시는 게 좋습니다. 카페24의 경우 최저 월 500원의 비용으로 사용이 가능하고요. 가비아의 경우 좀 더 높은 금액으로 무제한 트래픽의 워드프레스 호스팅을 이용할 수 있습니다. 2. 워드프레스 설치 웹호스팅..

bashooka.com/coding/10-best-javascript-scrolling-animation-plugins/ 10+ Best Javascript Scrolling Animation Plugins – Bashooka Scrolling animation helps better control the user flow and make sure important content is appropriately shown to a given user. The idea is that, as a user scrolls through the site, different bashooka.com alexfox.dev/lax.js/ https://alexfox.dev/lax.js/ alexfox.dev github...

See the Pen How TO - Resize Header on Scroll by miae (@flato) on CodePen.

Apple은 제품 페이지의 세련된 애니메이션으로 유명합니다. 예를 들어, 페이지를 아래로 스크롤하면 제품이보기에 들어가고, MacBook은 접 히고 iPhone은 회전하면서 하드웨어를 과시하고 소프트웨어를 시연하며 제품 사용 방식에 대한 대화식 이야기를 들려줍니다. iPad Pro의 모바일 웹 경험 비디오를 확인하십시오. 출처 : Twitter 당신이 보는 많은 효과는 HTML과 CSS에서만 만들어지지 않습니다. 그러면 무엇을 물어? 글쎄, 이해하기가 조금 어려울 수 있습니다. 브라우저의 DevTools를 사용하더라도 요소를 지나칠 수없는 경우가 많기 때문에 항상 답을 알 수있는 것은 아닙니다 . 이러한 효과 중 하나를 자세히 살펴보고 어떻게 만들어 졌는지 확인하여 자체 프로젝트에서 이러한 마법 효과 중..

ifuwanna.tistory.com/261 [MacOS] 파인더에서 터미널 바로 열기 맥북이나 아이맥같은 Mac OS 환경에서는 윈도우 탐색기를 대체하는 파인더(Finder) 앱을 사용하는데 이때 특정 폴더에서 직접 콘솔 명령어를 바로 사용하고 싶을 때가 있습니다. 예를 들어 저 같은 ifuwanna.tistory.com

클릭시 $('.depth1 > li > a').click(function(){ if ($(this).parent().hasClass('on') === false) { $('.depth1 > li').removeClass('on'); $(this).parent().addClass('on'); } else if ($(this).parent().hasClass('on') === true) { $(this).parent().removeClass('on'); } }) 마우스 오버시 $('.depth1 > li > a').mouseenter(function () { if ($(this).not($(this).hasClass('on'))) { $('nav li ul').slideUp(); $(this).next()...