용용it

요즘 맨날 리액트로만 프로젝트 하다보니 환기도 할 겸 toggle button 만들어 보려고 한다..! HTML 삽입 미리보기할 수 없는 소스 간단하게 말 하자면, 우리가 기존에 알고 있는 체크 박스 input 아래에 label 태그를 써서 컨텐츠와 input을 연결한다. 이게 무슨 말이냐면, 우리가 login 텍스트를 클릭해도 input 박스를 클릭한 것과 같은 효과이다 즉, label 태그의 for 속성과 input 태그의 id와 연결시킨 거라고 생각하면 된다. 단, 이 부분을 누르면 체크 ! label 태그 안에 input 태그를 넣은 경우, 연관이 암시적으로 되었기 때문에 for 속성과 id 속성이 필요 없다

제어문은 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용한다. 일반적으로 코드는 위에서 아래 방향으로 순차적으로 실행된다. 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어할 수 있다. 블록문 블록문은 0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록 또는 블록이라고 부르기도 한다. 블록문은 단독으로 사용할 수도 있으나 일반적으로 제어문이나 함수를 정의할 때 사용하는 것이 일반적이다. 블록문은 자체 종결성을 갖기 때문에 블록문의 끝에는 세미콜론을 붙이지 않는다. 조건문 조건문은 주어진 조건식의 평가 결과에 따라 블록문의 실행을 결정한다. 조건식은 불리언 값으로 평가될 수 있는 표현식이다. 자바스크립트는 if...else 문과 switch 문으로 두 가지 조건문을 제공한다...

연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다. 이때 연산의 대상을 피연산자라고 한다. 피연산자는 값으로 평가될 수 있는 표현식이어야 한다. 산술 연산자 산술 연산자는 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다. 산술 연산이 불가능한 경우, NaN을 반환한다. 이항 산술 연산자 이항 산술 연산자는 2개의 피연산자를 산술 연산하여 숫자 값을 만든다. 모든 이항 산술 연산자는 피연산자의 값을 변경하는 부수 효과가 없다. 다시말해, 어떤 산술 연산을 해도 피연산자의 값이 바뀌는 경우는 없고 언제나 새로운 값을 만들 뿐이다. 이항 산술 연산자 의미 부수 효과 + 덧셈 x - 뺄셈 x * 곱셈 x / 나눗셈 x % 나머..

데이터 타입(data type) 데이터 타입은 값의 종류를 말한다. 자바스크립트의 모든 값은 타입을 갖는다. 자바스크립트에서는 원시 타입과 객체 타입으로 나눌 수 있다. 원시 타입은 불리언 Boolean 타입 : 논리적 참과 거짓 숫자 Number 타입 : 숫자, 정수와 실수 구분 없이 하나의 숫자 타입만 존재 문자열 String 타입 : 문자열 심볼 Symbol 타입: ES6에서 추가된 타입이다. Null 타입 : 값이 없다는 것을 의도적으로 명시할 때 사용하는 값 Undefined 타입 : var 키워드로 선언된 변수에 암묵적으로 할당되는 값 객체 타입은 객체,함수,배열 등이 있다. 숫자 타입 자바스크립트에는 하나의 숫자 타입만 존재한다. ECMAScript 표준에 따르면, 숫자 타입의 값은 배정밀도..

값(value) 값은 식이 평가되어 생성된 결과를 말한다. 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이라고 했었다. 따라서 변수에 할당되는 것은 값이다. 리터럴 (litertal) 리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법을 말한다. 리터럴은 값을 생성하기 위해 미리 약속한 고정된 값을 표기하는 표기법이라고 할 수 있다. 표현식(expression) 표현식은 값으로 평가될 수 있는 문(statement)이다. 즉, 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다. 표현식은 리터럴, 식별자, 연산자 등의 구성된다. 값으로 표현될 수 있는 문은 모두 표현식이다. 문(statement) 문은..

변수 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다. 프로그래밍 언어에서 값을 저장하고 참조하는 메커니즘으로, 값의 위치를 가리키는 상징적인 이름이다. 변수에 여러개의 값을 저장하려면 여러 개의 변수를 사용해야 한다. 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름을 변수 이름, 혹은 변수명이라고 한다. 변수에 저장된 값을 변수 값이라고 한다. 변수에 값을 저장하는 것을 할당aasignment(대입,저장)이라고 한다. 변수에 저장된 값을 읽어 들이는 것을 참조(reference)라 한다. 식별자 변수 이름을 식별자(identifier)라고도 한다. 식별자는 어떤 값을 구별해서 식별할 수 있느 고유한 이름을 말한다. 식별자는 값이..

자바스크립트를 공부하기 전에 기초적으로 내가 무엇을 알고 공부하는지 알아야 하기 때문에 가장 기초적인 것부터 공부하기로 했다. 1.프로그래밍 프로그래밍이란 무엇일까 ? 프로그래밍이란 컴퓨터에게 실행, 즉 동작을 요구하는 일종의 커뮤니케이션이라고 한다. 0과 1만을 알지 못하는 컴퓨터에게 요구 사항을 정확하게 설명, 전달하는 작업이 프로그래밍이고, 그 결과가 코드이다. 컴퓨터는 사람이 아니기 때문에 대략적으로 전달하면 요구사항이 뭔지 알 수가 없다. 그렇게 때문에 우리는 해결해야 할 문제가 무엇인지 명확하게 이해하고 이 문제를 해결하기 위한 "문제 해결 능력"이 중요하다. 앞에서 말했듯이 컴퓨터는 사람이 아니기 때문에 우리는 컴퓨터의 입장에서 생각할 필요가 있다. "컴퓨팅 사고"가 우리에겐 필요하다. 컴퓨..

able : 요소처럼 표현합니다. table-caption : 요소처럼 표현합니다. table-column-group : 요소처럼 표현합니다. table-header-group : 요소처럼 표현합니다. table-footer-group : 요소처럼 표현합니다. table-row-group : 요소처럼 표현합니다. table-cell : 요소처럼 표현합니다. table-column : 요소처럼 표현합니다. table-row : 요소처럼 표현합니다. /* display 속성 중 table 관련 속성 table -> table table-caption -> caption table-cell -> td table-column -> col table-column-group -> colgroup table-foot..

유튜브, 구글링을 통해 로딩바를 만들어보았다. 본인은 rbg를 너무 좋아하기 때문에 rgb를 이용해서 만들어 보았다. 만들면서 새로 배우게 된 css 속성들 animation : 속성의 이름 그대로 애니메이션을 css로 할 때 사용한다. linear-gradient : 두 개 이상의 색이 직선을 따라 점진적으로 변화하는 이미지를 생성한다. 사용법은 linear-gradient (방향 또는 각도, 색상 그리고 정지점, 색상 그리고 정지점) 방향 또는 각도라고 했었는데 아무것도 입력하지 않으면 to bottom, 즉 , 아래를 향해서 변화한다. 왼쪽에서 오른쪽으로 가고싶으면 to right, 혹은 90deg라고 한다. 아래에서 위쪽으로 가고싶으면 to top 혹은 180deg라고 한다. @keyframes ..