study (13) 썸네일형 리스트형 [Vue.js] 컴포넌트 : 맨위로 버튼(Scroll Top Button) 만들기 회사에서 뷰로 작업중인데 맨위로 버튼 좀 만들어 달라고 하셔서 이것 저것 방법을 찾다가 구현완료 ! 포스팅으로 정보 공유하면 좋을 것 같아서 이렇게 기록하게 되었다. 생각보다 방법은 간단하다 ! [components] 폴더에 topButtonComponet.Vue를 하나 생성해준다. (파일명은 자유 ~.~) 1. 버튼은 a태그로 만들어도 되고, 취향껏 만들고 CSS로 디자인도 만들어준다. Top 2. 나는 v-show를 사용하여 스크롤 위치에 따라 나타나거나 숨겨지도록 함수를 구현했다. v-show는 true 일 때 display:block; false일 때 display:none; 시켜버린다. 스크롤 위치가 400 보다 커지면 그때 true를 반환, 400보다 작아지면 false를 반환한다. windo.. [javascript] onresize() 함수를 사용해 크기에 따라 변화하는 반응형 코딩하기 💡 오늘은 윈도우 창 크기에 따라 변화를 감지하는 onresize() 함수를 사용해 반응형 코딩하는 법을 알아보겠습니다. 👀이전 포스팅 https://yeonzzy.tistory.com/24?category=948652 [javaScript]삼항연산자로 간단하게 코딩하기 💡 오늘은 간단하고 간편하게 코딩할 수 있는 삼항연산자에 대해 알아보겠습니다. 👀이전 포스팅 https://yeonzzy.tistory.com/22 [jQuery]prop("checked") 와 is(":checked")의 차이는 무엇일까? 💡 오늘은 체크.. yeonzzy.tistory.com 반응형 이란? 반응형 웹 (Responsive Web)은 웹제작과 관련된 기술로 pc, 모바일, 태블릿 등 각각의 기기별로 홈페이지의 페이지가 .. [javaScript]삼항연산자로 간단하게 코딩하기 💡 오늘은 간단하고 간편하게 코딩할 수 있는 삼항연산자에 대해 알아보겠습니다. 👀관련 포스팅 https://yeonzzy.tistory.com/22 [jQuery]prop("checked") 와 is(":checked")의 차이는 무엇일까? 💡 오늘은 체크박스에서 체크여부를 확인하거나 컨트롤할 때 유용하게 쓰이는 prop("checked")와 is(":checked")의 차이점을 알아보겠습니다. 👀이전 포스팅 https://yeonzzy.tistory.com/21 [jQuery] attr()과 p.. yeonzzy.tistory.com 삼항연산자란 ? 삼항연산자 는 참(true) / 거짓(false) 에 따라 선택적으로 실행되는 조건문으로 주로 if문을 줄여 간단하게 만들고 싶을 때 사용한다. [삼항연산.. [jQuery]prop("checked") 와 is(":checked")의 차이는 무엇일까? 💡 오늘은 체크박스에서 체크여부를 확인하거나 컨트롤할 때 유용하게 쓰이는 prop("checked")와 is(":checked")의 차이점을 알아보겠습니다. 👀이전 포스팅 https://yeonzzy.tistory.com/21 [jQuery] attr()과 prop()의 차이점은 무엇일까? 💡 오늘은 attr()과 prop()의 차이점을 알아보겠습니다. attr() VS prop() jQuery 1.6.0 업데이트로 attr() 과 prop() 두 개로 나눠졌다. - attr() : HTML 속성 (Attribute) 취급 - prop() : javascrip.. yeonzzy.tistory.com prop("checked") VS is(":checked") jQuery 1.6.0 이상을 사용하는 경우 .. [jQuery] attr()과 prop()의 차이점은 무엇일까? 💡 오늘은 attr()과 prop()의 차이점을 알아보겠습니다. attr() VS prop() jQuery 1.6.0 업데이트로 attr() 과 prop() 두 개로 나눠졌다. - attr() : HTML 속성 (Attribute) 취급 - prop() : javascript 프로퍼티 (Property) 취급 ** 속성(Attribute) 은 HTML 요소에 대한 추가 정보를 전달하며 쌍으로 제공 ** 프로퍼티(Property) 는 HTML DOM트리의 특성으로 javaSctipt / jQuery를 통해 수정된 요소의 값을 가져오는데 사용하는 것이 좋음 // .html // .js // attr() var text = $("input[type=text]"); console.log(chk.attr("id".. [javascript] === / !== / == / != 의 다른 점은 무엇일까 ? 💡 오늘은 알아두면 좋은 개념인 동치연산자에 대해 알아보겠습니다. 동치연산자 : 동등 == / 부등 != / 일치 === / 불일치 !== 일치 / 불일치 연산자 : === / !== === 일치 또는 !== 불일치 연산은 타입(type) 과 값(value) 두 가지가 같아야 한다. number 타입인 경우, 같은 타입인 number와 같은 값인 5에 대해 호응! console.log(5 === 5)//true console.log(5 === '5')//false (number, string) console.log(5 !== '5')//ture (number, string) console.log(5 !== 5)//false 동등 / 부등 연산자 : == / != == 동등연산 또는 != 부등연산은 강제 .. [calendar] 달력을 이용하여 식권 사용/등록/발급하기(2) : 사용자화면 구현 📢 저번 포스팅에서 설계, 디자인했던 것을 토대로 플러그인을 가져와 사용자가 사용할 화면을 구현해보았습니다. 저는 아직 백엔드개발까지는 부족함이 많기 때문에 서버와 연동은 하지 않고 스크립트와 제이쿼리로 할 수 있는 만큼 진행해볼 예정입니다. 이전 포스팅 👀 https://yeonzzy.tistory.com/15 [calendar] 달력을 이용하여 식권 사용/등록/발급하기(1) : 설계 및 디자인 ✅기획의도 - 종이식권으로 발급되어져 아날로그한 방식으로 카운트 - 외부인에게 제공될 수 있음 - 관리자입장에서 어느 팀이, 어느 사원이 얼마나 사용했는지 확인하기 어려움 ✅목적 - monthly yeonzzy.tistory.com step.1 플러그인 다운로드 https://www.jqueryscript.ne.. [calendar] 달력을 이용하여 식권 사용/등록/발급하기(1) : 설계 및 디자인 ✅기획의도 - 종이식권으로 발급되어져 아날로그한 방식으로 카운트 - 외부인에게 제공될 수 있음 - 관리자입장에서 어느 팀이, 어느 사원이 얼마나 사용했는지 확인하기 어려움 ✅목적 - monthly 달력을 활용하여 회사업무에 도움이 될 수 있는 식권 사용 / 등록 / 발급 기능 구현하기 ✅필요기능 - 사용자 : 임원급을 제외한 모든 회사일원 식권 사용 등록 / 수정 / 삭제 (임시삭제 -> 관리자의 승인 이후 삭제 완료) - 관리자 : 각 팀의 팀장 식권발급 / 식권등록 / 사용자 식권 삭제처리 / 식권발급이력조회 / 개인별 사용내역 조회 ✅설계 ✅사전조사 - 라이브러리 (1) tui-calendar : 예쁘고 많은 기능이 있지만, 내가 원하는대로 다듬기 힘든 점이 있다. 여기서 제공하는 기능들로 충분하다.. 이전 1 2 다음
