프론트엔드 지망생

- 프론트엔드 공부 07일차 - 06일차 인증번호 생성기와 타이머를 만들어보았다. 하지만 해당 코드에서 인증번호 전송을 여러번 누르면 인증번호가 계속 생성되고 타이머는 꼬이는 오류가 생기게 되었다.이를 해결하기 위해 그때 이용한 html은 그대로 사용하고 js만 수정해보았다.let isStarted = false;const createNum = () => { if(isStarted === false){ //타이머가 작동중이지 않을때 isStarted = true document.getElementById("completebtn").disabled = false const num = String(Math.floor(Math.random..

- 싸이월드 실습 4 -  GAME TODAY GAME 끝말잇기 제시어 : 사과 검색 결과! Lotto 버튼을 누르세요. 3 9 15 25 ..

- 프론트엔드 공부 06일차 -  함수우리가 직접 만드는 기능 function 함수이름(매개변수(선택사항)) {함수를 호출했을 때 실행할 명령문}     function hello() {alert(“안녕하세요”)}함수작성방법 함수 선언식function hello(name) {alert(name + "님 안녕하세요")}  함수 표현식const hello = function(name) {alert(name + "님 안녕하세요")}  화살표 함수const hello = (name) => {alert(name + "님 안녕하세요")}   실무에서는 화살표 함수를 많이 사용한다.함수 선언식을 함수 표현식으로, 함수 표현식을 화살표 함수로 변환하는 방법을 알아야한다.  000000 인증번호 전송 let ..

- 싸이월드 실습 3 -  GAME TODAY GAME 끝말잇기 제시어 : 사과 검색 결과! Lotto 버튼을 누르세요. 3 9 15 25 ..

프론트엔드 공부 05일차 - 데이터 타입과 연산자 데이터 타입String            “code”Number         123Boolean         trueObject            { }Null                nullundefined      undefined 연산자 산술 연산자+ : 더하기 - : 빼기 * : 곱하기 / : 나누기 % : 나머지숫자 뿐만 아니라 문자열에도 사용 가능ex) “포론트” + “엔드” = “프론트엔드10 + ‘1’ = ‘101’10 + ‘만원’ = ‘10만원’10 - ‘1’ = 910 * ‘10’ = 100자바스크립트는 유연성을 가지고 있어서 타입이 다른 데이터를 가지고 연산을 하면 자동으로 데이터 타입을 통일해서 연산해준다. 하지만 이러한 ..

- 싸이월드 실습 2 -  TODAY 0 | TOTAL 12345 ..

- 프론트엔드 공부 04일차 -   회원가입을 위해 정보를 입력해주세요 * 이메일 * 이름 * 비밀번호 * 비밀번호 확인 ..

- 프론트엔드 공부 04일차 - html에 JS 연결시키는 방법변수 : 어떤 관계나 범위 안에서 여러가지 값으로 변할 수 있는 수상수 : 변하지 아니하는 일정한 값을 가진 수나 양 -> 데이터를 담는 공간선언 : let (변수명)                   let num할당 : (변수명) = (데이터)      num = 7선언 + 할당 : let (변수명) = (데이터)  let num = 7 변수와 상수의 종류var   이름 중복(재선언), 데이터 수정(재할당) let   이름 중복(재선언) X , 데이터 수정(재할당)const   이름 중복(재선언) X , 데이터 수정(재할당) X현재 var은 많이 쓰이지 않고 있다. 주로 변수는 let 상수는 const로 쓰인다. 변수와 상수의 작명 규칙 관..

- 싸이월드 실습 1 -  TODAY 0 | TOTAL 12345 ..

-프론트엔드 공부 02일차-  CSS 기본 문법단일 속성 지정선택자 {속성: 값;} 다중 속성 지정선택자 {속성: 값;속성: 값;속성: 값;속성: 값;} CSS 사용 방법html 태그 속성에 입력태그에 CSS 속성이 바로 기록되어 있어, 별다른 지정이나 연결이 필요하지 않음하지만 가독성이 떨어지고 필요한 태그를 직접 찾아야한다. 즉 유지보수가 불편하다 박스 1 박스 2 박스 3박스 모델 예제  *{            box-sizing: border-box;        } 위 코드 같은 경우 전체 태그에 border-box를 적용하고 싶을 때 사용하자   정렬  flex여러 태그를 하나로 묶어서 정렬display: flex;(flex-direction: row; 가 기본 형태이다) 박..