듀의 자료저장소

글자 수 계산기 프로그램을 간단하게 직접 만들어보았다. (코드라이언 javascript 강의를 수강한 내역입니다.) ※ 입문자들에게 적절한 수준의 프로젝트! 출처 DOM Document Object Model → 화면(문서)을 구성하는 코드에 접근하여, 원하는대로 조작 가능하다. 자바스크립트는 dom으로, 웹 화면을 구성하는 모든 것들에게 접근이 가능하다. ex) dom으로 접근해서 글씨를 바꾸거나, 새로운 태그를 추가하거나 class를 추가하는 등의 조작이 가능하다. 글자수 계산기도 하나씩 단계를 생각해보면, 쉽게 만들 수 있다. 어떤 과정과 절차가 필요한지 1. textarea 안의 값 가져오기 document.getElementById('id').value document: dom의 진입점 역할 g..

IT 공부/프로젝트(project, 부트캠프 및 협업) 2022. 1. 26. 13:55

로또 번호 생성 알고리즘 코드를 javascript로 작성해보았다. 전체 로직: 1~45개의 공 중, 랜덤으로 6개의 숫자를 뽑는다. #1. 공 1개부터 뽑기 Math.random(); Math.random()*45; Math.random()*45 + 1; 0 이상 ~ 45 미만 실수에 +1씩 더해준다. 그러면 1이상 ~ 46미만 실수 중에 랜덤으로 하나를 뽑을 수 있게 된다. parseInt(); 실수(float)를 정수(int)로 변환 → 소수점을 버린다. 45개의 공들 중, 공 하나를 뽑는 로직 ※ 공 6개를 뽑기 위해서, 위와 같은 변수를 6개 만드는 것은 비효율적!! #2. 공 6개 뽑기 - 배열, push 배열(array) 자료구조 - 하나의 변수 안에 여러 개의 값들을 담을 수 있다. → i..

IT 공부/프로젝트(project, 부트캠프 및 협업) 2022. 1. 24. 14:36

수업시간에 블로그 웹사이트 만들기를 했다. 이번 프로젝트 난이도는 5점 만점 중에 3점. 감귤마켓 구현이 4점이라면, 어려운 수준은 아니라고 하셨다. * 이번 포스팅 code들과는 상관없지만! 블로그 API라면, 아래 튜토리얼도 괜찮다고 말씀해주셨다. (node, react까지 사용, 로그인 기능도 구현한다) https://youtu.be/OML9f6LXUUs 1. 초기세팅하기 // npm init --yes // npm i nunjucks express cors helmet morgan // npm i nodemon --save-dev // -> nodemon app 으로 실행 가능 ① app.js 파일 생성, 터미널 명령어 아래 사진(경로) 참고해서, 명령어를 입력한다. cd 011_blog_api ..

IT 공부/프로젝트(project, 부트캠프 및 협업) 2022. 1. 7. 11:00

셀렉트박스 커스텀(select box custom) 실습을 해보았다. 코드 리뷰하면서 분석해본다음에 스스로 다시 한번 써볼 예정이다. 완성본은 일단 아래와 같이 생겼다. See the Pen Untitled by 듀 (@jgvoseid-the-styleful) on CodePen. h2 { margin: 30px; } .cont-select { width: 200px; } 피그마 수치대로, article 전부에 width: 200px 값을 주었다. 버튼 넓이 자체는 반응형으로 늘어나지 않아도 되니까 고정값인 px을 준다. 셀렉트박스 커스텀(select box custom)할 때, 디자이너 분이 피그마 수치를 준다는 가정 하에 진행했다. .btn-select { width: 100%; /* 위에 부여한 2..

IT 공부/프로젝트(project, 부트캠프 및 협업) 2021. 11. 30. 08:44

멋쟁이사자처럼 FE과정에서 html과 css로 '자판기 만들기' 클론코딩을 했다. JS까지 했을 경우, ★★★☆☆ 별 3개 난이도의 2박 3일짜리 프로젝트라고 한다. 아직 바닐라코딩을 원활하게 하지는 못해서, 수업시간에 배운 내용을 바탕으로 필사하는 식으로 복습을 해보려 한다. (강사님의 코드 복습!!) PC버전에, 미디어쿼리를 적용해서 Mobile 버전까지 구현(=복습)할 예정이다. 작업순서 1. HTML 마크업하기 2. css 클래스 순서대로 작업 (배치+스타일링) (필요에 따라 markup에 class 추가) 3. 반응형 ( 미디어쿼리 ) 작업 4. javascript 로직 작업 마크업 (HTML) PC 버전의 UI는 위와 같다. 피그마 작업링크를 주셨기 때문에, padding, margin 같은 ..

IT 공부/프로젝트(project, 부트캠프 및 협업) 2021. 11. 22. 07:17

홈페이지 제작 2번째 단계! 저번에 만든 html 구조에 css를 입힌다. 이번에 할 것은 css의 값을 초기화해주는 과정! css.reset이라고 검색하면, 다른 리셋 형식도 나온다. [글씨체 설정] @charset "utf-8"; 인코딩시 한국어가 깨지지 않게 하는용도 @import url (' 구글 폰트 '); 구글 폰트사이트에 들어가서, url을 복사한 후 import 해오면 된다. **'베바스'와 '노토산스' 2가지 폰트 추가!! [설정 초기화] *{ margin: 0; padding: 0; } 기본적으로 하나의 document에는 하나의 doctype이 있다. 그 기본세팅된 doctype에는 margin과 padding이 기본적으로 세팅되어 있다. 이걸 지우기 위해서, 전체를 css.reset..

IT 공부/프로젝트(project, 부트캠프 및 협업) 2021. 10. 5. 14:53

과외수업에서 포트폴리오용으로, 홈페이지 만들기를 하고 있다. 제작과정을 정리할 예정인데 오늘은 html로 구조짜기부터 시작! 프론트엔드 개발자라면, 먼저 만들려는 홈페이지의 구조를 잘 알아야한다. 1. Span 태그 (inline) 인라인 태그인지 2. Div 태그 (block) 블록 태그인지 레이아웃을 보고, 둘 중 하나를 선택한다. ▶ 이게 바로, 시멘틱웹 (semantic web)! 만들려는 웹의 레이아웃을 보고, div를 쓸지/ span을 쓸지 정한다. 1. 태그 열어주기! 2. 한국어 오류 나지 않게 설정 3. css 파일 연동 rel: 어떤 "역할"인지를 정의 ( stylesheet 라고 이름 지정 ) href: 실질적으로, 파일을 갖고 오는 역할 link 태그의 rel속성 (역할), href..

IT 공부/프로젝트(project, 부트캠프 및 협업) 2021. 8. 26. 18:18