따라하며 만드는 심리테스트 with HTML/CSS/JS| 은옥 - 인프런 강의직접 나만의 MBTI 기반 심리테스트 사이트를 만들며 HTML, CSS, JS의 기초 흐름을 이해할 수 있는 강의입니다. 나만의 심리테스트 웹페이지(HTML/CSS/JS 기반) 완성, 입문자 관점의 HTML, CSS, JS 기본 사용www.inflearn.comhttps://inf.run/5xUwU HTML, CSS, JavaScript 기초를 활용해MBTI 기반 심리테스트 웹사이트를 처음부터 끝까지 직접 만들어보는 입문 강의입니다. 복잡한 이론보다 실제 화면을 만들어가며 자연스럽게 웹 개발의 흐름을 익힐 수 있도록 구성했습니다.코딩이 처음이어도 걱정하지 마세요. 질문 데이터 만들기, 버튼 이벤트 처리, 결과 페이지 구성 등웹..
HTML, CSS, JS를 이용해 예전 윈도우에 기본적으로 설치되어 있던 지뢰찾기 게임을 만들어 봅시다. https://inf.run/tgy8n 따라하며 만드는 지뢰찾기 with HTML/CSS/JS| 은옥 - 인프런 강의HTML, CSS, JS를 이용해 예전 윈도우에 기본적으로 설치되어 있던 지뢰찾기 게임을 만들어 봅시다. 뭐든 만들어 보고 싶은 개발자 지망생, 실제 프로젝트를 어떤식으로 진행해야 하는지 알고 싶은www.inflearn.com
사이먼게임만들기 38가지 자바스크립트&리액트 튜토리얼 결과물 https://mooky1007.github.io/simon_game/ Simon Game Let's Play Simon! Lv. 1 GAME OVER Collect! Score : 0 Best Score : 0 START mooky1007.github.io 현재 포스트의 완성본 HTML 삽입 미리보기할 수 없는 소스 작업개요 사이먼게임은 좀 생소해서 찾아보니까 4개의 버튼이 있고 순서에 맞게 불이 들어오고 나면 그 순서를 기억했다가 순서에 맞게 누르는 게임인거같다. 처음엔 1개 이후엔 2개, 3개, 4개, ... 이런식으로 점점 기억해야할 숫자가 늘어나고 속도도 조금씩 빨라지면 괜찮을것 같다. 지난번 가위바위보랑은 다르게 이건 내가 지금 몇점..
가위바위보 게임 만들기 작업개요 38가지 자바스크립트&리액트 튜토리얼 16번째, 가위 바위 보 게임 만들기 가위, 바위, 보 선택할 수 있는 버튼과 게임 스크린 정도만 있으면 될것 같다. random으로 나오는 부분과 게임성을 위해 약간의 애니메이션을 추가해보자. HTML 삽입 미리보기할 수 없는 소스 결과물 작업 에셋 구하기 일단 게임이니까 무료 이미지 사이트에서 가위, 바위, 보 이미지를 찾아보자. https://kr.freepik.com/ 딱히 마음에 드는게 없긴 한데.. 노란 피부 톤의 만화 손 제스처 컬렉션 | 무료 벡터 노란 피부 톤의 만화 손 제스처 컬렉션에 대한 이 무료 벡터를 다운로드하시고, 53백만 개 이상의 전문 그래픽 자료를 확인하세요. #freepik #벡터 #ok #손바닥 #손가..
식료품 리스트 만들기 이번 튜토리얼 포스트 부터는 양식을 좀 바꿔보려고 한다. 38가지 자바스크립트 & 리액트 튜토리얼의 14번, 식료품 리스트를 만들어보자. 간단한 CRUD를 경험해볼 수 있다. 작업 개요 1. 상단의 input 영역에 식료품명을 입력하면 하단에 리스트 형식으로 추가 되어야함. 2. 추가된 리스트는 수정 및 삭제가 가능해야 함. 3. 하단의 Clear items로 모든 리스트를 삭제 할 수 있어야함. HTML 우선 스크립트를 작성하기 전에 HTML을 작성해보자. 식료품 리스트 등록 임시 수정 삭제 제목과, 입력을 받을 수 있는 form, 그리고 등록된 리스트가 나올 ul로 구성했다. 여기서, 수정을 누르면 리스트 아이템의 p 부분이 input으로 변경되야 하므로 임시로 하나 더 추가해보..
38가지 자바스크립트&리액트 튜토리얼 ★최종 결과물 HTML 삽입 미리보기할 수 없는 소스 0. 작업 개요 몇가지 문장들을 넣어두고, 입력된 값에 따라 랜덤으로 문장들을 붙여서 더미 텍스트를 만들어내야함. 입력받은 만큼 배열에서 원소를 랜덤으로 추출 추출된 원소들의 문자열을 이어붙인 뒤 dom에 그려주기. 1. HTML Create 2. CSS css는 따로 안할 생각. - 3. JS 우선 그냥 애국가 1절을 더미텍스트로 부분부분 짤라서 넣은 뒤 작업해주었다. 그 뒤, amount 인자를 받는(input에 입력된) createRandomText 함수를 만들어 준 뒤, 빈 문자열 result를 변수로 선언해두고, amount만큼 반복문을 시행해서, Math.random 매서드를 이용해 dummyP 의 갯수..
38가지 자바스크립트&리액트 튜토리얼 ★최종 결과물 HTML 삽입 미리보기할 수 없는 소스 0. 작업 개요 카운트 다운 시계를 만들어보자. 1. 특정 시간만큼 1초마다 바뀌는 카운트 다운 시계. 2. 1초마다 현재시간에서 -1초씩 줄어들어야 함. 3. 0 이하로 안떨어지게 하기. 1. HTML 00 : 00 : 00 2. JS 간단하게, time 즉, 타이머가 작동될 시간(초)을 인자로 받는 함수를 만들어줄건데, 우선 document에서 미리 지정해준 시,분,초 DOM을 변수화 시킨 후, timer라는 함수를 새로 지정해줄껀데, 이함수는 실질적으로 입력받은 초를 시/분/초로 변경 후, 입력받은 time을 1내려주는 기능을 하는 함수이다. 이때 time의 값이 0 이하라면 return 시켜주도록 한다. 그..
38가지 자바스크립트&리액트 튜토리얼 ★최종 결과물 HTML 삽입 미리보기할 수 없는 소스 0. 작업 개요 이번엔 사이트 제작에서 국밥처럼 등장하는 탭에 따라 내용이 바뀌는 걸 만들어보자. 만드는 데에는 정말 다양한 방법이 있겠지만 기본적인 골자는 1. 각탭에 맞는 content영역이 존재하고, active, 혹은 on 등의 활성화 클래스가 붙을 경우에만 노출 2. 해당 탭을 클릭하면 해당 DOM만 active 상태가 되고 나머지는 숨김처리. 혹은 1. 각 탭이 눌릴때 마다 고정된 콘텐츠의 내용을 변경해 주기 각각 장단점이 있는데, 대표적으로는 전자는 연결되는 내용이 눈에 보여 유지보수가 용이하고, 후자는 코드가 짧아진다는 장점이 있다. 1. HTML // 미리 콘텐츠들을 만들어 두는 경우 tab01 t..
38가지 자바스크립트&리액트 튜토리얼 0. 작업 개요 스크롤을 할 때 항상 상단에 고정되어 있는 네비게이션 바를 만들어보자. 두가지 방법으로 진행해볼 예정이다. 1. CSS를 이용한 방법 2. JS를 이용한 방법 우선 CSS를 이용한 방식은 position : sticky, 혹은 fixed, 경우에 따라 absolute등으로 DOM의 위치를 띄우는 방식이 있는데, sticky 속성은 특정 top까지는 relative, 즉 고정적인 상태로 있다가 해당 top 영역을 넘어가는 순간부터 fixed속성처럼 화면 위에서 따라다니게 된다. fixed속성은 처음부터 화면을 기준으로 지정된 위치에 고정되있게 되는데, 이때 DOM의 영역을 실질적으로 차지하지 않아 콘텐츠가 덮이는 현상이 발생 할 수 있어 contetn ..
38가지 자바스크립트&리액트 튜토리얼 ★최종 결과물 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 0. 작업 개요 영상으로된 백그라운드를 만들고, 해당 영역 내에서 재생과 정지를 컨트롤 할 수 있는 컨트롤러가 있어야 한다. 샘플영상으로 http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4 사용 예정. 1. HTML 백그라운드로 영상을 반복/자동 재생 하려면, autoplay 속성과 muted, 그리고 loop 속성을 추가하면 된다. Play Pause 2. CSS .video_section { width: 100%; height: 600px; position: relative; o..
38가지 자바스크립트&리액트 튜토리얼 ★최종 결과물 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 0. 작업 개요 특정 리스트에서 버튼을 누를 시, 해당 버튼 카테고리에 맞는 리스트아이템만 노출되는 필터기능을 이용한 메뉴판 만들기. 라이브러리 형식으로 자바스크립트를 잘몰라도 간편하게 사용 할 수 있게 만들어보자. ex) 메뉴와 리스트 아이템에 data-filter 속성을 추가 한 뒤, 클릭 시 클릭된 메뉴의 data-filter 속성과 매치되는 list-item만 노출 되게끔 작업 진행 예정 1. HTML HTML을 작성하면서 JS 구조를 잠깐 생각해봤는데, filter-list가 같은 페이지 내에 여러개가 있을 경우 조금 꼬이거나 할것 같아서 전체를 감싸는 contain..
38가지 자바스크립트&리액트 튜토리얼 ★최종 결과물 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 1. HTML Question 1 How to use this? Question 2 How to use this? Question 3 How to use this? Question 4 How to use this? 2. CSS .inner_body { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 400px; padding: 50px 0; background: #222; font-family: 'Poppins', sans-serif; position: relative; ..
38가지 자바스크립트&리액트 튜토리얼 ★최종 결과물 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 1. HTML Modal 컨테이너와 해당 모달을 작동시킬 button의 DOM에 data-moda-id 속성을 같게 맞춰주어 작동하게 함. html은 별다를거 없는데, 하단에서 클래스를 불러올때 modal_container 클래스를 가진 모든 DOM을 불러온 뒤, forEach매서드로 각각 객체를 생성했다. 생성 후, 생성된 개체의 data-modal-id를 얻어온 뒤, [data-modal-id=`${modalId}`] 셀렉터로 modal id가 맞는 모달의 버튼에 open() 이벤트를 달아주었다. Modal A Open Modal B Open Modal A modal a ..
38가지 자바스크립트&리액트 튜토리얼 ★최종 결과물 HTML 삽입 미리보기할 수 없는 소스 HTML 삽입 미리보기할 수 없는 소스 1. HTML 저번 포스트에서 만들었던 반응형 네비게이션이 사이드바 형태여서, 이번엔 그냥 사이드바 DOM을 열었다 접었다 하는 간단한 사이드바 라이브러리 형식으로 만들어보려고 한다. js 셀렉터로 이용하는 class명과 css를 위한 class명은 분리하는게 좋을것 같아 side_bar, js-side_bar 로 나누었다. 또, 이번엔 객체 내부에서 버튼을 지정하지 않고 각 버튼에 직접 onclick 속성을 사용해보기로 했다. SideBar Open Home Product About Contact SideBar Close 2. CSS 사이드바는 사실 JS보단 CSS가 중요하..
38가지 자바스크립트&리액트 튜토리얼 38가지 자바스크립트&리액트 튜토리얼 웹서핑을 하다가 초보자를 위한 40가지의 자바스크립트 프로젝트라는 걸 보게 됐다. 딱히 할 것도 없으니 이거나 한번 리스트만 보고 쭉 해봐야겠다. 근데 바닐라 자바스크립트 쪽은 27개밖에 없 frontend-bear.tistory.com 최종 결과물 HTML 삽입 미리보기할 수 없는 소스 깃허브 결과물 보러 가기 HTML 💛Logo Home About Service Portfolio Contact 로고와 메뉴 영역으로 나뉜 간단한 구조로 작성했다. menu_close_btn, menu_open_btn은 css 상에서 기본적으로 숨김 처리를 해두었다. CSS header { width: 100%; border-bottom: 1px ..
38가지 자바스크립트&리액트 튜토리얼 38가지 자바스크립트&리액트 튜토리얼 웹서핑을 하다가 초보자를 위한 40가지의 자바스크립트 프로젝트라는 걸 보게 됐다. 딱히 할 것도 없으니 이거나 한번 리스트만 보고 쭉 해봐야겠다. 근데 바닐라 자바스크립트 쪽은 27개밖에 없 frontend-bear.tistory.com 최종 결과물 HTML 삽입 미리보기할 수 없는 소스 깃허브 결과물 보러 가기 HTML Best Reviews Review Title01 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1..
38가지 자바스크립트&리액트 튜토리얼 38가지 자바스크립트&리액트 튜토리얼 웹서핑을 하다가 초보자를 위한 40가지의 자바스크립트 프로젝트라는 걸 보게 됐다. 딱히 할 것도 없으니 이거나 한번 리스트만 보고 쭉 해봐야겠다. 근데 바닐라 자바스크립트 쪽은 27개밖에 없 frontend-bear.tistory.com 최종 결과물 HTML 삽입 미리보기할 수 없는 소스 깃허브 결과물 보러 가기 HTML 38JS - Counter Counter 0 decrease reset increase CSS body { display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; background: #222; } .conta..
38가지 자바스크립트&리액트 튜토리얼 38가지 자바스크립트&리액트 튜토리얼 웹서핑을 하다가 초보자를 위한 40가지의 자바스크립트 프로젝트라는 걸 보게 됐다. 딱히 할 것도 없으니 이거나 한번 리스트만 보고 쭉 해봐야겠다. 근데 바닐라 자바스크립트 쪽은 27개밖에 없 frontend-bear.tistory.com 최종 결과물 HTML 삽입 미리보기할 수 없는 소스 깃허브 결과물 페이지 보러 가기 HTML Color Flipper #f15025 click me CSS .container { display: flex; align-items: center; justify-content: center; flex-direction: column; width: 200px; height: 300px; padding: ..
※이번 포스트로 부터 나온 최종 아웃풋 https://frontend-bear.tistory.com/86 심리&성격&성향 테스트 사이트 [JS] 심리 테스트 페이지 만들기 - 1 [JS] 심리 테스트 페이지 만들기 - 2 [JS] 심리 테스트 페이지 만들기 - 3 위 포스트에서 만들었던 심리테스트 코드를 가지고 간단하게 SPA 심리&성격&성향 테스트 frontend-bear.tistory.com [HTML, CSS, JS] 바닐라 자바스크립트로 MBTI 테스트 만들기(2)에서 작성했던 js를 리팩토링 해보자. 작업 개요 코드 가독성 향상 및 반복해서 사용되는 내용 변수화 작업 가이드 및 사담 이벤트 리스너 함수들을 분리하여 가독성 향상 / 각 버튼에 대한 클릭 이벤트에 대한 처리를 별도의 함수로 분리 클..
※이번 포스트로 부터 나온 최종 아웃풋 https://frontend-bear.tistory.com/86 심리&성격&성향 테스트 사이트 [JS] 심리 테스트 페이지 만들기 - 1 [JS] 심리 테스트 페이지 만들기 - 2 [JS] 심리 테스트 페이지 만들기 - 3 위 포스트에서 만들었던 심리테스트 코드를 가지고 간단하게 SPA 심리&성격&성향 테스트 frontend-bear.tistory.com [HTML, CSS, JS] 바닐라 자바스크립트로 MBTI 테스트 만들기(1)에서 만들었던 객체를 이용해서, 이번엔 html 화면에서 직접 작동하게 만들어보자. 작업개요 이전 포스트에서 만들었던 PersonalTest객체와 html을 연결 시켜보자. 인트로, 테스트, 결과 페이지 구성 작업 가이드 및 사담 사실 ..
※이번 포스트로 부터 나온 최종 아웃풋 https://frontend-bear.tistory.com/86 심리&성격&성향 테스트 사이트 [JS] 심리 테스트 페이지 만들기 - 1 [JS] 심리 테스트 페이지 만들기 - 2 [JS] 심리 테스트 페이지 만들기 - 3 위 포스트에서 만들었던 심리테스트 코드를 가지고 간단하게 SPA 심리&성격&성향 테스트 frontend-bear.tistory.com 이번엔 바닐라 자바스크립트로 MBTI 같은 테스트 페이지를 만들어보자. 작업 개요 MBTI 테스트 처럼 OOOO 4가지로 구성된 결과가 나오는 테스트 객체를 이용해 만들어 확장성을 높인다. 작업 가이드 및 사담 PersonalTest 객체를 기반으로, 현재 진행상황, 선택된 값들의 정보 각각의 문항들을 만들고, ..
