TechLabs

1. html 구조 파악하기 위의 그림을 기준으로 더 세분화하였다. container 안에 wrapper를 넣어서 조정하는게 훨씬 flex를 다루기에 편리하다. 2. html 코드 위의 그림 기준으로 html 코드를 생성하였다. 3. css 코드 위에서부터 아래로, 큰 부분부터 작은 부분으로 css 코드를 생성하였다. 4. javascript 코드 추가해야 하는 기능 기능 구현 여부 휴대전화 3 - 4 - 4로 구현하기. 앞 칸이 모두 채워지면 다음 칸으로 커서가 이동하도록 하기. O 휴대전화 모두 입력하면 인증번호 전송 버튼이 활성화되고, 버튼 누르면 인증번호 보여주기. 3분 타이머도 실행하기. O 휴대전화 모두 입력 시 인증번호 전송 버튼 활성화 제외 인증확인 버튼 활성화하기. 3분 이내에 버튼 누르..

precamp의 내용을 바탕으로 더 추가하여 나만의 싸이월드를 생성하였다. 나만의 싸이월드 제작하기 1. 싸이월드 전체 구조화하기. 2. 싸이월드 왼쪽 박스 제작하기. 3. 싸이월드 오른쪽 박스에서 Home 박스 제작하기. 4. 싸이월드 오른쪽 박스에서 Game 박스 제작하기. 5. 싸이월드 오른쪽 박스에서 JukeBox 박스 제작하기. 6. 버튼 생성하고, 기능 추가하기. 1. 싸이월드 전체 구조화하기 나만의 싸이월드 만들기 전에 html로 웹페이지 구조화하기. 2. 싸이월드 왼쪽 박스 제작하기 - 구조화한 것을 바탕으로 id 값 지정하기. - background-color 이용하여 원하는 자리에 잘 넣어보기. - flex를 이용하는 경우에 부모 박스를 이용하여 자식 박스를 정렬함을 잊지 말기. 그래서..

html, css를 이용하여 싸이월드 양식 만들기 1. jukebox.html, jukebox.css에 표 형태 나와있는데, html에서 표 태그 이용하여 그려주면 된다. 2. border 경계 사이를 없애주는 속성을 사용하면 예제처럼 표현할 수 있다. border-spacing 3. navigation 버튼 만들 때, position을 이용하여 절대 위치로 위치 조정하기. 4. 태그의 속성의 값을 변경하고 싶은 경우, setAttribute(name, value) 를 이용하여 조정할 수 있다. 이벤트 감지하고, 그에 따라 변경할 때에 유용하게 사용된다. 5. 메뉴 버튼 클릭을 이용하여 원하는 페이지로 이동할 때에 함수의 개수 고민했었다. 3개가 필요하다. 한 버튼 당 하나씩 기능을 넣어주면 되기 때문이..

1. git - 버전 관리 시스템 : 저장소를 의미한다. 누가, 언제, 어떤 파일을 저장했는지 알 수 있다. 특정 시점에서 소스코드 복원 가능하다. 2. github - 클라우드 개념 git 로컬 환경에서의 코드 저장소를 의미한다. 변경된 코드를 추적한다. 코드 버전을 관리할 수 있다. 로컬 환경은 개인 컴퓨터를 의미한다. github git을 온라인으로 관리할 수 있는 클라우드를 의미한다. git init : .git 폴더를 생성한다. git add : 코드를 임시 저장한다. stage에 올리는 것을 의미한다. 이 상태에서 다시 되돌릴 수 있다. git commit -m : 코드 저장을 확정하는 작업이다. 이 상태에서 다시 되돌릴 수 없다. git push origin main : github의 mai..

1. 이벤트 감지하기 [예시] 회원가입 시 입력 변경 시에 이벤트가 발생하는 것을 알 수 있다. 2. onchange vs oninput onchange 값이 포커스가 벗어날 때마다 반영하는 함수이다. oninput 실시간으로 변경되는 값을 모두 반영하는 함수이다. 결이 비슷하지만, 차이가 나는 함수이기에 적절하게 이용하자. 3. 0 vs "0" - 조건문을 이용할 때에 조건을 달아줘도 되지만, Boolean을 달아주는 경우도 많다. input에서 value를 가져오면 문자열로 반환된다. 숫자 0 false를 반환한다. 문자열 0 true를 반환한다. 4. 모든 값 입력 시 버튼 활성화하기 버튼을 비활성화 상태로 만들어놓기. 입력창의 모든 태그의 값을 가져오기. 그 값들이 모두 비어있지 않은 경우에 버튼..

