본문 바로가기

전체 글168

비즈니스용 원드라이브 용량을 5TB로 설정하기 비즈니스용 원드라이브 용량을 5TB로 설정하기 m.blog.naver.com/PostView.nhn?blogId=kaionit&logNo=221037769818&proxyReferer=https:%2F%2Fwww.google.com%2F 2020. 12. 18.
TabNine www.tabnine.com/ AI Smart Compose for Your Code Tabnine’s AI code completion IDE plugin completes code based on millions of programs in all languages and on your own context, empowering developers to code better and faster. www.tabnine.com 2020. 12. 18.
bitbucket 터미널을 사용하여 코드 가져 오기 먼저 저장소를 로컬 시스템에 복제 한 다음 빈 Bitbucket Server 저장소로 푸시하여 터미널을 사용하여 기존 프로젝트에서 코드를 가져옵니다. 버전이 지정되지 않은 기존 코드 프로젝트를 Bitbucket Server로 가져 오기 로컬 머신에 소스 제어가 아닌 코드가있는 경우 소스 제어에 넣고 Bitbucket Server로 가져올 수 있습니다. 로컬 머신에 Git이 설치되어 있다고 가정하면 : 로컬에서 기존 소스의 루트 디렉토리로 변경하십시오. 터미널에서 다음 명령을 실행 하여 프로젝트 를 초기화하십시오 . git init git add --all git commit -m "Initial Commit" Bitbucket Server에 로그인하고 새 저장소 생성. .. 2020. 12. 16.
dd extrememanual.net/32779 2020. 12. 10.
반응형 이미지 이 글에서 우리는 반응형 이미지(Responsive images)의 — 해상도, 스크린 크기 등이 다른 수많은 기기들에서 정상적으로 표시되는 이미지 — 개념과 구현을 위해 HTML에서 제공하는 도구에 대해 배울 것이다. 반응형 이미지는, 이후에 여러분이 배워야 할 CSS 과정 중 반응형 웹 디자인의 일부이다. 전제조건:학습목표: HTML 기본 태그, 이미지를 웹페이지에 넣는 방법 웹사이트에서 반응형 이미지를 구현하기 위해 사용하는 srcset이나 요소 같은 기능의 사용법을 배운다. 반응형 이미지를 사용하는 이유? 일반적인 웹 사이트를 떠올려 보라. 헤더 이미지가 있을 것이고, 헤더 이후 본문에는 이미지가 몇 개 있을 것이다. 헤더 이미지는 헤더의 전체 가로 너비를 자치할 것이고, 본문 이미지는 본문 영역.. 2020. 12. 4.
워드프레스 contents 로그인 [ultimatemember form_id="33"] 공지사항 보도자료 묻고답하기 공지사항 [mb_latest name="board1" title="board1" list_size="5" style="" class="table table-striped"] 보도자료 [mb_latest name="board1" title="board1" list_size="5" style="" class="table table-striped"] 묻고답하기 [mb_latest name="board1" title="board1" list_size="5" style="" class="table table-striped"] 팝업존 2020. 12. 3.
워드프레스 body에 class 추가하기 2020. 12. 3.
워드프레스 body에 class 추가하기 2020. 12. 3.
워드프레스에 부트스트랩 추가하기 본인 테마 폴더에 bootstrap 폴더를 만든 후 boostrap.min.css, bootstrap.min.js 파일을 업로드 한다. function.php 파일을 열고 /*--------------------------------------------------------------------- * 커스터마이징 *--------------------------------------------------------------------- */ /* * 부트스트랩 등록 & 커스텀 스타일 시트 등록 */ function aca_styles() { wp_enqueue_style('bootstrap-stylesheet', get_stylesheet_directory_uri() . '/assets/vendor/.. 2020. 12. 3.
Ultimate Member 플러그인의 로그인, 회원 가입 페이지 만들기 워드프레스에서 회원제 사이트를 운영하려는 경우 Ultimate Member나 WP-Members와 같은 멤버십 플러그인을 사용할 수 있습니다. Ultimate Member 플러그인을 활성화하면 다음과 같은 페이지가 기본적으로 생성됩니다. Register (회원 가입) Login (로그인) User (사용자) Account (계정) Members (멤버) Logout (로그아웃) Password Reset (패스워드 초기화) 이러한 페이지는 Ultimate Member의 필수 요건이며 삭제할 수 없습니다. Ultimate Member를 설치하고 활성화하면 아래 그림과 같이 필수 페이지를 설치하도록 안내하는 알림이 표시됩니다. Create Pages (페이지 만들기)를 클릭하면 필요한 페이지가 생성되고 페이.. 2020. 12. 3.
Ultimate Member 플러그인의 로그인, 회원 가입 페이지 만들기 워드프레스에서 회원제 사이트를 운영하려는 경우 Ultimate Member나 WP-Members와 같은 멤버십 플러그인을 사용할 수 있습니다. Ultimate Member 플러그인을 활성화하면 다음과 같은 페이지가 기본적으로 생성됩니다. Register (회원 가입) Login (로그인) User (사용자) Account (계정) Members (멤버) Logout (로그아웃) Password Reset (패스워드 초기화) 이러한 페이지는 Ultimate Member의 필수 요건이며 삭제할 수 없습니다. Ultimate Member를 설치하고 활성화하면 아래 그림과 같이 필수 페이지를 설치하도록 안내하는 알림이 표시됩니다. Create Pages (페이지 만들기)를 클릭하면 필요한 페이지가 생성되고 페이.. 2020. 12. 3.
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 (오브젝트를 고정) 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/ 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.
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.