Develop/Web19 vanilla js를 이용하여 bottom sticky button 만들기 이번 포스팅에서는 Vanilla js를 활용하여 하단 Sticky Button을 만들어보겠다. 목표: 스크롤을 특정 구간 이상으로 내릴 때 Sticky버튼이 보이고, 올릴 때 사라지도록 만들기 1. 새로운 엘리먼트 동적으로 추가해보기 html에 미리 코드를 만들어 놓고 실행할 수도 있지만, javascript를 이용해서 추가하는 경우를 만들어 보았다. sticky버튼을 감싸고 있는 컨테이너로 div를 만들었고, 텍스트를 위한 p 태그를 만들었다. 이후 sticky_container에 스타일을 지정해주기 위해 sticky_container라는 class이름을 주었다. not_show라는 것은 뒤에 나오겠지만, sticky 버튼을 숨겼다가 보여지게 하기 위함이다. 2. 버튼에 스크롤 이벤트 달기 사용자가 s.. 2021. 2. 26. javascript 웹 페이지 크기 알아내기 웹 개발을 하며, 화면 크기가 필요한 때가 있다. 브라우저의 크기를 알아내거나, 브라우저 내부의 화면 크기를 알아내고 싶은 경우 어떻게 해야할까? 오늘 알아볼 속성은 innerWidth, innerHeight, outerWidth, outerHeight이다. 각각 의미하는 바는 위 그림과 같다. 이를 구하는 방법은 window.innerWidth와 같이 해주면 된다. console.log(window.innerWidth); console.log(window.innerHeight); console.log(window.outerWidth); console.log(window.outerHeight); 2021. 2. 26. javascript 숫자 3자리마다 ,(콤마)찍어 구분하기 이는 정규식으로 간단하게 구현이 가능하다. function numWithComma(num) { return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ","); } var cost = 100000; console.log(numWithComma(cost)); 위의 결과값은 100,000이 나오게 된다. 2021. 2. 22. JavaScript Select 변경 이벤트 처리하기 이번에 프로젝트를 진행하면서 javascript를 이용하여 Select를 변경에 따른 이벤트를 처리하는 작업이 필요했다. 총 3개의 Select에 변경 이벤트를 달아주어야 했는데, 다음과 같이 해결할 수 있었다. var aList = document.querySelector('#aList'); var bList = document.querySelector('#bList'); var cList = document.querySelector('#cList'); var change_event = function(){ console.log('변경됨'); }; aList.onchange = change_event; bList.onchange = change_event; cList.onchange = change_e.. 2021. 2. 22. 웹사이트만들기 시리즈 - HTML로 골격 만들기 안녕하세요. 테크티키타카압니다. 저번 시간에는 VSCODE를 설치하고, 유용한 플러그인들을 설치하는 시간을 가져보았습니다. 이번 시간에는 웹사이트의 골격을 만들어보겠습니다. 건물을 지을 때, 가장 먼저 기반을 다지고, 골격을 구축해두어야 외벽과 바닥, 천장을 지을 수 있습니다. 웹 개발에서 HTML은 '웹사이트'라는 건물의 기반과 골격에 해당하는 부분이라고 생각하시면 됩니다. VSCODE에서 같이 작성하면서 하나씩 알아보도록 하겠습니다. 기본적인 html의 뼈대는 VSCODE에서 지원해줍니다. html파일에서 !를 적으면 다음과 같은 상태가 됩니다. 여기서 탭(Tab)이나 엔터(Enter)를 눌러주시면 이렇게 html 기본 구조가 자동으로 나옵니다. 1. head 태그 첫 번째로 head부분입니다. ti.. 2020. 12. 2. 웹사이트 만들기 최적의 환경 세팅 - VSCODE Plugin 설치하기 안녕하세요. 테크티키타카입니다. 지난 포스팅에서는 웹사이트 만들기를 위한 첫걸음으로 VSCODE를 설치하고 HTML을 이용해 Hello World를 띄워보는 것 까지 진행해보았습니다. 이번 포스팅에서는 앞으로 웹 개발을 함에 있어 많은 도움이 되는 VSCODE의 Plugin을 설치해 보겠습니다. chjune0205.tistory.com/145 VSCODE와 Open In Browser 플러그인이 설치되어 있지 않으신 분들은 이전 게시글을 참고해주시면 되겠습니다. 웹사이트 만들기 첫 걸음 VSCode 설치하기 안녕하세요. 테크티키타카입니다. 앞으로 html, javascript, css 기초 문법 학습을 통해 웹사이트를 만들고 배포하는 과정까지 포스팅을 진행하고자 합니다. 오늘은 그 첫걸음으로 VSCode.. 2020. 11. 26. 이전 1 2 3 4 다음 반응형
