본문 바로가기
728x90
반응형
SMALL
[JavaScript] 제어문 - 2️⃣ 반복문 (while문, for문, break, continue) 1. while문 1-1. while while(조건식){ 조건식의 결과가 true인 동안 반복할 문장; ... } 1-2. do ~ while 조건식의 결과가 처음부터 false일 경우에도 한번은 {} 블록의 문장을 실행함 do { 조건식의 결과가 true인 동안 반복할 문장; .... }while(조건식) 반복문 2. for문 for(초기값; 조건식; 증감식;){ 조건식의 결과가 true인 동안 반복할 문장; ... } ✔ for문의 무한루프 for(;;){ } 반복문 3. break문 switch문 또는 반복중인 루프 내에서 사용하여 해당 문장을 완전히 종료시키고 다음에 위치한 실행문으로 이동 num = 1; while(num 2023. 4. 10.
[JavaScript] 제어문 - 1️⃣ 조건문 (if문, swith문) 1. if문 조건의 범위가 있을 때 사용 1-1. if문 if(조건식){ 조건식의 결과가 true일 때 실행할 문장 ... } 1-2. if~else문 if(조건식){ 조건식의 결과가 true일 때 실행할 문장 ... }else{ 조건식의 결과가 false일 때 실행할 문장 ... } 1-3. if~else if~else문 if(조건식1){ 조건식1의 결과가 true일 때 실행할 문장 ... }else if(조건식2){ 조건식2의 결과가 true일 때 실행할 문장 }else if(조건식3){ 조건식3의 결과가 true일 때 실행할 문장 ... }else{ 모든 조건식의 결과가 false일 때 실행할 문장 } if문 2. switch문 일치하는 값이 있을 때 사용 switch(변수){ case 값1: 변수.. 2023. 4. 7.
[JavaScript] 자바스크립트의 연산자(Operator) 1. 산술 연산자 연산자 의미 + 더하기 연산 - 빼기 연산 * 곱하기 연산 / 나누기 연산 % 나머지 연산 ** 제곱연산 2. 비교 연산자 연산자 의미 a > b a가 b보다 크다 a = b a가 b보다 크거나 같다 a >> 지정한 수만큼 비트를 전부 오른쪽으로 이동시키며, 새로운 비트는 전부 0이 됨. 7. 삼항 연산자 삼항 연산자 변수 = 조건식 ? 반환값 : 반환값2 조건식이 true 반환값1이 변수에 저장 조건식이 false 반환값2가 변수에 저장 2023. 4. 6.
[JavaScript] 자동 타입 변환 & 타입 변환 함수 & NaN(Not a Number) 1. 자동 타입 변환 특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면 자동으로 타입을 변환해서 사용 const num4 = 10 const str3 = "10" console.log(num4 + str3) //1010 console.log(num4 - str3) //0: 자동 형변환 console.log(num4 * str3) //100: 자동 형변환 console.log(num4 / str3) //1: 자동 형변환 2. 타입변환 함수 강제로 타입을 변환할 수 있음 Number(): 문자를 숫자로 변환 String(): 숫자나 불린 등을 문자형으로 변환 Boolean(): 문자나 숫자등을 불린형으로 변환 Object(): 모든 자료형을 객체형으로 변환 parseInt(): 문자를 int형으로 변환.. 2023. 4. 6.
[JavaScript] 자바스크립트의 데이터 타입 1. 데이터 타입(Data Type) 프로그램에서 다룰 수 있는 값의 종류 자바스크립트는 선언시 타입을 정하지 않기 때문에 많은 문제가 발생할 수 있음 자바스크립트의 타입 유연성을 해결하기 위해 타입스크립트가 탄생 1-1. 숫자형(number) 정수와 실수를 따로 구분하지 않음 모든 수를 실수 하나로만 표현 1-2. 문자형(string) ' ' 또는 " " 또는 ` `로 둘러싸인 문자의 집합 num = 10; "입력한 숫자는" + num + "입니다." `입력한 숫자는 ${num} 입니다.`; 1-3. 논리형(boolean) 참(true)과 거짓(false)으로 표현되는 값 false, 0, '', "", null, undefined는 모두 거짓(false)으로 판정함 false가 아닌 모든 값은 참(t.. 2023. 4. 5.
[JavaScript] 자바스크립트의 변수(variable)와 상수(constant) 1. 변수 (variable) 데이터를 저장할 수 있는 메모리 공간 값이 변경될 수 있음 자바스크립트의 변수는 타입이 없음 var, let 키워드를 사용하여 변수를 선언 1-1. var 유연한 변수 선언 방식 지역변수, 전역변수와의 구별이 있음 같은 이름의 변수를 선언할 수 있음 약간의 버그로 인해 변수 선언시 var보다는 let을 주로 사용 // 버그??? console.log(num) var num = 10; { console.log(num); // 전역변수 num = 10 var num = 20; // 지역변수 num = 20 } console.log(num) // 전역변수 num = 20 1-2. let 지역변수, 전역변수의 구별이 확실 같은 이름의 변수를 선언할 수 있음 let 변수명 = 값; .. 2023. 4. 5.
[JavaScript] 주석문 & VSC 익스텐션 설치 - snippets 등록하는 법 1. JavaScript의 주석문 // : 한줄 주석 /* ~ */ : 여러 줄 주석 2. VSC - JS관련 익스텐션 JavaScript (ES6) code snippets 2-1. snippets 등록하기 f1키 ➡ snippet 사용자 코드 조각 구성 ➡ 새 전역 코드 조각 파일➡ 파일이름 저장 2023. 4. 5.
[JavaScript] 자바스크립트의 실행 순서 - <head>태그 사이, <body>태그 끝, <script async>, <script defer> 1. 자바스크립트의 실행 순서 인터프리터 방식이므로 위에서 아래로 실행 1-1. Javascript 파일 및 문장 사이에 넣었을 경우 html문서의 시작 ➡ 에 있는 를 다운로드/실행 ➡ 에 있는 HTML 태그를 실행 ➡ 끝 외부 script 파일을 사용할 경우 script 파일 다운로드가 늦을 때 HTML이 실행되지 않은 상태에서 빈 화면이 보일 수 있음 1-2. JavaScript 파일 및 문장을 끝에 넣을 경우 html문서의 시작 ➡ 에 있는 HTML 태그를 실행 ➡ 를 다운로드/실행 ➡ 끝 완벽하지 않은 HTML이 먼저 보여 잘못된 UI가 보일 수 있음 1-3. 를 사용할 경우 html문서의 시작 ➡ script 파일을 동시에 다운로드/실행 ➡ 에 있는 HTML 태그를 실행 ➡ 끝 script 파.. 2023. 4. 5.
[JavaScript] 자바스크립트란? & 자바스크립트의 역사, 특징, 출력 1. 자바스크립트(JavaScript)란 ❓ Ecma International의 프로토타입 기반의 프로그래밍 언어로, 스크립트 언어 HTML, CSS와 함께 웹을 구성하는 요소 중 하나 클라이언트 단에서 웹 페이지가 동작하는 것을 담당 썬 마이크로시스템즈(현 오라클)에서 개발한 Java와 관계 없는 언어 2. 자바스크립트의 역사 1995년 넷스케이프 내비게이터 : 네비게이터 브라우저가 90% 이상의 점유율 1996년 브랜던 아이크 동적인 프로그램을 개발하기 위해 언어(모카, 10일만에 개발)를 개발 네비게이터2에 탑재(모카 ➡라이브스크립트➡자바스크립트) MS의 익스플로러의 jscript 호환성 문제로 크로스 브라우징 이슈가 발생 1997년 자바스크립트는 ECMAScript(비영리 표준화 기구 ECMA 인.. 2023. 4. 5.
[CSS] 미디어 쿼리 - @media, 반응형 웹 1. 미디어 쿼리(Media Query) 1-1. 반응형 웹 하나의 웹사이트에서 PC, 스마트폰, 태블릿 등 접속하는 디스플레이 종류에 따라 화면의 크기가 자동으로 변하도록 만든 웹페이지 접근 방법 @media 매체유형 and (속성에 대한 조건) { css코드 ... } ✔️ 매체유형 all: 모든 매체 screen: 컴퓨터, 태블릿, 스마트폰 ...(해상도로 구분함) printer: 프린터 speech: 스크린 리더 ✅ 화면크기에 따라 배경 색상이 달라지는 반응형 웹 미디어 쿼리 ✅ 다음 페이지를 반응형 웹으로 만들어보자. 📄 외부 스타일로 적용한 css 파일 인스타그램 유튜브 페이스북 트위터 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ar.. 2023. 4. 4.
[CSS] Flex 레이아웃 - 요소 정렬, 배치하기 1. Flex 레이아웃 수평정렬을 하기 위한 속성 display: flex로 설정해야 함 2. 속성 2-1. flex-wrap 플렉스 라인에 여유가 없을 때 플렉스 요소의 위치를 결정하는 속성 nowrap: 기본값. 플렉스 요소가 다음줄로 넘어가지 않음. 요소의 너비를 줄여서 한줄에 배치 wrap: 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김 wrap-reverse: 플렉스 요소의 여유 공간이 없다면 다음줄로 넘김(단, 아래쪽이 아닌 위쪽으로 넘김) 2-2. flex-direction 플렉스 요소들이 배치되는 축의 방향을 결정하는 속성 row: 기본값, 가로로 배치 row-reverse: 가로로 배치(반대로) colunm: 세로로 배치 (반대로) column-reverse: 세로로 배치(반대로) 2-.. 2023. 4. 4.
[CSS] 레이아웃 설정하기 - 2단 레이아웃, 3단 레이아웃, 다단 레이아웃 1. 2단 레이아웃 📄외부스타일로 적용한 css 파일 다단 레이아웃 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam amet cum exercitationem ad velit consequuntur, magni incidunt. Reprehenderit iste, placeat, animi commodi possimus facere, velit autem culpa dicta laudantium voluptatem!Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam amet cum exercitationem ad velit consequuntur, magni incidu.. 2023. 3. 31.
728x90
반응형
LIST

티스토리툴바