1. 회원가입 폼 오류 확인하기 처음에는 발견하지 못했는데, 강의를 수강하다가 알게 되었다. - 인증번호 받기를 여러 번 클릭하면 여러 번 시간 반복 함수가 실행되어 서로 화면 갱신하기 위하여 충돌이 발생한다. - setInterval 함수가 종료되지 않아서 계속 else 구문을 반복한다. 2가지 문제점이 발생하였고, 문제점을 해결해보자. 2. 회원가입 폼 오류 수정하기 2-1. 인증번호 받기 버튼 제어하기 인증번호 받기 버튼을 제어하기 위하여 버튼의 상태를 Boolean을 통하여 설정한다. 상태를 제어하는데에 Boolean이 많이 사용되므로, 자주 이용하기. 주의할 점은 시간은 함수 내에 지정해야 하고, 버튼 상태는 함수 밖에 지정해야 한다. 그래야 시간은 계속하여 갱신되어 나중에 버튼을 눌러도 실행되..

1. 함수 - 우리가 직접 만드는 기능을 의미한다. - 기능 제작 function 함수명(매개변수){ 함수를 호출했을 때 실행할 명령문 } // 매개변수와 데이터 반환은 옵션이다. 매개변수 데이터를 외부에서 받아와서 함수 안에서 이용하는 것이다. 필요 시 받아서 이용하는 것이기 때문에 옵션이다. 예를 들면 내장 함수에서 데이터를 받아야 되는 경우가 있을 수 있지만, 아닌 경우도 있을 수 있다. 데이터 반환 return 을 이용하여 결과 데이터를 반환하는 것을 의미한다. 필요 시 반환하는 것이기 때문에 옵션이다. // 함수 실습 function sayHello() { console.log("안녕하세요."); } // undefined sayHello(); // 안녕하세요. // undefined funct..

회원가입 인증 번호 시간 타이머 제작하기 1. 회원가입 인증 번호 시간 타이머 제작하기. 2, 회원가입 특정 시간 도달 시 인증 버튼 없애기. 3. 회원가입 특정 시간이 0초인 경우 인증 완료 버튼 비활성화 및 색상 변경하기. - setInterval 내장 함수를 이용하여 타이머를 제작하기. - 초에서 남은 분과 남은 초를 모두 계산하여, 화면에 보여줘야 한다. - 특정 시간이 되면 버튼을 비활성화하기. 1. 제작 방식 회원가입 인증 번호 시간 타이머를 제작하기 위해서는 dom을 조작하여 화면에 있는 숫자를 변경해야 한다. 180초 // 3분 179초 // 2분 59초 178초 // 2분 58초 . . . 인증번호 받는 버튼을 누르는 동시에 3분 부터 카운트 시작하기. 남은 시간을 분, 초로 환산하여 변..

[교내 경진대회] 국건영 데이터과학 본 조사의 목적은 국민의 건강수준, 건강행태, 식품 및 영양섭취 실태에 대한 국가 단위의 대표성과 신뢰성을 갖춘 통계를 산출하고, 이를 통해 국민건강증진종합계획의 목표 설정 및 평가, 건강증진 프로그램 개발 등 보건정책의 기초자료로 활용하는 것이다. 1. 대회 참가 학생 소개 및 역할 - 팀 이름 : 수원대 질병 관리 - 대회 참가 학생 소개 및 역할 학번 이름 역할 20516001 강서연 1. 데이터 시각화하기. 2. 모델링하기. 3. Grid Search를 이용하여 의사결정트리 하이퍼 파라미터 튜닝하기. 20516008 김노정 1. [참고용] 조사자들의 전체 기본 정보 전처리 및 시각화 제작하기. 2. 데이터 전처리 및 시각화하기. 3. 최적의 모델 선택 및 시간 ..

1. Dom - Document Object Model - 동적인 프로그램으로 만들기 위하여 사용한다. 2. Dom 사용하는 방법 html 파일에서 id를 통하여 해당되는 태그를 가져오기. 해당 태그를 제작한 기능으로 제어하기. 2-1. html 코드 Hello 에서 World로 변경하는 버튼 만들기 Hello Change 2-2. javascript 코드 // 1. html에서 해당 태그를 가져오기 const targetWord = document.getElementById("target__word"); // console.log(targetWord); // 2. 해당 태그를 제어하기 const changeWord = function () { targetWord.innerText = "World"; }..