본문 바로가기

전체 글158

Countimator.js 사이트 로딩 시 숫자가 카운트 되는 라이브러리 github.com/benignware/jquery-countimator benignware/jquery-countimator Animated counter. Contribute to benignware/jquery-countimator development by creating an account on GitHub. github.com 2020. 11. 27.
dd let num = 0; $('.lst-prize li').eq(num).addClass('on') $('.lst-prize li').mouseenter(function(){ if($('.lst-prize li').hasClass('on')){ $('.lst-prize li').removeClass('on') } let index = $('.lst-prize li').index(this); $('.lst-prize li').eq(index).addClass('on') $('.col-img img').attr('src', './images/img-jackpots' + index + '.gif') }) 2020. 11. 26.
반응형 유튜브 플레이어 (responsive youtube player) 기본 개념 기본 개념은 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 responsive youtube player by zinee (@zineeworld) on CodePen. 응용하여 쓴 사례로는 모바일 웹에서 유투브 임베디드 플레이어를 가로 폭에 맞춰 높이를 늘려줄 때 사용했다. 유튜브 플레이어 비율은 16:9 이기 때문에 padding-bottom: 56.25% 을 주면 된다. 비율을 빠르게 계산하기 위.. 2020. 11. 26.
css2sass css2sass.herokuapp.com/ 2020. 11. 25.
jquery.scrollUp.min.js (스크롤 탑) 스크롤 탑 버튼 만들어주는 라이브러리 입니다. markgoodyear.com/2013/01/scrollup-jquery-plugin/ scrollUp jQuery plugin — Mark Goodyear — Front-end developer and designer ScrollUp is a lightweight jQuery plugin to create a customisable "Scroll to top" feature that will work with any website, with ease. Recently whilst working on a client project I was required to implement a “Scroll to top” feature to make it easy fo.. 2020. 11. 24.
stickyjs (오브젝트를 고정) 오브젝트를 고정시켜주는 라이브러리입니다. stickyjs.com/ 2020. 11. 24.
구글 API로 Contact Us 폼 처리하기 // 구글 앱스 메일 설정하기 1. 자신의 구글 계정으로 로그인한 후 아래 사이트에 접속하여 [사본 만들기] 버튼을 클릭해 사본을 만들어 놓습니다. docs.google.com/spreadsheets/u/1/d/1Bn4m6iA_Xch1zzhNvo_6CoQWqOAgwwkOWJKC-phHx2Q/copy Google 스프레드시트 - 스프레드시트를 작성하고 수정할 수 있으며 무료입니다. 하나의 계정으로 모든 Google 서비스를 스프레드시트로 이동하려면 로그인하세요. accounts.google.com 2. 샘플 엑셀 시트 상단 메뉴에서 [도구 > 스크립트 편집기]를 선택합니다. 3. 아래와 같은 스크립트 파일이 나오면 주석 기호(//)를 삭제하고 박스로 표시된 부분에 본인의 구글 메일 주소를 입력합니다. 4... 2020. 11. 22.
slick 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 2020. 11. 20.
워드프레스 무료 홈페이지 제작 방법 전 세계 대표 CMS, 워드프레스 워드프레스는 세계에서 가장 유명한 CMS입니다. CMS란 Content Management System의 약자로 콘텐츠를 등록, 수정, 삭제할 수 있는 시스템입니다. 1. 워드프레스 웹호스팅 신청 혹은 웹서버 구축 웹호스팅이라는 것은 홈페이지를 운영할 서버(컴퓨터)를 임대해주는 서비스를 말합니다. 자기 집에 있는 컴퓨터로도 서버를 운영할 수는 있습니다만, 설정할 것도 많고 보안과 백업의 편의성을 생각하면 조금의 비용을 지불하고 24시간 돌아가는 웹호스팅 서비스를 이용하시는 게 좋습니다. 카페24의 경우 최저 월 500원의 비용으로 사용이 가능하고요. 가비아의 경우 좀 더 높은 금액으로 무제한 트래픽의 워드프레스 호스팅을 이용할 수 있습니다. 2. 워드프레스 설치 웹호스팅.. 2020. 11. 20.
10+ Best Javascript Scrolling Animation Plugins 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... 2020. 11. 19.
How TO - Resize Header on Scroll See the Pen How TO - Resize Header on Scroll by miae (@flato) on CodePen. 2020. 11. 19.
Webflow Scroll (참고 사이트) webflow.com/website/Sticky-On-Scroll 2020. 11. 19.
Apple 제품 페이지 스크롤 애니메이션 Apple은 제품 페이지의 세련된 애니메이션으로 유명합니다. 예를 들어, 페이지를 아래로 스크롤하면 제품이보기에 들어가고, MacBook은 접 히고 iPhone은 회전하면서 하드웨어를 과시하고 소프트웨어를 시연하며 제품 사용 방식에 대한 대화식 이야기를 들려줍니다. iPad Pro의 모바일 웹 경험 비디오를 확인하십시오. 출처 : Twitter 당신이 보는 많은 효과는 HTML과 CSS에서만 만들어지지 않습니다. 그러면 무엇을 물어? 글쎄, 이해하기가 조금 어려울 수 있습니다. 브라우저의 DevTools를 사용하더라도 요소를 지나칠 수없는 경우가 많기 때문에 항상 답을 알 수있는 것은 아닙니다 . 이러한 효과 중 하나를 자세히 살펴보고 어떻게 만들어 졌는지 확인하여 자체 프로젝트에서 이러한 마법 효과 중.. 2020. 11. 18.
Mac 파인더에서 터미널 바로 열기 ifuwanna.tistory.com/261 [MacOS] 파인더에서 터미널 바로 열기 맥북이나 아이맥같은 Mac OS 환경에서는 윈도우 탐색기를 대체하는 파인더(Finder) 앱을 사용하는데 이때 특정 폴더에서 직접 콘솔 명령어를 바로 사용하고 싶을 때가 있습니다. 예를 들어 저 같은 ifuwanna.tistory.com 2020. 11. 12.
nav jQuery 소스 클릭시 $('.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()... 2020. 11. 12.
체크리스트 웹표준관련 업무수행시 체크해야하는 확인 사항들로 내부체크리스트와 외주 대행업무 전달시 함께 지켜져야 하는 CP가이드의 체크리스트가 통합적으로 정리되어 있습니다. 체크리스트 표 항목 CP 내부 확인 비고 웹표준 (필수) HTML validator 통과했는가? O O (필수) CSS validator 통과했는가? O O 코딩컨벤션 (필수) Cross Browsing 되는가? Web(Window) IE11 O O IE10 O O IE9 O O IE8 O O FF/Chrome/Safari/Opera (최신) O O Web(Mac) FF/Chrome/Safari/Opera (최신) O O Mobile(Android) Android 4.1 O O Android 4.3 O O Android 4.2 O O Androi.. 2020. 11. 11.
Image Guide 이미지 타입 선택 프로젝트 종류에 따른 이미지 타입표 종류 PC web Mobile web Mobile App GIF 기본 사용 가능 X JPG 컬러수 많거나 운영성 이미지일 때 운영성 이미지일 때 X PNG-8 X 기본 반투명효과 없고 컬러가 적을 때 PNG-24 반투명효과가 있을 때에만 사용 컬러 수 많거나 반투명효과가 있을 때 기본 이미지 스프라이트 O O X PC Web 기본 포맷은 GIF를 사용한다. JPG는 인물이나 실사 이미지와 같이, 색 변화 및 그라데이션이 풍부한 경우 및 운영성 이미지에 주로 사용한다. JPG로 저장 시 압축률 관리 - 일반 저장 시(File->Save) : 압축률 10/12 이상으로 저장할 것. - Save for web 기준 : Original 혹은 JPG Quali.. 2020. 11. 11.
Naming Guide 다양하고 많은 사람이 개발에 참여할 때 작업 효율화를 위해 가장 중요한 것 중의 하나가 바로, 사전에 약속한 규칙에 따라 이름을 정하는 것입니다. 본 Naming Guide는 크게 "Naming 규칙"과 "Prefix/Subfix/Suffix 정의" 두 부분으로 나뉩니다. 먼저 Naming 규칙에서는 CSS와 HTML 및 각종 파일, 디렉토리들의 공통된 네이밍 규칙에 대해 정리합니다. 그리고 Prefix/Subfix/Suffix 규칙에서는 다양한 개발환경에 대비한 예약단축어들을 소개하며 이를 조합하는 방식에 대해 설명합니다. prefix/subfix/suffix 정의 후보자 접두사를 의미하는 것으로, 앞부분에 사용하며, 주로 형태를 나타내는 데 사용된다. ex) tab_notice, tbl_product.. 2020. 11. 11.
IR 기법 IR 기법은 이미지 대체텍스트 제공을 위한 CSS 기법으로 다양한 CSS 기법을 사용하여 이미지 대체텍스트를 제공할 수가 있으며, 이 중에 널리 알려진 기법들을 소개하고자 한다. Daum은 이러한 여러 가지 기법 중에서 Phark Method와WA IR 기법을 주로 사용하여 대체텍스트를 제공해주고 있다. Phark Method (권장) 이미지로 대체할 엘리먼트에 배경이미지를 설정하고 글자는 text-indent를 이용하여 화면 바깥으로(-9999px만큼 내어 쓰기) 빼내어 보이지 않게 하는 방법 CSS button {display:block;width:49px;height:36px;margin:0;padding:0;border:none;background:url(btn_search.gif) no-repe.. 2020. 11. 11.
CSS Convention CSS 가이드 CSS 데이터를 로딩할 경우 @import 방식은 사용하지 않는다. (일부 브라우저에서 이미지 로딩 후 적용되기 때문에) external방식에서는 charset 표기한다. @charset "utf-8" CSS 데이터는 섹션의 경우 head 상단에 공통부분(common.css)과 콘텐츠부분(해당서비스.css)으로, 간단한 콘텐츠의 경우 하나의 css 파일로 로딩될 수 있도록 권장한다. z-index 값 적용 가이드 z-index 수치 간격은 10단위로 적용 스니펫에서는 z-index를 기본값(10)으로 지정하고, 해당 서비스마다 z-index를 재정의해서 사용 페이지 단위에서 1000을 넘는 경우는 발생하지 않음 팝업레이어의 경우는 1000부터 시작 전사공통인 서제스트인 경우는 9999로 유.. 2020. 11. 11.
HTML Elements 전역 구조화 Element class Attribute 사용은 하지 않는다.XHTML dtd 사용시에는 다음과 같이 XML namespace 및 lang attribute를 선언해준다 meta, title, link, style, script 순으로 Element 를 선언한다 문서의 기본 인코딩 및 뷰포트 등을 선언한다. (뷰포트는 모바일 서비스의 경우에만 선언)현재 페이지의 제목을 선언한다.rel, type, href 순서로 attribute를 선언한다 하위에 선언이 되는 CSS는 Element보다 1depth 들여쓴다 body Element에는 다른 attribute를 사용하지 않는 것을 원칙으로 한다. 제목, 문단, 구분선 Element Heading 의미 : HTML 구조상 문서 내부의 컨텐츠 제.. 2020. 11. 11.
HTML Grammar 일반 (X)HTML/CSS/SCRIPT 분리 문서의 내용과 디자인과 행동을 분리한다. 분리하는 목적은 CSS와 javascript 없이도 문서를 이용할 수 있게 하는데 있다. 정확한 문서 구조 준수 문서의 기본 구조는 다음과 같이 해당페이지의 기본정보를 포함하는 head와 본문을 포함하는 body를 갖는다. (해당 페이지 본문) HTML5 ... DTD 및 인코딩DTD란? 브라우저에게 웹페이지의 문서종류를 알려주는 선언문으로, 해당 문서의 최상단에 선언한다. DTD는 브라우저가 올바른 화면표시(Rendering)를 하기 위해 반드시 필요하다. DTD를 사용하면 브라우저들의 렌더링을 표준에 맞춰 렌더링을 하게끔 하기 때문에 다양한 환경에서 상호 운용성을 보장할 수 있다. DTD 기본 형식 블록요소, 인라인.. 2020. 11. 11.
HTML Convention DOCTYPE 문서타입에 (X)HTML의 버전과 문서형을 지정하는데, 다양한 플랫폼 지원을 위해 XHTML 1.0 , 하위 브라우져 호환성을 위해 Transitional 모드를 권장하고 있다. (Transition 모드를 사용하더라도, 웹표준 준수율의 향상을 위해 가급적 Strict 모드의 문법을 사용하는 것을 권장함) 시스템 식별자를 명시하여 Standards 모드 방식으로 지원해야 하나 예외적으로 메일, 개별카페, 개별블로그 등의 UCC영역에 해당하는 서비스는 과거 비표준 태그 허용을 위해 Quirks 모드로 지원할 수 있다. HTML5 권장 XHTML HTML 일반 문서 제목 각 페이지마다 서로 다른 규칙으로 사용중인 문서 제목 ( 태그) 규칙을 일원화함으로써, 서비스 통일성을 높이고 사내 검색 엔.. 2020. 11. 11.
제플린 Zeplin 제플린(Zeplin)은 디자이너 및 개발자를 위한 공동 작업 응용 프로그램입니다. 제플린은 스케치 또는 포토샵과 연동하여 자동으로 작업한 결과물을 이미지 파일 Asset과 디자인 가이드로 생성해 줍니다. https://zeplin.io/ Zeplin Connected space for product teams. Handoff designs and styleguides with accurate specs, assets, code snippets—automatically. zeplin.io 1. 다운 및 설치 아래 사이트에서 본인의 운영체계와 맞는 설치 프로그램을 다운 받아 설치하고 로그인 합니다. https://support.zeplin.io/en/articles/244698-downloadi.. 2020. 11. 10.
dd DOCTYPE html> flex : css ul { background: lightpink; } li { display: block; width: 100px;height: 100px; margin: 10px; text-align: center; line-height: 100px; background: #fff; } flex .flex-1 { display: flex; } 1 2 3 .flex-2 { display: flex; flex-direction: column; } 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3.. 2020. 10. 20.
썸네일 스케치하기 썸네일(Thumbnail)이란? 썸네일이란 엄지손가락 손톱만한 스케치를 말하며, 정식 작업 전 주로 아이디어 정리를 간단히 표현하기 위해 사용되던 일종의 스케치입니다. 즉 만들고자 하는 작품의 대강을 미리 그려 다른 사람으로 하여금 전체적인 감과 레이아웃 등을 알 수 있게 해주는 스케치를 말합니다. 2020. 10. 15.
GaugeMeter GaugeMeter.js jQuery 플러그인 jQuery로 제작 된 그래픽 게이지 미터 github.com/Mictronics/GaugeMeter Mictronics/GaugeMeter An elegant and dynamic animated graphical gauge meter built with jQuery. GaugeMeter.js is highly customizable and includes full-radial, semi-radial & arch dials. - Mictronics/GaugeMeter github.com 사용방법 1. jQuery & JavaScript Code 추가 태그 내에 아래 코드 추가 2020. 10. 13.
무료 템플릿 사이트 html5up.net/ HTML5 UP Responsive HTML5 and CSS3 site templates designed by @ajlkn and released under the Creative Commons license. html5up.net kalanidhithemes.com/ Kalanidhi Themes kalanidhithemes.com 부트스트랩 템플릿 themehunt.com/ Free Bootstrap Templates & WordPress Themes A great collection of multipurpose free templates and WordPress Themes. Browse and download theme for your personal, business or.. 2020. 10. 13.
웹폰트 만들기 m.blog.naver.com/PostView.nhn?blogId=designondo&logNo=220915027585&proxyReferer=https:%2F%2Fwww.google.com%2F CSS web font 웹폰트 ttf, eot, woff 만들고 설치 사용하기 시작하기 전 알아두기!CSS3의 @font-face는, CSS2에서 부터 존재해 온 규칙이 있다고 합니다. 우리가... blog.naver.com 시작하기 전 알아두기! CSS3의 @font-face는, CSS2에서 부터 존재해 온 규칙이 있다고 합니다. 우리가 흔히 웹폰트라 부르는 Embedded Open Type(.eot)포맷의 라이센스로 인해 해당 포맷을 지원하는 유일한 웹브라우저인 인터넷 익스플로러에서만 사용했습니다. 그러나,.. 2020. 10. 8.
[학점은행제] 자격연계 전공별 자격연계 검색하기 www.cb.or.kr/creditbank/eduIntro/nEduIntro2_4_3.do 1. 컴퓨터공학 자격연계 2. 시각디자인학 자격연계 2020. 10. 7.