한 걸음씩

1. 변수, 호이스팅, TDZ(Temporal Dead Zone) let 1. 선언 단계 2. 초기화 단계 3. 할당 단계 블록 스코프(block-scoped) ex) 함수, if문, for문, while문, try/catch문 등 호이스팅이 발생하지만 ReferenceError발생 → Temporal Dead Zone(코드를 예측가능하게하고, 에러 줄임) const 1. 선언 + 초기화 + 할당 var 1. 선언 및 초기화 단계 2. 할당 단계 함수 스코프(function-scoped) 한 번 선언된 변수를 다시 선언할 수 있다 선언하기 전에 사용할 수 있다(호이스팅→undefined) ▷ 호이스팅 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것처럼 행동 2. 생성자 함수 ▷ 객체 리터럴 let ..

[요구사항] 버튼을 클릭했을 때 모달창을 띄우기 Modal Project OPEN MODAL Modal Content close 모달을 띄우기 전 박스에서 버튼을 만들고 버튼을 누르면 모달이 등장한다. display:none;으로 설정해 둔 hidden클래스를 두어 자바스크립트에서 컨트롤할 수 있도록 한다 const button = document.querySelector('button') const body = document.querySelector('body') const modal = document.querySelector('.modal') const box = document.querySelector('.box') const close = document.querySelector('.close..

[요구사항] 박스를 열었다 닫았다 할 수 있을 것 동시에 열지 못할 것 Do You Accept All Major Credit Cards? add_box Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est dolore illo dolores quia nemo doloribus quaerat, magni numquam repellat reprehenderit. span태그는 아이콘을 나타내는 태그인데 두 개의 아이콘을 HTML파일에 두고 hidden 클래스로 toggle할 계획이었으나 toggle이 되지 않아서 기존의 클래스와 텍스트를 제거하고 새로운 클래스와 텍스트를 넣어 아이콘을 바꾸는 방법을 선택했다. const boxes = document..

[Navbar 요구사항] 브라우저 크기를 줄였을 때 menu아이콘이 나타나고 menu아이콘을 눌렀을 때 메뉴창이 등장하면서 메뉴들이 세로로 정렬되어 나타남. menu아이콘을 눌렀을 때 메뉴 창이 사라짐 // index.html CodingAddict Home About Projects Contact menu Home About Projects Contact // app.js const scrollMenu = document.querySelector('.scroll-menu') const menuIcon = document.querySelector('.menu-icon') function onScrollMenu(){ scrollMenu.classList.toggle('hidden') } menuIcon.a..

[요구사항] 4개의 프로필이 있다. 오른쪽 화살표를 클릭하면 오른쪽으로 이동 왼쪽 화살표를 클릭하면 왼쪽으로 이동 버튼을 클릭하면 랜덤으로 프로필이 보이게 구현 // index.html Our Reviews Susan Smith WEB DEVELOPER I'm baby meggings twee health goth +1. Bicycle rights tumeric chartreuse before they sold out chambray pop-up. Shaman humblebrag pickled coloring book salvia hoodie, cold-pressed four dollar toast everyday carry chevron_left chevron_right Surprise Me // ap..