반응형 TechNical/Front End7 opener를 썼더니 cors가 발생하면 postmessage를 쓰자 nuxt에서 자식창에서 부모창의 스토어를 쓰는데 운영환경에서만 cors가 발생했다. await opener.$nuxt.$store.dispatch('setdata', this.res) 그럴수 있다고 해서 postmessage로 바꿈 자식창 닫을때 window.opener.postmessage(this.res, '*') 로 데이터 내려주고 부모창에 window.addeventlistner('message', this.fn, false) fn(event) { window.removeeventlistner('message', this.fn) console log(event.data) } 달아주고 데이터 받아서 처리함 2023. 7. 26. jquery) table column count jquery로 테이블의 컬럼 카운트를 구해보자. 동적으로 늘어나는 컬럼에 데이터를 입히려고 하다보니 이렇게 됐다. var colcnt = $('#tblid tr:first td').length; tr:first 를 해주지 않으면 로우 갯수만큼 컬럼 카운트를 하게 된다. 참고로 테이블에 컬럼추가는 이렇게 $('#tblid tr').append('hello'); jquery는 참 편리한거 같아. 2020. 7. 7. 다중 테이블셀 병합 jquery를 이용해서 내용이 동일한 테이블셀을 row 병합하는 함수를 만들어 보았다. 시작, 종료셀 위치를 지정해 줄 수 있다. 핸드폰으로 타이핑을 하는거라서 심히 노가다 및 오타가 남발될것 같다. 그나저나 이걸 왜하고 있지... function fn_mergerow() { var rows = $("listtbl>tbody").children(); var startpos = 1; var arrsize = 7; var prevstr = new Array(arrsize); var prevrow = new Array(arrsize); var prevcell = new Array(arrsize); var targetcell = new Array(arrsize); var tdstr = new Array(arrs.. 2020. 5. 8. Positioning 관련 [display]ㅇblock한줄을 혼자 다 먹는다높이, 넓이 지정을 할 수 있다. ㅇinline한줄에 여러개를 쓸 수 있다.높이, 넓이 조절이 안 된다. ㅇinline-block높이, 넓이를 지정하면서 한줄에 여러개를 쓸 수 있다. [position]ㅇstatic알아서 이전 포지션을 보고 그 다음 자리를 매꿔가면서 자기자리르 찾아간다. ㅇabsolute전후 안 따지고 기존 자리를 빼서 상위(부모)객체기준으로 자리를 옮겨간다.static인 속성의 위치가 이놈을 빼고 다시 자리 조정해서 바뀐다.자식을 absolute 를 쓰기 위해서는 부모객체가 static이면 안 먹는다.자식 때문에 부모를 바꾸어야 할 경우에는 뒤에께 안 바뀌기 위해서는absolute 보다는 relative로 바꿔주는게 기존 레이아웃을 보존.. 2017. 11. 15. HTML5관련 잡다 ㅇdatalist ㅇviewport- 모바일이 해상도가 지원이 되지 않는데 되는 것 처럼 보이려고(풀 브라우징) 이미지를 작게 만들어 버림- 모바일에서 이미지를 폰 해상도 사이즈에 자동으로 맞춰줌- 애플에서 시작했는데 범용으로 확산됨 2017. 11. 15. CSS관련 잡다 ㅇ!importantCSS는 원래 cascading이 되는데 위치에 따라서 덮어 쓰지만 !important 를 쓰면 최상위 선언한게 재정의 안 되서 안 바뀜 * 테스트 하려면 브라우저 캐쉬 비워가면서 테스트 해야 함 [style.css].box {border:3px solid #0f0 !important; margin:3px} [test.html] div3 div4 div5 my p ㅇ장치에 따라서 스타일 다르게 하기(스크린, 프린트 할 때 다르게 나옴) ㅇ단위- px는 장치마다 해상도에 따라 크기가 다르게 보일 수 있다.- %,em 이 상대적인 크기이므로 이 단위를 쓰는게 좋다. 원하는대로 잘 안 나오긴 한다.. ㅇText- text-overflow : clip | ellipsis -> 넘어갈 경우 ... 2017. 11. 15. canvas 라이브러리 참고사이트 - 도형, 글자, 차트http://dmitrybaranovskiy.github.io/raphael/- 속도계같은 게이지 구현http://bernii.github.io/gauge.js/- 차트관련http://www.flotcharts.org/http://www.flotcharts.org/flot/examples/realtime/index.html -> 이게 멋지다. CPU 등 리소스 사용량 같은거 실시간 차트 2017. 11. 15. 이전 1 다음 반응형