코딩 (37) 썸네일형 리스트형 Vue.js 개발을 위한 주요 ES6 문법 https://joshua1988.github.io/web-development/translation/essential-es6-features-for-vuejs/ 매우 유용하다!! @ '', "" 보다는 `(백틱) 사용을 지향한다. 1) JS에서 HTML 코드 작성시 한줄로 쓰기 불편하지만 `은 줄간격을 띄어써도 가능하다. 2) +로 문자열과 변수를 조합시켜주어야하지만 템플릿 리터럴의 ${} 문법을 활용하여문자열을 쪼개지 않고도 동적으로 활용이 가능하다.EX) 'HELLO' + this.name + '!!' ☞ `HELLO ${name} !!` @ 화살표 함수 function(idx) {} 인자를 (idx) => {} 로 단축화 할수 있다.하지만 인스턴스 속성에서는 사용이 불가하다.EX) computed.. [VUE] computed 계산된 속성 @ WATCH + https://kr.vuejs.org/v2/guide/computed.html#computed-%EC%86%8D%EC%84%B1%EC%9D%98-setter-%ED%95%A8%EC%88%98 select box 커스텀 및 값 가져오기 [jquery] 모바일 video autoplay 관련 정리와 인앱 브라우저 체크 방법 이전에 PC 크롬에선 audio autoplay가 안되는 이슈가 있었다. 사용자 웹접근성을 기반으로 위배되지 않도록 제약이 걸리는 경우가 대다수인데, 특히나 모바일같은경우엔 더욱 철저하게 지켜진다. 모바일은 다양한 브라우저와 인앱 브라우저 등이 있다. 이때 video (mp4) 자동 재생에 관련해서 이슈가 굉장히 많은데, 유형은 크게 2가지로 나뉘어진다. 1. 영상지원이 안되는 경우 해당 비디오의 재생여부를 확인할 수 있는 javascript가 있다. HTMLMediaElement.canPlayType() 구문 섹션str = audioOrVideo .canPlayType ( mediaType ); 매개 변수 섹션미디어 종류DOMString미디어의 MIME 타입을 포함.반환 값 섹션String. 가능한 값.. [CSS] rotate 했을때 스크롤이 보이는 경우 프로젝트 진행중 팝업 닫기 버튼에서 transform rotate를 사용하였더니이따금씩 회전할때 바디 내부에 스크롤이 갑자기 생기는 경우가 있었다. (X,Y축 전부 생성) 1. 기본적으로 부모격에 overflow hidden을 주면 된다 생각했지만 해결이 되지않았다. 2. 해당 엘리먼트와 부모를 inline-block 요소로 잡아줬는데도 해결이 되지 않았다. 이후 검색을 통해 확인해보니 text-indent로 이 현상이 일어날 수 있어 해당 css를 삭제하였더니 해결! 이벤트 중첩 막기 (바인딩 해제) 제이쿼리를 사용하다보면 이벤트 부여로 on을 쓰는 경우가 많다.이전에는 bind를 사용하였으나, 이벤트 작성 후 바인딩 해제하기 편리하여 on으로 많이 사용하는 편. $(element).on('event', function(){~~~}); -> $(element).off('event'); off()로 쓰면 해당 엘리먼트 이벤트 전체 해제,off('event')로 쓰면 해당 이벤트만 해제 [jquery] scroll fullpage animation 스크롤 페이지 쉽게 놓칠수 있는 CSS Issue 이슈 해결 1. ie8~10 빈 공간의 a태그 활성화 안되는 문제블라블라 -> 위와 같은 구문은 IE(인터넷 익스플로러)에서 태그가 빈공간으로 인식하여 해당 영역이 활성화되지 못한다.따라서 두가지 해결방법이 있다.1. 태그 안에 태그를 넣어 영역을 채워준다.2. css에서 background image 를 사용하여 사이즈를 100% 주어 영역을 채워준다. 2. IE8에서 input 실행안되는 이슈input[type=""]에서 input 숨기는 css에visibility: hidden을 사용하게 되면 IE8에서 인식을 하지 못한다. input[type=""] {position: absolute; overflow: hidden; clip: rect(0 0 0 0); height: 1px; width: 1px; marg.. 자바스크립트 클래스를 정의하는 3가지 방법 자바스크립트 클래스를 정의하는 3가지 방법 소개 자바스크립트는 문법측면에서 아주 유연한 객체지향 언어이다. 이 글에서 객체를 정의하고 생성하는 3가지 방법을 찾을 수 있다. 이미 자주쓰는 방법이 있다 하더라도 다른사람들이 작성한 다른 방법들을 이해하는데 도움이 될것이다. 먼저 자바스크립트에는 클래스라는 개념이 없다는것을 알고 있어야한다. 함수는 클래스를 흉내내기 위하여 사용될 수 있지만 일반적으로 자바스크립트는 클래스가 없는 언어이다. 자바스크립트에서 모든것은 객체이다. 그리고 상속은 객체가 객체로 부터 상속을 받지, 다른 클래스가 있는 언어들처럼 클래스가 클래스로부터 상속받지 않는다. 1. 함수 이용하기 가장 많은 쓰는 방법중 하나다. 평범한 자바스크립트 함수를 만든 다음 new 키워드로 객체를 생성하.. [iOS] 모바일 사파리에서 전화번호 링크 비활성화하기 컨텐츠중 전화번호 텍스트 노출하는게 있었는데 iOS safari 브라우저 에서 텍스트가 보이지 않았다. 자세히 보니 전화번호 링크로 활성화되있는걸 확인할 수 있었다. (tel link) 대시(-)를 삭제하니 텍스트로 제대로 보여지지만 1234-1234 이런식으로 작성되어있으면 링크가 활성화 되는게 문제. 다행히 해결방법은 금방 찾을 수 있었다. head에 메타태그만 기입해주면 된다. 대부분 1234-1234 이렇게 작성하다보니 이런 이슈가 있는줄은 처음알았다. * 관련문서https://stackoverflow.com/questions/226131/how-to-disable-phone-number-linking-in-mobile-safari 이전 1 2 3 4 다음
