프론트엔드 지망생

- 프론트엔드 공부 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..

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

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

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

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

--프론트엔드 공부 01일차- HTML(Hyper Text Markup Language) : 네트워크가 연결된 웹페이지에서 문서를 작성하고 읽고 공유하기 위해  만들어진 체태그 : tag를 통해 웹페이지에서 보여질 내용을 나타냄내용태그 : 약속된 명령어 -> 고유한 기능을 가지고 있다.태그는 매우 많이 존재하기에 모두 외울 필요는 없다. 자주 쓰이는 것만 알고 있자! 태그 종류꾸며주는 태그 글씨를 굵게 글씨에 밑줄 글씨를 기울게 빈태그 줄 바꿈 .... 코드 작성 시 Enter를 입력해 줄 바꾸면 안되나요? 컴퓨터는 2칸 이상의 빈칸을 인식하지 못한다. 선 긋기 특정 기능이 있는 태그   버튼 만들기  글씨를 입력 가능한 박스 이미지, 동영상 태그 태그는 속성과 값으로 부가적인 기능을 구현할 수 있다. ..