아라의 WWW

오늘은 주관식 정답 판별하는 문제를 만들어 보았습니다. 오늘은 사용자가 답을 직접 적고 정답의 유무를 판별 하는 페이지를 만들어 보겠습니다. html의 구조와 css는 어제 와 비슷해서 올리지는 않았습니다. 오늘은 자바스크립트 위주로 설명드릴려고합니다. 현재 페이지는 사용자가 답을 적으면 답을 적는 박스와 버튼이 사라지면서 답과 팁이 나오고 강아지의 표정이 바뀌는 페이지입니다. Quiz 주관식 확인하기 유형 1 2 . 정답 확인하기 jo0132@naver.com 이렇게 코딩합니다. 그중 javascript를 따로 이야기해보겠습니다. const quizWrap = document .querySelector(".quiz__wrap") const quizTitle = quizWrap .querySelector..

오늘은 강아지가 나오는 퀴즈화면을 만들어 보았습니다. reset.css 리셋은 먼저 제가 제작하려는 사이트들의 기본 셋팅을 의미합니다. 이번에는 csss파일로 만들어 제작하였습니다. @import url('https://webfontworld.github.io/DungGeunMo/DungGeunMo.css'); @import url('https://webfontworld.github.io/elice/EliceDigitalBaeum.css'); * { margin: 0; padding: 0; box-sizing: border-box; } *, *::before, *::after { box-sizing: border-box; } a { text-decoration: none; columns: #222; } ..

01. 디자인 우선 피그마로 디자인을 만들어 보았습니다. 기본적인 그리드 시스템을 칼럼을 12줄로 주고 여백은 380을 주어 콘텐츠가 들어가는 부분의 기본적인 그리드 시스템을 주었습니다. 그리드 시스템은 하나를 주게되면 한 사이트에 여러번 사용되기때문에 계속 숙지하는 것이 좋습니다. 그리드시스템 말고도 가이드 라인을 주어 자신이 어떤 요소를 어디에 넣고 여백을 얼마를 줄지 지정하는 것이 좋습니다. 02.코딩 이제 위와같은 디자인을 코딩으로 구현하고자 합니다. 우선 코드를 먼저 보여드리자면 아침이 주는 효과 아침 식사는 우리의 몸과 뇌를 에너지로 충전하는 첫 번째 식사입니다. 아침에 적절한 양의 전압을 회수하면 하루가 점점 늘어나고 기억력이 좋아지고, 몸의 대사 기능도 빨라집니다. 에너지 충전 아침밥은 에..