개발자연습노트

모달창 배경을 누르면 닫히는 기능을 추가해봅시다 앞선 강의에서 모달창을 하나 제작해서 띄워봤습니다. 근데 모달창의 검은 배경을 누르면 모달창이 닫히는 기능을 추가해봅시다.  설명하다  모달창 내용 ▲ 모달창 HTML은 대충 이런 식으로 코드가 짜여있고모달창 오픈할 때 show-modal 클래스명을 넣어서 오픈했다면    document.querySelector('.black-bg').addEventListener('click', function(){ document.querySelector('.black-bg').classList.remove('show-modal');})이렇게 코드짜면 될듯요 그럼 검은 배경 눌렀을 때 모달창이 잘 닫힙니다.  근데 이상한 점이 하나 있습니다.검은배경 뿐만 ..

이렇게 생긴 UI를 탭이라고 합니다.어떻게 만드냐면 그냥 UI 만드는 step 그대로 따라가면 완성입니다. 버튼3개, div 박스 3개 만들어두고버튼누르면 거기 맞는 div박스를 보여주면 끝입니다.    시간아까우니 디자인은 미리 해옴 설명하다  Products Information Shipping 상품설명입니다. Product 스펙설명입니다. Information 배송정보입니다. Shipping  아무데나 복사붙여넣기하면 탭나옴 어떻게 만들었는지 설명하자면 1. 태그로 버튼 3개 만들었습니다.2. 태그로 박스 3개 만들었습니다.3. 제가 만든 orange 클래스명을 추가하면 버튼누른듯한 효과를 줄 수 있습니다 (매우편리) 4. 제가 만든 ..

문제 1. 스크롤바 100px 내리면 로고 폰트사이즈 작게 만들기 그런 재밌는 애니메이션을 만들어봅시다.  설명하다 .navbar { position : fixed; width : 100%; z-index : 5}.navbar-brand { font-size : 30px; transition : all 1s;}일단 상단메뉴는 상단고정하고 로고 폰트사이즈를 키운 채로 시작합시다.그리고 스크롤바를 100px 정도 내리면 폰트사이즈를 줄여봅시다.그럼 스크롤바를 얼마나 내렸는지 알 수 있어야겠군요        스크롤 이벤트리스너  window.addEventListener('scroll', function(){ console.log('안녕')});스크롤바를 조작하면 scroll 이벤트가 발생합니다.그..