STUDY - 공부기록/Web
[Inflearn] 심리테스트 사이트 만들기 2
얌챠
2021. 6. 25. 17:33
[Inflearn] 판다코딩님의 "[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기" 강의 수강 기록
* 강의명을 누르면 해당 강의로 이동할 수 있습니다.
* 본 게시글은 강의를 수강하며 개인적으로 알게 된 점, 느낀 점을 그저 정리해두는 게시글입니다. 강의 내용 자체를 캡쳐하거나 코드를 직접적으로 게시하지 않았으니 해당 내용은 강의를 수강하시며 얻게 되셨으면 좋겠습니다 :3
오늘의 수강기록
QnA Page
QnA 페이지 구현
querySelector를 이용해 미리 만들어둔 div를 선택한 뒤, 여기에 지문과 대답 button들을 생성해 줌
button들은 createElement와 반복문을 이용해 생성했고 addEventListener로 이벤트를 넣어줄 수 있었음.
각 지문을 선택 시 다음 지문으로 넘어갈 수 있도록 이벤트를 구성함
꾸미기 효과 넣기
버튼이 한 줄로 쭉 있는 게 아닌, 한 줄당 하나씩 있기 위해 display : block 사용
진행 상황 Bar
두 개의 div를 겹쳐서, 질문이 진행될 때마다 그에 맞춰 안에 있는 div의 폭을 조절하는 방식으로 함
그라데이션 효과를 입히기 위해 https://www.colorzilla.com/ 사용
그라데이션 효과 입히는거 진짜 유용할 것 같다
진행 상황 Bar만드는것도 뭔가 새로웠다ㅋㅋ 이렇게 할 생각은 못 해봤는데..!! 꼭 써먹어봐야지
✨수강 인증✨
