전체 글 (56) 썸네일형 리스트형 파워포인트 붙여넣기할때 서식 없이 텍스트만 붙여넣기 팁 인터넷 브라우저에서 텍스트를 복사한 뒤파워포인트에 붙여넣기를 하면인터넷 화면의 서식이 파워포인트에 적용되는 불편함이 있는데,팝업 메뉴 클릭 -> '텍스트만 붙여넣기' 클릭 하는 작업을 일일이 마우스로 하는 불편한 작업을 해야 합니다. 이럴때는 마우스로 클릭하는것 보다컨트롤, T 키를 순차적으로 입력하면마우스로 클릭하지 않아도 됩니다.(컨트롤 T 를 동시에 누르는 것이 아니고 컨트롤 누른 다음 T 입력) 컨트롤 V ➡️ 컨트롤 ➡️ T를 순서대로 입력하세요. 다른 방법으로는 붙여넣기 하려는 텍스트를 메모장에 붙여넣기 한 다음,메모장에서 복사 ➡️ 붙여넣기를 하면서식이 변경되지 않고 붙여넣기가 가능합니다. 자바스크립트 간단한 팝업창 만들기 - 확인 취소 버튼 클릭시 각자 기능 실행 휘뚜루마뚜루 쓰기 좋은 자바스크립트 팝업을 만들어봤습니다.메시지 내용과 확인 / 취소 버튼이 있고확인 / 취소 버튼을 클릭하면클릭한 버튼에 따라서 다른 기능을 실행할 수 있습니다. 아래는 그 결과입니다. 아래는 전체 코드 입니다.(별건 없습니다.) HTMLclick Scriptclass PopupComponent { constructor(message) { const popup = document.createElement('div'); this.popup = popup; popup.classList.add('popup'); const container = document.createElement('div'); container.classList.add('contain.. 카운트 숫자 (setInterval 아님) 숫자가 0부터 지정된 숫자까지 증가하는 스크립트 입니다.setInterval 을 사용하지 않고requestAnimationFrame() 을 사용한 방법입니다. requestAnimationFrame() 은 웹페이지에서 애니메이션을 만드는 데 최적화된 자바스크립트 API 입니다.응용하면 숫자 증가 뿐 아니라 UI 애니메이션에도 활용할 수 있습니다. 아래는 그 결과입니다.(숫자가 이미 60 이라면 새로고침을 해서 확인해 보기 바랍니다.) requestAnimationFrame() 을 사용하면 브라우저가 매 프레임 마다 해당 기능을 실행하게 됩니다. 아래는 전체 코드 입니다. (광고 클릭은 제작에 큰 힘이 됩니다.) 지도 이미지에 hover 효과 (자바스크립트 아님) 작업을 하다보면 가끔 지도를 활용한 UI 작업들을 많이 하게 됩니다.그래서 이번에는지도 위에 마우스를 올리면 해당 지역만 색이 바뀌도록 작업을 해봤습니다.자바스크립트 없이 CSS 만으로 가능합니다.아래는 결과입니다. 지도 SVG 파일이 필요하긴 합니다.(인터넷을 검색하거나 디자이너에게 부탁해서 SVG 파일을 받읍시다.) 핵심은 생각보다 간단한 CSS :hover 입니다.#myMap path{ fill: blue; cursor: pointer;}#myMap path:hover{ fill: red;} 아래는 전체 코드 입니다. (광고 클릭은 제작에 큰 힘이 됩니다.) HTML과 CSS 만으로 펼쳐지는 메뉴 만들기 (자바스크립트 안씀) CSS의 hover와 transition 속성을 활용해서마우스를 올리면 차르르 펼쳐지는 메뉴를 만들어봤습니다. 아래는 그 결과입니다.(result 탭으로 이동해서 마우스를 올려 보세요)"> html의 구조를 잘 짜고 CSS의 기능을 활용하면자바스크립트를 사용하지 않고 이정도의 기능은 구현이 가능합니다.(모바일용 으로는 어렵겠군요) (광고 클릭은 제작에 큰 힘이 됩니다.) "> 자바스크립트 클릭하면 폭죽 터지는 UI (그냥 만들어봄) 그냥 만들어봤습니다.아래 영역을 클릭하면 폭죽(?) 색종이가 터집니다. 이곳을 클릭해 보세요!">이곳을 클릭해 보세요!(제 컴퓨터에서는 잘 터지는데 안터지면 댓글 남겨주세요) 아래는 전체 코드입니다.(lottie 애니메이션 활용) (광고 클릭은 제작에 큰 도움이 됩니다.) "> 자바스크립트로 차르르 올라가는 숫자 표현하기 (오도미터 카운터) 퍼블리싱 작업 중 포인트가 차르르 올라가는 UI가 필요해서 만들어봤습니다.다른 좋은 방법들도 많이 있을거라 생각됩니다.숫자 값만 넘겨주면 천단위 기호를 포함하여 숫자가 차르르 올라갑니다. 아래는 그 결과입니다."> SCSS를 사용해서 $font-size만 입력하면 쉽게 사용할 수 있습니다. 먼저 숫자가 표시될 div 를 변수에 담아주시고const container = document.querySelector('#container'); new OdometerCounter(숫자, div이름); 의 형식으로 실행하면 됩니다.const testCounter = new OdometerCounter(1234567890, container); 아래는 전체 코드입니다. 자바스크립트class OdometerCount.. 자바스크립트 간단한 코드로 현재 시간 출력하기 (옵션 다양함) 자바스크립트로 현재 시간을 출력하는 방법 중 가장 일반적인 방법인 Date 객체를 사용하는 것 말고지역 설정에 맞는 시간 형식으로 현재 시간을 출력할 수 있습니다. 아래가 그 결과입니다."> 자세한 설명은 이곳에https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat Intl.DateTimeFormat - JavaScript | MDNIntl.DateTimeFormat 은 언어에 맞는 날짜 및 시간 서식을 적용하기 위한 객체입니다.developer.mozilla.org 아래는 전체 코드입니다.const KoreanFormatter = new Intl.DateTimeFormat('ko-.. 이전 1 2 3 4 ··· 7 다음
