인생 1회차 (First-Life) Ing

처음 배우는 개념이라 아직 어렵긴 하지만 정말 신세계다..! 자바스크립트 공부하기도 바쁜데 다시 CSS 공부하는게 맞나 싶었는데 몰랐으면 후회할 뻔! 참고 (1분코딩 블로그) : https://studiomeal.com/archives/533 ※ 그리드에 대한 오해? "Grid는 인터넷 익스플로러에서 지원하지 않기 때문에 우리나라에서는 그림의 떡이다" X. IE10과 11에서도 구버전 스펙을 지원하기 때문에 좀 귀찮기는 해도 방법이 있다! 분명 한계는 있지만 뭐가 다른지를 잘 알아두고 대응하면 충분히 사용 가능! Grid 레이아웃을 만들기 위한 기본적인 HTML 구조 A B C D E F G H I 용어정리 그리드 컨테이너 (Grid Container) : display: grid를 적용하는 grid 전..

👉인프런에서 수강하는 1분코딩 강의 노트 flex는 html, css 하면서 한 번 공부했는데 Grid는 해본 적이 없어서 flex 복습 겸 grid 공부! 새로 알게된 내용도 있어서 신기ㅎㅎ 출처 : 1분코딩 블로그 https://studiomeal.com/archives/197 Flex 레이아웃을 만들기 위한 기본적인 HTML 구조 Hello flex bye Flex 컨테이너에 적용하는 속성들 display : flex 아이템들은 가로 방향(기본)으로 배치됨 자신이 가진 내용물의 width 만큼만 차지하게 됨 (inline 요소처럼) height는 컨테이너의 높이만큼 늘어남 inline-flex도 있는데, 이건 block과 inline-block의 관계와 같음 아이템들이 배치된 방향의 축을 메인 축 ..

getCurrentPosition() : 장치의 현재 위치를 가져옴 openwhathermap 사이트 : https://openweathermap.org/ Сurrent weather and forecast - OpenWeatherMap Access current weather data for any location on Earth including over 200,000 cities! The data is frequently updated based on the global and local weather models, satellites, radars and a vast network of weather stations. how to obtain APIs (subscriptions w openweat..

JSON.stringify () : javaScript 값이나 객체를 string(문자열)으로 만들어줌 JSON.parse() : JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성함 fliter() : 지우고 싶은 (배열)아이템을 제외함, 넣고 싶은 아이템은 반드시 true로 리턴함, filter 는 원래 array를 변경하지 않고 새 array를 생성함 // filter 예제 function abc(item) { return item !==3 } [1,2,3,4,5].filter(abc); // 결과 [1,2,4,5] parseInt() : 문자열을 숫자로 바꿔줌 to do list 만들기 const toDoForm = document.querySelector("#..

Math.random() : 랜덤한 숫자 Math.ceil() : 올림 Math.round() : 반올림 Math:floor() : 내림 랜덤하게 노래 / 가수 제목 표시하기 ( Quotes 대신) const quotes = [ { title : "꽃길만 걷자", singer : "버블 사운드" }, { title : "있잖아", singer : "데이식스" }, { title : "너를 생각해", singer : "주시크" }, { title : "savage", singer : "aespa" }, { title : "My Universe", singer : "방탄소년단" }, { title : "나의 첫사랑", singer : "다비치" }, { title : "Only You", singer : "..

setIntervals : '매 n초/분…마다' 무언가를 실행하고 싶을 때 사용 setTimeout : 일정 시간 후에 실행하게 함 new Date : 오늘 날짜 (getDate/Day/FullYear/Hours/Minutes/Second) padStart() : string에 쓰는 함수로 원하는 글자수를 만들 때 (앞부분에 string을 추가하여) 사용 ↔ padEnd() "1".padStart(2,"0") // padStart(원하는글자수, "추가할 글자") // 결과 "01" 시계만들기 const clock = document.querySelector("#clock") function getClock (){ const date = new Date(); const hours = String(date...

username 입력받고 저장하고 불러오기 const loginForm = document.querySelector("#login-form"); const loginInput = document.querySelector("#login-form input"); const greeting = document.querySelector("#greeting"); const HIDDEN_CLASSNAME = "hidden"; const USERNAME_KEY = "username"; function onLoginSubmit (event){ event.preventDefault(); // 브라우저 기본동작 막기 loginForm.classList.add(HIDDEN_CLASSNAME) // form 다시 숨겨주기 c..

DOM : Document Object Model 자바스크립트로 HTML를 object 형태로 제어(읽고 수정하고 추가 등)할 수 있음! const hello = document.getElementById("Hi"); const hello = document.getElementByClassName("Hi"); querySelector - element를 CSS 방식으로 가져올 수 있음, 단 하나의 element를 가져옴 (여러개의 경우 제일 첫번째 것만 가져옴) querySelectorAll - 조건에 부합하는 모든 element를 가져옴 const title = document.qeurySelector(".hello h1"); addEventListener const h1 = document.query..

변수 : 값을 저장하거나 유지 const : 변하지 않는 상수, 재할당 불가 // const 의 재할당이란? // 전체를 하나의 값으로 업데이트 하려고 할 때는 불가. 배열추가, 오브젝트 property 추가 등은 가능. const player = ["One"] player.push("Two"); // 가능 player = false // 불가능​ let : 값 변경 가능, 재할당 가능(재할당 할 때 let을 안붙이고 변수 이름만 쓰면 됨) var : 실수할 가능성이 크기 때문에 쓰지 말 것 → const 를 기본적으로 사용하고, 업데이트 하고 싶은 변수에만 let을 사용 → 변수의 사용만 보고도 의도를 파악할 수 있기 때문에 var 는 비추천 null & undefined null : 비어있음, 자연적..