탐구하는 취르미

window.screen.width, window.screen.height, window.outerWidth, window.outerHeight, window.innerWidth, window.innerHeight, document.documentElement.clientWidth, document.documentElement.clientHeight 이러한 속성들은 모두 창의 크기를 나타내지만, 반환하는 값이 서로 다르므로 사용하는 상황에 따라 적합한 속성을 선택해야 합니다. 반응형 웹 페이지를 구현할 때, 브라우저 창의 크기에 따라 다른 레이아웃을 적용해야 하거나 스크롤 이벤트와 함께 화면에 보이는 영역에 따라 다른 기능을 구현할 때 알아야 할 주요한 속성들입니다. 어떻게 다른지 알아봅시다. windo..

Microsoft Designer는 간편하고 직관적인 인터페이스를 갖춘 AI(인공지능) 생성 디자인 툴입니다. 사용자가 전문적인 디자인 지식 없이도 손쉽게 다양한 디자인 작업을 할 수 있도록 다양한 템플릿과 기능을 제공합니다. 디자인 작업뿐만 아니라 로고, 브랜딩, 프레젠테이션, 소셜 미디어 등 다양한 용도로 사용할 수 있습니다. 어떻게 쉽게 디자인하는지 알아봅시다. Microsoft Designer 사이트 바로가기 Microsoft Designer - Stunning designs in a flash A graphic design app that helps you create professional quality social media posts, invitations, digital postcards..

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 등이 있습니다. 이를 조합하여 원하는 번들링 설정을 만들 수 있습니다. 웹팩을 ..