탐구하는 취르미

scrollTo(), scrollBy(), scrollIntoView() 메서드를 활용해 스크롤 조작하는 방법에 대해서 알아보겠습니다. scrollTo() 이동할 좌표값을 받아 절대적인 위치로 스크롤을 이동시킵니다. window.scrollTo(x좌표, y좌표); scrollTo() 예시 //문서의 상단으로 스크롤 이동 window.scrollTo(0, 0); //문서의 200px 위치로 스크롤 이동 window.scrollTo(0, 200); //문서의 300px, 500px 위치로 스크롤 이동 window.scrollTo(300, 500); scrollBy() 이동할 좌표값을 받아 현재 위치에서 상대적인 위치로 스크롤을 이동시킵니다. window.scrollBy(x좌표, y좌표); scrollBy()..

유튜브(Youtube) 영상을 비율 유지한 채 반응형으로 삽입하는 방법에 대해서 알아보겠습니다. iframe 코드 복사하기 데모 영상으로 Google Developers의 영상으로 연습해 보았습니다. 1. 공유 버튼을 클릭합니다. 2. 퍼가기 버튼을 클릭하세요 3. 코드 복사하기가 나옵니다. 복사하셔서 HTML에 붙여 넣기 하시면 됩니다. iframe 반응형 코드 작성하기 퍼가기 허용 체크 여부 영상 게시자가 퍼가기 허용 체크를 비활성화했을 경우 아래와 같이 동영상을 재생할 수 없음으로 보입니다. 해상도에 따라 비율을 구하는 방법 일반적으로 16:9 비율을 많이 사용합니다. 4:3 : 3/4*100 = 75% 16:9 : 9/16*100 = 56.25% 21:9 : 9/21*100 = 42.85% /* ..

웹 페이지에서 동영상 콘텐츠를 삽입할 때, HTML 태그 중 video와 iframe을 주로 사용합니다. 그러나 이 두 가지 태그는 어떤 차이점이 있을까요? 어떤 것이 더 적합한 선택일까요? 이번에는 video와 iframe의 특징과 장단점에 대해 살펴보겠습니다. video 태그 video 태그는 HTML5에서 새롭게 등장한 태그로, 웹 페이지에 비디오를 삽입할 때 사용됩니다. video 태그는 다양한 속성을 사용하여 비디오의 플레이백, 사이즈, 컨트롤 등을 조작할 수 있습니다. 문법 Your browser does not support the video tag. mp4와 webm 형식의 비디오 파일을 지원하며, 비디오가 로드되지 않을 경우 "Your browser does not support the ..

웹팩 주요 속성 5가지에 대해서 알아보도록 합시다. Webpack 이란? webpack 웹팩은 모듈 번들러입니다. 주요 목적은 브라우저에서 사용할 수 있도록 JavaScript 파일을 번들로 묶는 것이지만, 리소스나 애셋을 변환하고 번들링 또는 패키징할 수도 있습니다. webpack.kr Webpack은 모듈 번들러로, 웹 애플리케이션에서 필요한 여러 모듈을 하나의 파일로 번들링 하여 사용할 수 있도록 도와주는 도구입니다. Webpack을 사용하면 JavaScript, CSS, 이미지 등 다양한 파일을 하나의 번들 파일로 변환할 수 있습니다. 주요 속성으로는 entry, output, loaders, plugins, mode 등이 있습니다. 이를 조합하여 원하는 번들링 설정을 만들 수 있습니다. 웹팩을 ..

Notion Web Clipper 기능을 아시나요? 웹페이지를 저장하고 싶은데 한 데 모아서 관리하고 싶지 않으신가요? 노션 웹 클리퍼(Notion Web Clipper)가 이러한 서비스를 제공합니다. Notion Web Clipper는 웹 브라우저 확장 프로그램으로, 웹 페이지의 내용을 Notion 노트북에 쉽게 저장할 수 있게 해주는 도구입니다. 이 확장 프로그램을 사용하면 내가 저장하고 싶은 웹 페이지를 복사하여 Notion 페이지에 바로 붙여 넣을 수 있습니다. 쉽게 말해서 스크랩한다고 보시면 됩니다. 브라우저에서 제공하는 즐겨찾기 기능도 있지만, 노션 웹 클리퍼가 훨씬 이용하기 편하더라고요! 여러분도 유용하게 사용해 보시길 추천드립니다. 노션(Notion) 가입하기 https://www.noti..

npm(node package manage)는 cdn 방식으로 패키지를 가져와서 사용하는 것이 아니라, 모듈화 된 패키지를 node 환경에서 쉽고 간편하게 설치하고 버전 관리할 수 있는 자바스크립트 패키지 매니저입니다. npm의 기본 사용법에 대해서 알아보겠습니다. npmBring the best of open source to you, your team, and your company Relied upon by more than 17 million developers worldwide, npm is committed to making JavaScript development elegant, productive, and safe. The free npm Registry has become the cent..