Web

[CSS] 벤더 프리픽스

벤더 프리픽스 CSS3 표준으로 확정되기 이전 브라우저 개발사가 실험적으로 제공하는 기능을 사용하기 위해서는 벤더 프리픽스를 사용하여야 한다. BrowserVendor PrefixIE or Edge-ms-Chrome-webkit-Firefox-moz-Safari-webkit-Opera-o-iOS Safari-webkit-Android Browser-webkit-Chrome for Android-webkit- Prefix Free 라이브러리 브라우저는 거의 매달 업데이트가 이루어지고 있어 불필요한 벤더 프리픽스를 사용할 가능성이 크다. 사용하지 않아도 되는 벤더 프리픽스를 사용하는 것은 성능에도 영향을 주기 때문에 Prefix Free 라이브러리(http://leaverou.github.io/prefixf..

[CANVAS] 애니메이션 그리기

★ 사각형을 x축으로 왼쪽에서 오른쪽으로 움직이기★ https://jsfiddle.net/Kimara/w6rjhLqm/10/ ★두 개의 사각형을 만들고 애니메이션을 멈추게 하기★ https://jsfiddle.net/Kimara/gtfskc92/7/ ★백그라운드 이미지 애니메이션 만들기★ https://jsfiddle.net/Kimara/dLceafkz/11/ ★눈내리기★ https://jsfiddle.net/Kimara/2ksjgovb/15/

[CANVAS] 클릭한 곳에 사각형 그리기

https://jsfiddle.net/Kimara/Lo6f4xgh/21/ // HTML // 스크립트 var canvas=$('#myCanvas').get(0); var ctx=canvas.getContext('2d'); $('#myCanvas').click(function(e){ var mouseX = e.clientX - ctx.canvas.offsetLeft; var mouseY = e.clientY - ctx.canvas.offsetTop; ctx.fillStyle="red"; // 마우스 클릭한 곳에서 사각형의 중심이 되어서 생성이 된다. ctx.fillRect(mouseX-10, mouseY-10,20,20) //console.log(mouseX+','+mouseY); });

[제이쿼리] 제이쿼리 selector 정리

@DOM Selectors $('#id')=>document.getElementById('id') // IE 5.5+=>document.querySelector('#id') // IE 8+*두 메서드 모두 단일 요소를 반환합니다. getElementById는 querySelector를 사용하는 것보다 효율적입니다. $('.class')=>document.getElementsByClassName('class')[i] // IE 9+=>document.querySelectorAll('.class')[i] // IE 8+*첫 번째 메서드는 HTMLCollection을 반환하며 두 가지 중에서 가장 효율적입니다. querySelectorAll은 항상 NodeList를 반환합니다. $('tag')=>documen..

[VUE] vue.js 시작하기

https://jsfiddle.net/Kimara/ka8cbyxm/ model : DB / 데이터 view : HTML5, CSS3, JavaScript ... controller : 중간자 MVC ==> MVVM json과 node.js(rest api) 의 발전으로 인해 FED의 영역이 늘어남 -프레임워크 : 앵귤러 -라이브러리 : react, vue(vue 사이트에서는 프레임워크라고 말함) 라이브러리 에서 가상 DOM을 만들어 부하량을 줄임(스크립트가 알아서 변경되는 부분만 찾아서 바꿔줌) ecma script6 - 바벨, 웹팩 - CLI(dos) - let, const - vue.js를 쓸 때 ecma script6와 호환이 가능하지만 ecma6가 아직 브라우저를 타기 때문에 vue만 따로 공부 ..

[CSS] vertical-align

vertical-align은 오로지 inline 또는 table-cell box에서만 수직 정렬을 지정한다. 출처 : https://developer.mozilla.org/ko/docs/Web/CSS/vertical-align

[플러그인] bpopup.js

http://dinbror.dk/bpopup/ 팝업 플러그인이 뭐가 있을까 검색하다가 알게 된 제이쿼리 bpopup커스텀이 쉽고 api설정도 간편하다. 하지만 기존 팝업안에서 버튼 클릭 시 기존 팝업은 사라지고 다른 팝업이 생겼으면 하는데그런 디테일을 api로 잡아주기엔 너무 복잡하고 그냥 제이쿼리로 hide/show 하는 것보다 귀찮아진다. 간단하게 하나의 팝업 안에 유튜브, 슬라이드 같은 걸 넣을때는 괜찮은 것 같다. bg도 바로 정할 수 있고, bg 클릭 시 팝업이 닫히거나, 따로 클래스를 줘서 팝업을 닫게 하거나 등등..활용도가 매우 높은 팝업 플러그인이다. 굿 익스 하위 버전에서도 잘 돌아간다~~

파비콘

파비콘은 웹페이지 상단 태베 보여지는 아이콘이다. 이 아이콘은 즐겨찾기 등록시 대표 아이콘으로도 사용된다. 웹사이트를 대표하는 로고(logo)의 개념과 비슷하다. 파비콘은 ico 파일을 쓰지만 요즘엔 png 파일도 지원하고 있어서 나는 png 파일을 주로 쓴다. 즐겨찾기 등록시(주로 모바일) 생기는 아이콘의 화질에 많은 영향을 미치기 때문이다. PNG 파비콘을 사용시에 브라우저는 어떠한 파비콘을 사용할지 어떻게 결정하는가? Firefox와 Safari는 마지막에 제공되는 파비콘을 사용한다. 맥(Mac) 용 Chrome은 ICO 포맷의 파비콘이 아니라면 32x32 파비콘을 사용한다. 윈도우즈(Windows) 용 Chrome은 16x16이 먼저 선언되지 않는다면 ICO 파비콘이 사용된다. 상기 옵션 중 아무..

[CSS] css기본 규칙들

*내가 놓치고 있는 CSS 기본 규칙들.. CSS 우선순위 CSS는 기본적으로 선언된 순서에 따라 적용되지만 각종 선택자와 삽입 위치에 따라 우선순위가 달라질 수 있다. 선택자 우선순위 !important > 인라인 스타일 > 아이디 선택자 > 클래스/속성/가상 선택자 > 태그 선택자 > 전체 선택자 경쟁 규칙이 같은 선택자 그룹에 속해 있다면 선택자의 종류와 수에 따라 우선순위가 결정된다. 즉 높은 우선순위의 선택자를 더 많이 사용한 규칙이 이긴다. 삽입 위치 우선순위 1. 요소안의 style 요소2. 요소안의 @import 문3. 요소로 연결된 CSS 파일4. 요소로 연결한 CSS 파일 안의 @import 문5. 최종 사용자가 연결한 CSS 파일6. 브라우저의 기본 스타일시트 예외적으로, 최종 사용자..

[CSS] display:flex

1. 플렉서블 박스 = 부모 박스- 부모 박스에 플렉서블 박스에서 새로 생긴 특정 속성값을 적용해야 가변적인 박스로 작동 2. 플렉서블 박스의 자식 박스 = 플렉스 아이템- 자식 박스가 속성값에 의해 작동하는 순간부터 플렉스 아이템이라 부른다 3. 플렉서블 박스의 축 - 주축과 교차축- 주축 = 중심이 되는 축- 주축이 가로 -> 왼쪽에서 오른쪽으로 배치- 주축이 세로 -> 위에서 아래로 배치- 축의 방향 - 축의 시작과 끝이 존재하는 이유는 플렉스 아이쳄이 처음 배치되는 위치(시작점)와 플렉스 아이템이 마지막에 배치될 위치(끝점)가 필요하기 때문 ( 속성 값은 플렉서블 박스에 적용한다. ) ※ 익스플로러 11 이상에서 작동. 안드로이드 4.4이상에서 자동※ 플렉서블 박스는 브라우저 접두사를 사용해야 한..