코딩(42)
-
Day3_VSCODE_JavaScript_ 화살표 함수
🔴파이썬과 다른 점 🔴🟢 화살표 함수 - function 키워드를 사용하여 함수를 만드는 것 보다 간단하게 표현 - 화살표 함수는 항상 익명 [문법] ✔매개변수가 없을 경우 [ver1] const 함수명 = () => { 함수가 호출 되었을 때 실행될 문장; } [ver2] const 함수명 = () => 함수가 호출되었을 때 실행될 문장; ================================================ ✔매개변수가 있을 경우 [ver1] const 함수명 = (매개변수1,매개변수2...) => { 함수가 호출 되었을 때 실행될 문장; } [ver2] const 함수명 = (매개변수1,매개변수2) => 함수가 호출되었을 때 실행될 문장; ✔ 매개변수가 1개인 경우: 소괄호 생략 가..
2023.04.06 -
Day3_VSCODE_JavaScript_ 호이스팅(Hosting)
🔴🟢호이스팅(hoisting) - 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것 - var 변수의 경우: 호이스팅 시 undefined로 변수를 초기화 - let과 const 경우: 호이스팅 시 변수를 초기화 시키지 않음 예시1- 함수 호이스팅이 된 경우 [함수 호이스팅] func1() .... .... function func1(){ console.log('이제서야 정의') } ===================================================== --> interpreting 결과: 함수 호이스팅 function func1(){ console.log('이제서야 정의') } .... .... func1() [변수 호이스팅] func2(); .... .....
2023.04.06 -
Day3_VSCODE_JavaScript_ 함수 호출 및 함수 선언 기초
🟢사용자 정의 함수(function) - 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록 - 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있음 - 코드를 재활용 🟡 함수 선언식 function 함수명(매개변수1,매개변수2.....){ 함수가 호출 되었을 때 실행할 문장; ..... return 값; } [호출] 함수명(값1,값2....) 🟡 함수 표현식 let/const 변수명 = function(매개변수1,매개변수2......){ 함수가 호출 되었을 때 실행할 문장; .... return 값 } [호출] 변수명(값1,값2...) //함수 호출 function func1(){ console.log('func1() 호출!') } func1(); function func2(num){ ..
2023.04.06 -
Day2_VSCODE_JavaScript_자료구조 배열
🟡배열(Array) - 이름과 인덱스로 참조되는 정렬된 값의 집합(자료구조) - 배열을 구성하는 가각의 값을 배열 요소라고 하며, 배열에서의 위치를 가치키는 숫자를 인덱스라고함 [배열 선언] let 배열명; [배열 초기화] 배열명 = [요소1,요소2,요소3,요소4....]; [배열 객체로 생성] const 배열명 = new Array(요소1,요소2,요소3....); [배열의 접근] let arr; arr = [10,20,30] console.log(arr[0]); // 10 console.log(arr[1]); // 20 console.log(arr[2]); // 30 🟡배열(Array)의 특징(자바스크립트 안) 1. 배열 오소의 타입이 고정되어 있지 않음 let arr= [1,1.5,'김사과',tru..
2023.04.05 -
Day4_VSCODE_CSS 다단 레이아웃 + Flex 레이아웃
🟢다단 레이아웃 - 텍스트를 column 속성으로 다단을 설정 - 다단은 레이아웃을 여러개의 컬럼으로 쪼개서 구성한다는 의미 속성 column-count: 단의 개수 column-rule: 단과 단사이의 구분선, 구분의 모양, 두께, 색상 설정 column-gqp: 단과 단 사이의 여백을 설정 column-span: 단과 안의 포함된 요소를 다단편집에서 해제 (all) 코드블록 #container{ width: 1000px; margin:0 auto; } header{ padding: 20px; border: 1px solid gray; margin-bottom: 20px; } #contents{ border:1px solid gray; padding: 20px; width: 700px; float: l..
2023.03.30 -
Day3 VSCODE_CSS Z-Index + Float + Clear
Z-index - HTML 요소의 위치를 설정하게 되면 위치 및 방식에 따라 요소가 겹칠수 있음 - 겹치는 요소들이 쌓이는 순서를 결정할 때 z-index를 사용 - 순서는 숫자의 크기가 클수록 위에 위치하고 작을 수록 아래 위치 하게 됨 z-index 1번째 div 2번째 div 3번째 div Float - html 요소가 주변(수평으로 나열된)의 다른요소들과 자연스럽게 어울리도록 만들기 위해 사용 - float를 적용받은 요소의 다음에 나오는 모든 요소들이 끌어올려짐 - float를 적용받은 요소들의 방향을 결졍(left,right) - 컨텐츠 크기 만큼만 영역을 설정(블록태그) - float를 적용받은 요소는 다른 요소보다 위쪽에 위치한다(배경보다 위) float2 박스-1 박스-2 박스-3 박..
2023.03.29