반복문은 어떻게 작성할까? while 문 --기본 형식while(조건식) { // 조건식이 참이면 실행한다. // 수행이 끝나면 다시 조건식으로 돌아간다. // 즉, 조건식이 참인 동안 계속 반복 수행한다.} 예시 코드let x = 0;while (x 주의조건이 항상 참인 경우 무한 반복으로 while문에 갇힐 수 있기 때문에continue 또는 break문을 잘 사용하거나 조건문이 false가 될 수 있도록 코드를 작성해야 한다.- continue : continue문을 만나는 순간 바로 해당 반복문 맨 위로 이동하여 다음 반복문을 이어서 진행한다.- break : 반복문을 탈출한다.-- do while 문 --while문과 동일하지만 조건문이 참이든 거짓이든..
전체 글
조건문은 어떻게 작성할까? if / else 문 --기본 형식if(조건식) { // 조건식이 참이면 실행}if(조건식) { // 조건식이 참이면 실행} else { // 조건식이 거짓이면 실행}if(조건식1) { // 조건식1이 참이면 실행} else if(조건식2) { // 조건식1이 거짓이고 조건식2가 참이면 실행} else { // 모든 조건식이 거짓이면 실행}if(조건식1) { // 조건식1이 참이면 실행} else if(조건식2) { // 조건식1이 거짓이고 조건식2가 참이면 실행} else if(조건식3) { // 조건식1, 2가 거짓이고 조건식3이 참이면 실행} else { // 모든 조건식이 거짓이면 실행}만약 블록{}에 코드가..
어떤 연산자들이 있을까? 산술 연산자 --숫자 연산을 수행하는 연산자+ 연산자를 사용할 때 피연산자를 문자열로 사용할 수 있으며두 문자열을 이어서 붙이는 결과를 나타낸다.-- 대입 연산자 --데이터를 대입(할당)하는 연산자-- 비교 연산자 --피연산자를 비교한 후 논리형 값인 참(true) 또는 거짓(false) 값을 반환하는 연산자피연산자에 문자열을 사용하면, >= 연산자에서 각 문자열의 사전적 순서를 기준으로 비교 연산한다.문자열과 숫자를 비교하면 문자열을 숫자로 변경 후 숫자로 비교한다. (숫자 형태의 문자열인 경우)-- 논리 연산자 --피연산자를 각각 논리적으로 평가한 뒤, 서로 조건에 맞는 피연산자를 반환즉, 각 피연산자는 boolean 타입이다.빈 문자열(""), un..
자료형은 어떻게 사용할까? 자료형 --자료형은데이터의 종류를 의미하고 크게 2가지로 구분된다. 기본 자료형 : string(문자열), number(숫자), 논리(boolean), undefined, null, Symbol참조 자료형 : object(객체)-- 문자열 (string) --문자열을 가지는 자료형으로 작은따옴표(') 또는 큰 따옴표(")로 묶은 문자열을 값으로 가진다. 예시 코드let string1 = "Hello, World!";let string2 = 'Hello, World!';console.log(string1);console.log(string2);-----출력 결과-----------------------------------Hello, World!Hello, ..
변수와 상수는 어떻게 사용할까? 변수 --예전에는 "var" 키워드를 사용하여 변수를 사용했지만이제는 "let"과 "const" 키워드를 통해 변수를 사용한다. (ES6에 새로 추가됨) let : 변경이 가능한 변수const : 변경이 불가능한 변수 변수는 초기에 값을 정의하지 않고 선언만 할 수도 있다. let 키워드 (변수) 기본 형식let 변수명 = 값;let 변수명;변수명 = 값; 특징 (var 변수와 차이)변수명 중복 사용 불가능 (var 변수는 덮어씌우는 방식으로 가능했다.)호이스팅 불가능스코프 범위가 다름호이스팅(Hoisting)은자바스크립트에서 변수와 함수 선언이 코드 실행 전에 메모리에 미리 할당되는 동작을 의미한다.즉, var 키워드로 변수를 선언하고 할당할..
자바스크립트는 어떻게 사용할까? HTML 파일과 자바스크립트 연결 방법 --웹 브라우저에 표시할 HTML 문서에 자바스크립트를 적용하기 위해서는HTML 문서와 자바스크립트 코드를 연결해야 한다.단순 자바스크립트 코드 실행이 목적이라면 에디터에서 .js파일에 코드를 작성하거나 콘솔차에 작성 내부 스크립트를 통해 연결HTML 파일에서 바로 "script 태그"를 통해 콘텐츠 영역에 자바스크립트 코드를 작성한다. 예시 코드 script 태그는 head태그나 body태그 어디에든 작성해도 상관없지만일반적으로 body태그에서 가장 마지막에 작성하는 것을 권장한다.웹 브라우저는 HTML 문서의 첫 줄부터 순차적으로 읽어오기 때문에당장 보여줘야 하는 HTML과 CSS를 먼저 구성한 뒤에 마지막..
환경에 따른 반응형 웹 페이지는 어떻게 할까? 미디어 쿼리 (Media Query) --미디어 쿼리는 반응형 웹 페이지를 만드는 주요 기술 중 하나로화면 크기, 해상도, 디바이스 특성에 따라 스타일을 변경하는 기능이다. 기본 형식@media (조건) { /* 조건이 충족될 때 적용할 스타일 */}@media and () () { /* 조건이 충족될 때 적용할 스타일 */} only는 대부분의 최신 브라우저에서 의미가 없으므로 잘 사용되지 않는다.미디어 쿼리가 적용될 미디어 타입을 명시하는 것으로생략하지 않으면 반드시 다음에 and 연산자가 와야 한다.미디어 쿼리가 적용될 미디어 조건을 정의하는 것으로반드시 괄호() 안에 작성되어야 한다. 예시 코드@media not screen..
2차원 레이아웃은 어떻게 설계할까? 그리드 레이아웃 속성 --그리드 레이아웃 속성은웹 페이지에서 2차원 방식으로 레이아웃을 설계할 수 있도록 고안된 속성으로가로(row)와 세로(column)를 같이 사용해서 레이아웃을 설계한다.그리드를 사용하면 플렉스 박스보다 더욱 폭넓게 설계가 가능하다. 구성 요소 그리드 레이아웃을 확인하는 방법은시각적으로 확인하기 위해서는 크롬 브라우저의 개발자 도구의 Elements 탭에서그리드 컨테이너로 지정된 태그에 있는 그리드 아이콘을 누른다.-- 기본 속성 --display 속성그리드 레이아웃을 지정하는 속성으로그리드 컨테이너를 정의할 때 사용한다. 기본 형식display: flex;/* 또는 */display: inline-flex;flex : 적용된 요..