TechLabs

Side Bar 구현 방법 구현 여부 document.querySelector O addEventListener O classList.toggle O classList.add O 인라인 스타일 요소를 hover 시에 변경하고 싶은 경우에는 js를 이용하여 변경해야 한다. getComputedStyle : 인라인 스타일에서 원하는 스타일 가져오는 방법이다. cssText : 인라인 스타일 변경하는 방법이다. 트랜지션, @keyframes 애니메이션, 트랜스폼 모두 사용하였다. 차이점 명확하게 기억하기!

Responsive Navigation Bar 만들기 구현 방법 구현 여부 document.querySelector O addEventListener O classList.toggle O 고민 끝에 이렇게 html 구조를 짜주었다. 버튼은 타이틀 옆에 위치하고, 너비가 넓을 때에는 보이지 않도록 설정하였다. css 부분에서 고민과 시행착오가 많았다. 미디어 쿼리를 이용하여 800px 기준으로 보여야 되는 요소와 보이지 말아야 되는 요소를 나누어서 css를 설정해주었다. 거의 전체 구조는 flex를 이용하였으나, 미디어 쿼리 적용 시에 변경되는 부분이 생기면 처음에는 flex로 고쳐보다가 안 되는 경우에 fixed를 이용하여 자체적으로 위치를 조정하였다. 미디어 쿼리에 따라서 너비를 조정하였다. 노란색 박..

Review Carousel 만들기 구현 방법 구현 완료 array O DOMContentLoaded X addEventListener O array.length O textContent X 앞에서 counter와 비슷한데, 좀 더 복잡한 구조로 이루어져 있다. 먼저, infoObject와 imgArray라는 데이터의 정보를 담은 객체와 배열을 만들어주었다. 그런 다음에 forEach + addEventListener를 이용하는데, forEach를 버튼과 info items에 두 개를 중복하여 돌려주면서 조건문을 이용하여 왼쪽 버튼인 경우에는 왼쪽으로 변경되게 만들고, 오른쪽 버튼인 경우에는 오른쪽으로 변경되게 만들면 된다. 조건은 버튼의 id를 기준으로 나눠주었다. 또한 나머지 값을 이용하여 범위를 벗..

Counter Refactoring 구현 방법을 동일하게 이용하여 코드를 다시 구현하였다. 구현 방법 구현 여부 document.querySelectorAll O forEach O addEventListener O currentTarget O classList O textContent O 목차 1. querySelectAll와 forEach를 이용하여 각각에 이벤트 부여하기 2. textContent 3. addEventListener와 event 4. target vs currentTarget (this) 5. classList와 add 1. querySelectAll와 forEach를 이용하여 각각에 이벤트 부여하기 querySelectorAll을 이용하면 같은 클래스 이름을 가진 태그들을 모두 가져..

Counter 만들기 초보자를 위한 40가지 자바스크립트 프로젝트 결과물을 참고하여 Counter를 제작하였다.

Color Flipper 만들기 초보자를 위한 40가지 자바스크립트 프로젝트 결과물을 참고하여 Color Flipper를 제작하였다. 구현 방법 구현 여부 arrays O document.getElementById O document.querySelector O addEventListener O document.body.style.backgroundColor O Math.floor O Math.random O array.length O