전체 글 183

1주차 팀과제(야구게임)

Q. 숫자야구 프로그램 만들기 컴퓨터는 0과 9 사이의 서로 다른 숫자 3개를 무작위로 뽑습니다. (ex) 123, 759 사용자는 컴퓨터가 뽑은 숫자를 맞추기 위해 시도합니다. 컴퓨터는 사용자가 입력한 세자리 숫자에 대해서, 아래의 규칙대로 스트라이크(S)와 볼(B)를 알려줍니다. ◾ 숫자의 값과 위치가 모두 일치하면 S ◾ 숫자의 값은 일치하지만 위치가 틀렸으면 B 기회는 무제한이며, 몇번의 시도 후에 맞췄는지 기록됩니다. 숫자 3개를 모두 맞춘 경우, 게임을 종료합니다. ❗입출력 예 컴퓨터가 숫자를 생성하였습니다. 답을 맞춰보세요! 1번째 시도 : 134 0B0S 2번째 시도 : 238 1B1S 3번째 시도 : 820 2B1S 4번째 시도 : 028 3B 5번째 시도 : 280 3S 4번만에 맞히셨..

공부/JavaScript 2023.06.13

사전 준비 - 웹미니 프로젝트

📌 코드 링크👇 GitHub - makepin2r/my-bullet-journal: [항해99 웹미니프로젝트] 온라인 불렛저널 서비스 [항해99 웹미니프로젝트] 온라인 불렛저널 서비스 . Contribute to makepin2r/my-bullet-journal development by creating an account on GitHub. github.com 📌 시연 영상 시연 영상 📌 프로젝트를 마치며 프로젝트를 진행하면서 회원가입까지 완성을 하고 싶었지만 회원가입 데이터를 받아오는 부분에 있어서 오류가 발생하여 기능을 완벽하게 구현해내지 못했습니다. 조원 모두 아직까지는 DB에 대한 이해가 부족하고 세션 혹은 토큰등 프론트엔드와 백엔드가 서로 통신하는 방식에 대해서 서 조금더 학습할 필요가 있다고..

공부/Project 2023.06.13

JavaScript 문법 종합 3주차(1)

1. 데이터 타입 심화 ⅰ. 데이터 타입의 종류(기본형과 참조형) 자바스크립트에서 값의 타입은 크게 기본형(Primitive Type)과 참조형(Reference Type)으로 구분됨 => 구분 기준은 값의 저장 방식과 불변성 여부!! 기본형에는 Number(숫자형), String(문자열), Boolean, null, undefined, Symbo(ES6에서 새롭게 추가됨) 이 있음 참조형은 말그대로 어떠한 겂을 참조(refer)하고 있는것을 말함. 기본적으로 Object(객체)!! 객체의 하위요소로써 Array, Function,... 등이 있음 기본형과 참조형의 구분기준 복제의 방식 (값이 어떻게 저장되는지, 복제되는지) ✔ 기본형 : 값이 담긴 주소값을 바로 복제 ✔ 참조형 : 값이 담긴 주소값들로..

공부/JavaScript 2023.06.12

사전 준비 - 웹미니 프로젝트 설계

📌 프로젝트명 My bullet journal 📌 프로젝트 설명 불렛 저널을 온라인으로 작성하여 사용할 수 있는 서비스 📍구현하고 싶은 기능 📎 접속시 로그인 화면 노출 이미 로그인 되어있을 시 할일 리스트를 노출 * To do 페이지 1. 오늘 날짜, "안녕하세요, oo님" 표시 2. 입력 기능(동작 -> 업데이트 -> reload) ✔️input - to do, schedle, memo를 선택할 수 있는 드롭다운 및 추가 버튼 포함 ✔️드롭다운의 디폴트값은 to do 3. 리스팅 기능 ✔️출력 - 입력기능을 통해 추가된 요소들을 추가 순서대로 리스팅됨 ✔️삭제 - 각각의 요소에 hover시 오른쪽에 휴지통 아이콘 생성, 아이콘을 누르면 삭제됨 ✔️하이라이트 - 각 요소 왼쪽 공간에 hover시 반투명..

공부/Project 2023.06.08

CSS기초(띵동코딩)3

