best part🖤

왜 사용하지? async 함수는 비동기 프로그래밍을 위해 사용된다.일반적으로 코드를 실행할 때, 어떤 작업이 끝날 때까지 기다리는 경우가 있는데, 시간이 오래 걸릴 수 있다. async 함수를 사용하면, 이러한 작업이 끝날 때까지 기다리지 않고 다른 작업을 먼저 처리할 수 있다!이렇게 하면 프로그램의 효율성이 높아지고, 특히 I/O 작업이나 네트워크 요청 같은 시간이 걸리는 작업에서 유용하다. async (어싱크)함수 문법  async는 function 앞에 위치한다.async function f() {       return 1; } function 앞에 async를 붙이면 해당 함수는 항상 프라미스를 반환한다. 프라미스가 아닌 값을 반환하더라도 이행 상태의 프라미스(resolved promise)로 ..

Callback을 사용한 비동기 처리자바스크립트에는 setTimeout() 이라는 대표적인 내장 비동기 함수가 있다. setTimeout()은 두 개의 매개 변수를 받는데, 첫번째는 실행할 작업 내용을 담은 콜백 함수이고, 두 번째는 이 콜백 함수를 수행하기 전에 기다리는 밀리초 단위 시간이다. 즉, setTimeout() 함수는 두번째 인자로 들어온 시간만큼 기다린 후에 첫 번째 인자로 들어온 콜백 함수를 실행한다. 사용예시를 보면 아래처럼 사용할 수 있다.setTimeout(function () { console.log("Hello World");}, 2000);console.log("setTimeout() example...");function async(callback) { setTimeout..

data-*** -HTML5 에 추가된 Element의 속성 -개발자가 element의 속성값으로 data를 넣고 싶을 때 사용 -사용자 정의 속성 사용방법은? data-속성명 ex) data-age="20" ex) data-my-name="name 아무거나" ex) button1 button2 button3 button4 Text1 Text2 Text3 Text4 btns.addEventListener("click",function(event){ let btn=event.target; if(btn.classList.contains("btn")){ let t = btn.getAttribute("data-num");//console.log(t) 버튼클릭하면 숫자나옴 document.getElementByI..

Function 함수 1. 함수선언 function[함수명] ([매개변수 선언]){ [return] } 2. 함수호출 1) 함수명([인자값]); 함수호출을 먼저하고 함수선언을 해도 잘 작동함 3. 함수이름 유무 1) 명명함수 - 이름이 있는 함수 - 함수선언 위치와 함수 호출의 위치는 상관없음 2) 익명함수 (이건 순서가 중요 선언후 호출해야함) - 이름이 없는 함수 - 콜백함수용 ( 어떤 결과물로 실행해야 하는 함수), 다른 함수의 매개변수의 값으로 함수를 넣을 수도 있음 - 함수를 선언하고 호출 4. 매개변수 선언은 변수명만 선언 function test(param1, param2){ } >>이런식으로 변수명만 선언 function test( let param1, param2){ } >> 이렇게 안씀..

JS는 화면을 구성하는 모든 것들을 Object(객체)로 생성하고 관리 BOM(Browser Object Model) BOM 1. window (최상위 객체 자바에서는 object였던 것처럼) - 최상위 객체는 window객체이다 (참조변수명은 생략 가능) a. document: HTML 문서 관리 b. location: URL 관리, 새로고침 c. history: 뒤로가기 앞으로 가기 부분 d. navigator : Web browser 정보를 가지고 있는 애 ex) 크롬, 사파리, 엣지 등.. e. screen: 클라이언트의 모니터 화면정보 참조) https://developer.mozilla.org/ko/docs/Web/API/Window Window - Web API | MDN Window 인터페..

JavaScript 1. Java와는 상관이 없음 2. web browser에서 실행 3. OOP객체지향언어중 하나 4. 인터프리터언어 (Java는 컴파일 언어) - 컴파일 언어는 컴파일시에 에러가 뜨면 실행이 안됨(통번역) - 인터프리터 언어는 실시간 컴파일 언어(동시통역) - 실행 중 오류(에러)가 있으면 그 때 중지 5. web에서 동적인 요소를 담당 6. Javascript 용도 Element는 태그, 속성, contents로 구성 되어 있고 속성은 class="" 나 id="" name="" value="" 등등 이라고 생각하고 있음 Element의 태그, 속성, contents를 변경, 삭제, 추가 하는 용도 - Style (css) 변경, 삭제, 추가 Study2 >>태그 속성 content..

1. fieldset - 입력태그(input 태그)를 구분하는 태그 2. Legend - 입력태그의 제목(title)을 입력하는 태그 - radio, checkbox 선택시 이름을 선택해서 fieldset 부모태그 legend, label 자식태그 -> fieldset 내부에 legend, label이 있어야 함 ID PW 성별 여성 남성

Form form 입력하거나 선택할때 쓰는것 (block태그) - 사용자로부터 입력받거나 선택할 때 사용 - 대부분이 서버로 전송하는 데이터를 입력할 양식 - form 태그 영역 내의 것들을 서버로 전송(parmeter라고 하는것) - form 태그 영역 내에는 input 태그들 사용 ex) post 랑 get태그 모두 가능하게 사용하는건 form태그이다. -method 속성은 생략 가능(Default 는 get) -get 또는 post로 변경 가능 -form태그 영역 내에는 input 태그를 사용 입력태그 input -> 주로 form태그 내에서 사용 - form태그 없이 사용도 가능 (JavaScript와 같이 사용) - 사용자로부터 데이터를 입력 받는 태그 - type이라는 속성값에 따라서 입력양식..

그룹 태그 - 여러개의 Element 를 그룹으로 묶어주는 역할 - 태그 자체는 아무런 효과가 없음 1. div - display 속성이 block 2. span - display 속성이 inline List - 목록 - 주로 메뉴 생성 시 사용 - block 태그 1. 순서가 있는 리스트 (Orderd List) ... 2. 순서가 없는 리스트 (Unordered Liest) ... -- 태그도 Block 태그 Semantic - HTML5에서 추가 - 의미가 있는 태그(검색엔진) - Layout 구조용 -> div 태그 대신에 -> navigation div태그 대신 *틀리거나 문제가 있을 시 바로 수정하겠습니다! 댓글로 남겨주시면 감사하겠습니다 :)

정렬 1. 수평 중앙 정렬 1) block : margin : 0 auto 2) text : text-align : center 3) 부모내에서 자식의 중앙정렬 : 좌우 또는 상하의 padding 값을 동일하게 사용 flex로도 justify-content: center align-items: center size 단위 1. px : pixel 2. % : 부모화면 크기의 백분율 3. em : 주로 폰트크기, 부모의 폰트 크기를 기준으로 한 배수 4. rem : 주로 폰트크기, 접속한 브라우저의 폰트 크기를 기준으로 한 배수 5. vh : View height(모니터 화면 기준), 단위는 백분의 1 단위 1vh = 화면의 높이 / 100 1000px * 1vh=(1000px / 100) =10px 6. ..