All

[VUE] 스크롤 이벤트 주기

이벤트를 주고 싶은 section의 offsetTop값이 스크롤값보다 같거나 작으면 이벤트가 실행되게 해야한다. 평소에 제이쿼리로 쉽게 하던 작업인데 이걸 뷰로 풀어야 해서 어떻게 해야하나 고민했다. 컴포넌트를 평소대로 작업하고, 이들을 감싸는 index에서 스크롤 이벤트를 작업한다. 1. 컴포넌트 작업 공통 스타일은 리스트아이템으로 작업 {{listItem.ttl1}} {{listItem.ttl2}} {{listItem.txt1}} {{listItem.txt2}} {{listItem.txt3}} 2. 컴포넌트 작업 레이아웃은 같은데 스타일만 달라서 데이터로 넘기기 바뀌는 내용만 컴포넌트 index에서 데이터로 넘겨주기 watch는 Vue 인스턴스의 특정 프로퍼티가 변경될때 지정한 콜백함수가 실행되는 기..

[이슈노트] iOS 이슈 모음 #4 (tel)

ios 사파리에서010-1234-5678 걸지 않은 넘버 텍스트에 자동으로 전화 연결이 걸린다.그러면서 내가 적용하지 않은 스타일이 먹히면서 스타일이 어긋날때가 있다. ios 사파리에서는 자기가 봤을 때 전화번호 같으면 바로 스타일과 기능을 강제로 추가하나보다.어쩔때는 좋지만 어쩔때는 필요없는 기능. 그래서 그때는 메타태그에 아래를 추가해주면 된다.

[VUE] vue.js 에서 swiper 사용하기

친절한 분이 IE에서 동작하는 팁을 알려줬다😊 감사한 마음에 캡쳐! 다른 분들도 참고 하면 좋을 것 같다. 슬라이드 플러그인 중에서 swiper를 자주 쓰고 좋아하는데 이걸 vue에서도 쓸 수 있나 검색해봤더니 vue-awesome-swiper라고 만들어져 있어서 그걸 쓰기로 했다. 1. vue cli 작업 환경에서 swiper 패키지를 다운로드한다. 이때, swiper 6 이상 버전은 vue3에 최적화되어 있는데, 현재(2021.03 기준)로 vue3는 아직 버그가 많다고 해서 vue 2.x 버전에서 사용할 수 있는 swiper 5.3.7을 다운로드한다. yarn add 'swiper@5.3.7' --save-dev yarn add 'vue-awesome-swiper' --save-dev 2. swip..

[자바스크립트] 원시타입 참조타입

자바스크립트의 자료형에는 두가지 형태가 존재한다. 원시타입: 숫자(Number), 문자열(String), 논리형(Boolean), Null, Undefined, Symbol(ES6에서 추가) 참조타입: 함수(Function), 배열(Array), 객체(Object) 이 둘의 차이점은 참조타입의 경우 원본이 바뀌면 복사본도 똑같이 바뀌지만, 원시타입은 그렇지 않다. - 원시타입은 값을 복제하기 때문에, 원본이 바뀌어도 복제된 값은 바뀌지 않는다. - 원본 값과 복제된 값은 별개의 값이된다. - obj1의 값을 변경하니 obj2의 값도 자동으로 바뀐다. - 참조타입은 값을 참조 하기 때문에 원본값이 바뀌면 참조하는 값도 바뀐다. - 참조 값은 별개의 값이 아니라 원본의 값을 향하고 있는 것이다.

[퍼블리싱] 퍼블리셔

평소에 잘못알고 있었던것들을 바로 잡아보자. / 웹 퍼블리셔 디자이너가 기획에 맞게 구성한 화면 디자인 파일(psd)을 받아 웹 브라우저에서 동일하게 보일 수 있게 구성합니다. 하지만 단순히 디자인 파일대로 웹 브라우저에 옮기는 일만 하는 것은 아닙니다. 구조화된 내용 으로 웹 페이지를 만들어 웹 브라우저에게 우리가 만드는 사이트가 무엇을 전달하고자 하는지 정보를 전달 하는 일을 합니다. 웹 퍼블리셔는 콘텐츠를 다루는 사람이다. 웹 페이지에서 전달하려는 내용을 제대로 해석하고 그 콘텐츠 해석에 맞게 HTML,CSS,자바스크립트를 작성하는 콘텐츠 전문가이다. 웹 개발자 웹 사이트 뒤쪽에 있는 여러 시스템(서버, 데이터베이스)을 다루고 개발하는 사람입니다. 서버 구성이나 데이터 처리 등 눈에 보이지는 않지만..

[git hub] 소스트리에서 두개의 계정 사용하기

2022-11-09 회사 계정(git lab)으로 소스트리 사용중 개인 계정(git hub)으로 소스트리 연결해서 사용하고 싶다. 뉴 탭을 선택 후 계정추가를 클릭 하면 팝업이 뜨는데 거기서 내 계정에 맞는 호스팅 선택하고, 인증 방식을 선택 후 확인한다. OAuth : 계정 확인 인터넷 창이 떠서 확인 Basic : 아이디/비밀번호 로그인 그러면 우측에 선택된 계정의 저장소가 보이는데 그 중 선택해서 클론받고 ~ 그 후부터는 똑같다. 회사 프로젝트에서 쓰는 gitlab 계정이 소스트리에 연결되어있다. 개인 계정(git hub)을 소스트리에 추가하고 싶다. 소스트리에서 추가하는 계정을 push 할때 로그온을 확인하라는 에러메세지가 뜬다. 로그인을 새롭게 해도 자꾸 로그인을 다시 하라는 메세지가 뜬다. 검..

[CSS] 모서리 자르기

HTML 모서리 한개 BUTTON BUTTON BUTTON BUTTON 모서리 두개 BUTTON BUTTON 모서리 여러개 BUTTON CSS body { background: #ddd; } .button { width: 150px; line-height: 40px; text-align: center; margin-bottom: 20px; } .top-left { background: linear-gradient(135deg, transparent 10px, #58a 0); } .top-right { background: linear-gradient(-135deg, transparent 10px, #58a 0); } .bottom-right { background: linear-gradient(-45de..

[UI] input checkbox 체크 ui + 모두 선택, 하나만 선택 ui

//개인정보 모두 체크 $('#f_all').on('click', function () { let chkAll = $('input[type="checkbox"]'); if ($("#f_all").prop("checked")) { chkAll.prop("checked", true); } else { chkAll.prop("checked", false); } }); //개인정보 부분 체크 $('.chk input[type="checkbox"]').on('click', function () { $('#f_all').prop('checked', false); let chk = $('.chk').length; let chkInput = $('.chk input[type="checkbox"]:checked').le..

[UI] setTimeout과 clearTimeout 활용

let timer; function timeUp() { timer = setTimeout(timePopOpen, 30000); //30초 } function stopTimeUp() { clearTimeout(timer); } //시간 초과 팝업 오픈 function timePopOpen() { $('.pop-bg, .pop-timeup').fadeIn(); } timeUp(); //타임오버

[UI] 제이쿼리 UI 사용해서 직소퍼즐 만들기

힌트보기 /* ------------------------- 퍼즐 맞추기 -------------------------*/ //랜덤 const piece = $('.puzzle-piece span'); const pieceOdd = $('.puzzle-piece span:nth-child(odd)'); const pieceEven = $('.puzzle-piece span:nth-child(even)'); const width = $('.puzzle-piece').width() - 180; const height = $('.puzzle-piece').height() - 150; for (let i = 0; i < piece.length; i++) { let topPosition = Math.floor(M..