Web

    [VUE] 클래스와 스타일 바인딩

    클래스와 스타일 바인딩 HTML 클래스 바인딩하기 #객체 구문클래스를 동적으로 토글하기 위해 v-bind:class 에 객체를 전달할 수 있다.일반 class 속성과 공존할 수 있다.예제보기 #배열 구문배열을 v-bind:class 에 전달하여 클래스 목록을 지정할 수 있다.예제보기 목록에 있는 클래스를 조건부 토글 하려면 삼항 연산자를 이용할 수 있다. 이는 항상 errorClass를 적용하고 isActive 가 true 일 때만 activeClass를 적용한다.예제보기 그러나 여러 조건부 클래스가 있는 경우 장황해질 수 있어서 배열 구문 내에서 객체 구문을 사용할 수 있다.예제보기 #컴포넌트와 함께 사용하는 방법사용자 정의 컴포넌트로 class 속성을 사용하면, 클래스가 컴포넌트의 루트 엘리먼트에 추..

    [VUE] computed와 watch

    computed와 watch computed 속성 템플릿 내에 너무 많은 연산을 넣으면 코드가 비대해지고 유지보수가 어렵다. #기본예제예제보기 예제를 보면, vm.reverseText의 값은 항상 vm.text의 값에 의존한다. 일반 속성처럼 computed 속성에도 템플릿에서 데이터 바인딜 할 수 있다. Vue는 vm.reverseText가 vm.text에 의존하는 것을 알고 있기 때문에 vm.text가 바뀔 때 vm.reverseText에 의존하는 바인딩을 모두 업데이트 할 것이다. 그리고 가장 중요한 것은 우리가 선언적으로 의존 관계를 만들었다는 것이다. #computed 속성의 캐싱 vs 메소드computed 속성 대신 메소드와 같은 함수를 정의할 수도 있다. 최종 결과에 대해 두 가지 접근 방식..

    [VUE] 템플릿 문법

    템플릿 문법 보간법[각주:1](Interpolation) #문자열 데이터 바인딩의 가장 기본 형태는 "mustache"구문(이중 중괄호.. 수염 닮아서?)을 사용한 텍스트 보간이다. v-once 디렉티브를 사용하여 데이터 변경 시 업데이트 되지 않는 일회성 보간을 수행 할 수 있지만, 같은 노드의 바인딩에도 영향을 미친다는 점을 유의해야 한다. 예제보기 #원시 HTML {{}}는 HTML이 아닌 일반 텍스트로 데이터를 해석한다. 실제 HTML을 출력하려면 v-html 디렉티브를 사용해야 한다. 예제보기 #속성 {{}}는 HTML 속성(인라인)에서 사용할 수 없다. 쓰고 싶으면 v-bind 디렉티브를 사용. #JavaScript 표현식 사용 Vue.js는 모든 데이터 바인딩 내에서 JavaScript 표현..

    [bpopup] 모바일 bpopup에서 모바일 키패드 이동 클릭시 팝업 꺼지는 이슈

    모바일웹에서 bpopup을 썼는데 input에 키패드 이동을 클릭하면 팝업이 꺼져버린다.팝업이 꺼지는게 닫기버튼을 누른것도 아니고 그렇다고 esc된 것도 아닌 엔터!를 누른 효과였다.그런데 이상한게 다른 페이지에서 이동을 클릭하면 아무렇지 않았다.이슈가 난 팝업내의 input은 input=text와 데이터피커가 연결되어있는 부분이었다. 이런 이슈가 난 이유는 알 수 없지만 어디서 이슈가 생기는지는 알았으니 직관적으로 해결 할 수 밖에.. $(document).on('keydown','#BABY_NM',function (key) { if(key.keyCode == 13){//13 == enter event.preventDefault(); if( $("#BABY_NM").val() != "" ){ $('#B..

    [제이쿼리] 이벤트

    이벤트 트리거 키보드 이벤트 keydown keypress keyup 브라우저 이벤트 error resize scroll 마우스 이벤트 click contextmenu //오른쪽 마우스 이벤트 dbclick hover mousedown mouseenter mouseleave mousemove mouseout mouseover mouseup toggle 폼 이벤트 blur change focus focusin focusout select submit 문서 이벤트 load ready unload bind => on unbind => off

    [SCSS] SCSS 기본 문법 정리

    CSS작성(생성)을 위한 작고 가벼운 언어이고, SASS 와 SCSS가 있다. SASS : SCSS와 작성하는데 있어서 구조적 차이가 있고 작성이 번거롭고 복잡할 수 있다. SCSS : 기존에 알던 CSS와 유사하게 작성할 수 있기 때문에 친근하게 느껴져 배우기가 쉽다. 이 둘은 같은 계열의 언어이지만 요즘은 SCSS를 많이 쓴다. SCSS => SASS 컴파일러 => CSS변환 Sass 컴파일러 방식 - VS Code + Live Sass Compiler - Compiler1 Ruby Gem 이용 - Compiler2 Node.js NPM 이용 VScode를 깔고 간단한 셋팅 뒤 sass관련 확장 프로그램을 다운받는다. sass, sass compiler, sass lint - scss 파일을 생성하고..

    [자바스크립트] Javascript를 사용하여 현재 페이지 새로 고침하기

    출처 : https://www.thewordcracker.com/jquery-examples/refresh-current-page-using-javascript/ 여러 가지 방법을 사용하여 현재 페이지를 새로 고침(리로드)할 수 있습니다.window.location.reload() 사용:history.go() 사용:window.location.href=window.location.href 사용:참고로 페이지가 자동으로 새로 고침되도록 하려면 다음과 같은 meta 태그를 head 태그 사이에 추가하면 됩니다.그러면 15초마다 페이지가 자동 새로 고침(리로드)됩니다. 가령 주식 정보 등을 일정 시간 동안 갱신해야 하는 경우에 이 방법을 사용할 수 있습니다.jQuery로 페이지를 리로드(새로 고침)하려는 경우..

    [브라우저] 로컬스토리지, 세션 스토리지 , 캐시

    로컬스토리지, 세션 스토리지 , 캐시 로컬 스토리지(localStorage)와 세션 스토리지(sessionStorage)는 HTML5에서 추가된 저장소이다. 간단한 키와 값을 저장할 수 있다.( 키 : 밸류 ) 이 둘의 차이점은 데이터의 영구성이다. 로컬 스토리지 : 사용자가 지우지 않는 이상 계속 브라우저에 남아있다.(단, 캐시삭제하면 제거된다.) 세션 스토리지 : 윈도우나 브라우저 탭을 닫을 경우 제거된다. *단, 비밀번호 같은 중요한 정보는 저장하면 안된다. 클라이언트에 저장하는 것이기 때문에 털릴 가능성 100% 쿠키 : 만료 기한이 있는 키-값 저장소이다. 4kb 용량 제한이 있고, 매 서버 요청마다 서버로 쿠키가 같이 전송된다. 두 스토리지는 모두 window 객체()안에 들어있다. 스토리지 ..

    [CSS] 웹폰트

    웹폰트 웹폰트는 사용자가 웹페이지에서 요청한 순간 CSS에 기술된 필요 폰트가 서버에서 클라이언트로 전송된다. 좀 더 구체적으로 말하면 매번 다운로드 되는 것은 아니고 클라이언트 로컬에 해당 폰트가 존재하지 않을 경우 전송된다. 속도 : 로컬 폰트 > CDN > 서버 폰트 1. CDN(Conent Delivery Network) 링크 방식 @import url(http://fonts.googleapis.com/earlyaccess/nanumgothic.css);* { font-family: 'Nanum Gothic', sans-serif; } 2. 서버 폰트 로딩 방식-> CDN 링크를 통해 여러 개의 폰트를 사용한다면 로딩이 오래 걸린다. 또한 CDN링크를 제공하지 않는 폰트는 사용할 방법이 없다. 이..

    [CSS] animation03

    CSS3 ANIMATION 일반적으로 CSS 애니메이션을 사용하며 기존의 JavaScript 기반 애니메이션 실행과 비교하여 더 나은 렌더링 성능을 제공한다고 알려져 있다. 그러나 경우에 따라서는 JavaScript를 사용하는 것이 나을 수도 있다. jQuery 등의 애니메이션 기능은 CSS보다 간편하게 애니메이션 효과를 가능케 한다. 비교적 작은 효과나 CSS만으로도 충분한 효과를 볼 수 있는 것은 CSS를 사용한다. 예를 들어 요소의 width변경 애니메이션은 JavaScript를 사용하는 것보다 훨씬 간편하며 효과적이다.세밀한 제어를 위해서는 JavaScript 사용이 바람직하다. 예를 들어 바운스, 중지, 일시 중지, 도감기 또는 감속과 같은 고급 효과는 JavaScript가 훨씬 유용하다. CS..