1. momentum 페이지 만들기 1 ⅰ. 기본 틀 momentum_first.html 파일 생성후 아래 코드 작성하기 더보기 모멘텀앱 - 따라만들기 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap'); * { font-family: 'Poppins', sans-serif; } body, h1, h2, h3, p, div, a { margin: 0px; padding: 0px; text-decoration: none; font-weight: normal; 1 } $(document).ready(function () { renderGalleryItem() }); //배경 사진 함수 function ren..

CSS기초(띵동코딩)2 - 3

1. Netflix 클론코딩 ⅰ. 기본 html 틀 홈 TV프로그램 영화 내가 찜한 콘텐츠 오늘의 영화 토르: 러브 앤 썬더 오늘 한국의 Top 10 영화 오늘 한국의 추천 영화 ⅱ. 메뉴바 부분 만들기 . . body { background-color: black; } .gnb { display: flex; flex-direction: row; justify-items: center; align-items: center; padding: 20px } .gnb > a { margin: 0px 40px; color: white; } .gnb > a:last-child { margin-right: auto; } ...... ⅲ.main 구역 html + css 만들기 ........ .gnb > a:last..

CSS기초(띵동코딩)2 - 2

1. jQuery 란? 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 모음집의 형태 장점 코드의 가독성이 좋음 자바스크립트를 모두 알 필요 없이도 웹 사이트 제작을 용이하게 해줌 사용하는 방법 JQuery 사용을 선언하고 이름표를 붙여주고 이름을 가리키고 원하는 동작을 입력하면됨 1. jQuery CDN 부분을 참고해서 미세먼지 정보 지역별 용산구 : 80 동작구 : 29 도봉구 : 58

CSS기초(띵동코딩)2 - 1

1. 자바스크립트란? 자바스크립트는 프로그래밍 언어로 웹페이지의 동적인 동작을 만들 수 있음 웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어 자바스크립트로 작성한 프로그램을 스크립트(script)라고 부름 => 웹페이지의 HTML 안에 작성할 수 있고 웹페이지를 불러올 때 스크립트가 자동으로 실행됨 스크립트는 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성할 수 있고 실행할 수 있음 2. 자바스크립트 기초 지식 쌓기 ⅰ.경고창 뜨게 하기 alert를 사용하여 경고창을 뜨게 할 수 있음 // 함수 만들기 function hey() { alert("안녕"); } // button 함수에 연결하기 로그인하기 // onclick : 버튼을 눌렀을때 실행됨 ❌ 콘솔창 여는 방법 ✔ 기본방법 - 마우..

CSS기초(띵동코딩) 1 - 2

1. 부트스크랩이란? ⅰ. 부트스트랩이란? https://getbootstrap.kr/docs/5.1/getting-started/introduction/ 시작하기 세계에서 가장 인기있는 프레임워크인 Bootstrap으로 반응형, 모바일 우선 사이트를 jsDelivr와 스타터 페이지 템플릿을 통해 시작해보세요. getbootstrap.kr html, css, javascript 작업의 부담을 덜기 위해, 트위터 개발자들이 만들어 놓은 프론트엔드 모음집 장점 복분으로 쉽게 할수 있음 => 개발 시간을 줄일 수 있음 휴대폰, 테블릿, 컴퓨터에 따라, 화면 크기가 자동으로 변함 단점 페이지 로딩 속도가 조금 느릴 수 있음 생긴 대로 가져다 쓰면 편하지만, 커스터마이징을 할 경우 새로 만드는 게 좋음 boots..

CSS기초(띵동코딩) 1 - 1

1. 웹 서비스 기초 ⅰ. 웹 서비스의 동작원리 브라우저가 하는 일은 요청을 보내고 요청 받은걸 그대로 그려주는 역할을 함 이때, 요청 받은 내용에 들어있는 것이 HTML, CSS, Javascript HTML은 뼈대, CSS는 꾸미기, Javascript는 움직이기 => 눈에 보이는 부분을 프론트엔드라고 함 ⅱ. HTML, CSS, Javascript 세 가지를 집 짓는 것에 비교한다면 집의 골조를 세우는 것은 html의 역할이고, 인테리어 하듯 홈페이지를 꾸며주는 것이 css의 역할, 불을 켜고 끄는 등 홈페이지의 동적인 역할은 javascript 2. VS Code VS Code(Visual Studio Code)란? ✔ Microsoft사가 개발해 무료로 제공하는 개발환경으로, 세계에서 가장 많이..