1. Positioning 가. position .box-position { position: static; } Position 옵션 설명 static (default) Position의 기본값. 상위 요소나 다른 요소에 영향을 받지 않고 문서의 흐름에 따라 위치가 결정됩니다. relative 일반적인 문서 흐름에 따라 배치하고, 조상 요소를 기준으로 top, right, bottom, left의 값으로 위치를 조정. absolute 가장 가까운 위치 지정 조상 요소(position 값이 static이 아닌 요소)에 대해 상대적으로 위치를 결정하며, 위치 지정 조상이 없으면 document의 body에 대해 상대적으로 위치가 결정됩니다. fixed viewport(브라우저 창)를 기준으로 위치를 결정합니..

1. BOM JavaScript Window W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com BOM : Browser Object Model : 브라우저 객체 모델 : 웹 브라우저와 관련된 모든 객체들의 집합. 객체 설명 screen 모니터의 정보 navigator 현재 실행 중인 브라우저의 정보 location URL의 정보 history 방문 기록에 대한 정보 docu..

1. destructuring operator var obj={ "a":2, "b":3 } let {a,b}=obj; console.log(a,b); //출력 2 3 What does this javascript syntax means: const { headers, method, url } = request; It's not clear what this syntax means const { headers, method, url } = request; found in this tut https://nodejs.org/en/docs/guides/anatomy-of-an-http-transaction/ stackoverflow.com

0. 참고자료 1. async async function - JavaScript | MDN async function 선언은 AsyncFunction객체를 반환하는 하나의 비동기 함수를 정의합니다. 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 Promise를 사용하여 결과를 반환 developer.mozilla.org async function 선언은 AsyncFunction객체를 반환하는 하나의 비동기 함수를 정의합니다. 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수로, 암시적으로 Promise를 사용하여 결과를 반환합니다. (출력값이 Promise 객체다.) 그러나 비동기 함수를 사용하는 코드의 구문과 구조는, 표준 동기 함수를 사용하는 것과 많이 비슷합니..

1. 결론 생활코딩 강의를 봅시다. (https://youtu.be/61iolhWgQt0) 생활코딩 유튜브 결론은 var보단 let을, 가능하다면 const를 사용하자. 2. 이유 var let const var let const global O X X script scope X O O function local scope O O O block scope X O O 재선언 O X X 재할당 O O X const는 값을 재할당 할 수 없다. 이를 제외하면 let과 동일하게 작동한다. 중요한 것은 var과 let의 차이다. 우선 var을 사용하면 다음과 같은 문제가 생긴다. 재할당이 가능하다. block scope를 무시한다. script scope를 무시한다. a. 재할당이 가능하다. var은 재할당이 가..

계산기 이렇게 생긴 계산기를 Html, CSS, JS를 이용해서 만들어보자. 유튜버 수코딩님의 강의 영상을 보고서 따라 했다. https://www.youtube.com/watch?v=rWFAR1mql8Q 클론 코딩을 하면서 배운 점을 정리해보자. 1. 파일 보관 중인 Github 주소 : https://github.com/ramen4598/clone_calculator index.html style.css :root{ /* color */ --red-color : #ea6d5a; --orange-color: #f4b23e; --green-color: #2f6d1c; --background-color: #1f1f1f; --calculator-color: #ccc; --black-color: #333; /..

참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 JS 코드 설명 main.js const moreBtn = document.querySelector('.info .metadata .moreBtn'); const title = document.querySelector('.info .metadata .title'); moreBtn.addEventListener('click', ()=>{ moreBtn.classList.toggle('clicked'); title.classList.toggle('clamp'); }); 람다식으로 작성된 코드다. 동적으로 moreBtn과 title에 class 값으로 clicked과 clamp를 추가하고 삭제한다. style.css ..

참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 flex 각각의 flex의 item들이 컨테이너에서 차지하는 크기를 설정할 수 있다. 아래는 3개의 item들의 각기 다른 범위를 차치하는 상황이다. flex-grow flex-grow는 아이템이 flex-basis의 값보다 커질 수 있는지를 결정한다. 기본값은 0이다. 그래서 따로 값을 설정하기 전까지는 아이템이 늘어나지 않는다. 설정된 flex-grow의 값에 비례해서 여백 부분을 할당받는다. .upNext .item .img { flex-grow: 1; } .upNext .item .info { flex-grow: 1; } .upNext .item .moreBtn { flex-grow: 1; } 해당 예시에..