SASS를 공부하려고 했다.이전에 노마드코더에서 바닐라 JS 강의를 재밌게 들었던 기억이 있어서 들어가서 강의를 보는데,SASS를 시작하기 전에 HTML, CSS부터 복습하는 건 어떨까? 라는 생각이 들었다. 회사에서 쓰는 코드는 생각보다 한정되어 있고, 쓰는 태그만 쓰다보니 (사랑하는 flex)다른 태그들에게 소홀해졌기에 복습도 할 겸 강의 들여다보다가 평생수강권 결제해버렸다. 커리큘럼을 보니 거의 아는 내용이었지만, 기초부터 탄탄하게 복습해보자는 생각!!!커리큘럼에 git 강의까지 포함되어 있어서 이 강의로 선택했다. 또한 2주 챌린지로 14일동안 매일매일 과제 12개를 해내야한다. 2번 이상 결석 시 가차없이 탈락...퇴근하고 집에서 공부하기 쉽지 않았는데, 강제성이 필요할 것 같아서 챌린지도 신청..
메인페이지 리뉴얼 작업을 하는데, 3개 섹션의 배경을 동영상으로 삽입해야 했다. 서버에 비메오에 업로드하고 iframe으로 불러와 사용하는 방식으로 작업한다. position을 사용해서 작성했는데, 여백이 생기고 난리! 💡 목표다양한 장치의 화면 비율에 맞추어 꽉 차는 배경 동영상 설정하기 📌 HTML 텍스트 📌 CSS.videoSection { position: relative; background: #000; }.videoSection .txtWrap { position: absolute; top: 50%; left: 100px; transform: translateY(-50%); z-index: 1; color: #fff; }.v..
💡 목표버튼을 클릭하면 아래로 길어지는 아코디언 메뉴 구현 📌 HTML Q. 사용 시간은? A. 60분 사용 가능합니다. Q. 사용 방법은? A. 부착하여 사용하시면 됩니다. Q. 몇 회 사용 가능? A. 1일 1회 사용 가능합니다. 📌 CSS- transition은 height: auto에는 먹히지 않는다. max-height를 활용하는 방법으로 수정 가능하다./* reset */* { margin: 0; padding: 0; }button { display: block; border: none; }/* 기본 세팅 */.accordionMenu { width: 100vw; height: au..
💡 목표Swiper.js 없이 바닐라로 무한 슬라이더 구현하기.1. 5초동안 하나의 슬라이더를 보여주고, 프로그레스바로 남은 시간 출력2. 정지 버튼을 누르면 프로그레스바가 초기화되고, 자동 슬라이드가 멈춤3. 재생 버튼을 누르면 프로그레스바가 재시작죄고, 자동 슬라이드가 재개됨 📌 HTML 01 02 📌 CSS/* reset */* { margin: 0; padding: 0; }button { border: none; }/* 슬라이더 */.intro { position: relative; width: 100vw; height: 100vh; padding: 0; overflow: hidden; }.introSlider { d..
💡 목표 0부터 원하는 숫자까지 숫자가 상승하는 애니메이션 구현 📌 HTML 📌 CSS #count { font-size: 30px; } 📌 JavaScript let countBox = document.querySelector('#count'); let count = 0; let num = 1234567890; let counting = setInterval(function () { if (count >= num) { count = num; clearInterval(counting); } else { count += 12345678; } countBox.innerHTML = new Intl.NumberFormat().format(count); }, 10); 💛 결과물 See the Pen Count A..
💡 목표 외부 라이브러리 없이 바닐라JS로 스크롤 이벤트 구현 📌 HTML Header Go Right Go Left Go Up Go Down 1 2 3 📌 CSS /* reset */ .wrap { width: 100%; margin: 0 auto; background-color: #eee; } li { list-style: none; } #header, #body { width: 50vw; margin: 0 auto; text-align: center; } #header { position: sticky; top: 0; left: 0; height: 5vw; margin-bottom: 20vw; line-height: 5vw; background-color: #ccc; z-index: 999; } #..
