영원히 흘러가는 강

css 미디어 쿼리처럼 js에서도 사용할수 있다 window.matchMedia("(min-width: 400px)").matches

전처리기가 아닌 css에서도 변수로 지정하여 사용가능하다. .ex{ --color:black; color:white; } 사용자 속성은 --로 시작해야 하며 --color 은 우리가 새로이 지정한 속성이며 , color은 기존 내장 속성 사용시 var()로 감싸서 사용하면 된다 .ex2{ --white:white; background:var(--white); } 위와 같이 사용가능하다. 두번째 인자로 기본값을 넣어줄수있다. 확실치 않은 경우 활용 가능 .ex3{ color:var(--white,white); } 다만 상위에서 하위로 상속이 되므로 상위에서 정의해야 하위에서 가능하다!! * 전역변수처럼 일관적으로 사용하기 위해 많이 사용!! * IE에서는 지원이 안된다 참고. https://www.dale..

Flex를 사용하게 되면 자동적으로 간격 맞추느냐고 크기를 늘릴수도 작게 만들수도 있다 이때 flex-grow는 크기를 비율에 맞게 크게 가능하고 flex-shrink가 작게 만들게 하는데 flex-shrink :0 사용시 비율 그대로 사용가능.!

opacity는 자동적으로 자식까지 상속해주기 때문에 background-color: rgba(0, 0, 0, 0.6); 이처럼 부모에게 opacity 대신 설정해주면 가능!

쿠키 생성 부분 const setPopCookie = (name, value, expiredays) => { const todayDate = new Date(); todayDate.setDate(todayDate.getDate() + expiredays); document.cookie = `${name}${nodePopUp.id}= ${escape( value )}; path=/ ; expires=${todayDate.toGMTString()};`; }; const ClosePop = () => { setPopCookie('name', 'y', 1); handleNextpopUp(); }; 쿠키 활용 function getPopCookie(name) { const cookie = document.cook..

소소한 팁이지만 내가 몰랐었으므로 정리! ul의 높이값으로 li에 line-height 값을 주게 되면 세로 가운데 정렬 된다.!!!

back to the basic을 쓰는 나의 마음 더보기 내 경험상 많은것을 경험하고 여러가지를 체득하게 된다면 나를 다시 돌아보며 내 현재의 현실에 중심하게 되는 편인거 같다 프로그래밍적으로 얘기해보자면 많은 프레임워크와 라이브러리를 아는것도 중요하겠지만 그 사용 용도와 기초는 다 의미가 있어 존재하는것이라고 생각하고 기초에 중점을 잡아보려한다. 기본형 타입 Immutable data 타입 number : 64비트 부동 소수점 ,모든 숫자를 실수로 처리 string : 16비트 유니코드 문자셋으로 구성된 문자열 boolean : true,false 의 값 undefined : 값이 할당되지 않았을때 null : 의도적으로 값이 없음을 위해 symbol : 유일한 식별자 생성시 사용 Objcet type..

js 기초 다지기 알고 하는것과 모르고 하는것의 차이는 극명하다! '백문이 불여일견' 의 뜻처럼 행동으로 옮기는건 중요하다 보는것과 한번이라도 타자를 쳐보는것은 다르다 라는 뜻을 내포하고 있는데 이 말이 내 모토였기도 하다 하지만 그동안 뒷전으로 미뤘던 기초중의 기초 동작 원리에 대해 알아보도록 하자 1. 자바스크립트 동작 원리 js 엔진 js 엔진은 메모리 힙 영역과 콜 스택으로 구성 되어 있고 메모리 힙은 메모리 할당,변수,함수 등이 담겨있고 콜 스택은 함수가 실행되는 순서를 기억하는 스택이다 js는 단일 스레드 프로그래밍 언어로 콜스택이 하나임을 말한다 스택의 특성상 여러가지가 쌓이면 맨아래의 작업은 무한정 대기하게 된다 이를 위하여 비동기 콜백이 존재 Web APIs Web API는 브라우저에서 ..

js는 동기적 처리 방식으로 위에서 아래로 순차적으로 읽어 내려간다 console.log('1'); setTimeout(function() { console.log('2'); }, 1000); console.log('3'); 위에서 부터 순차적으로 1,2,3번을 매겼지만 실제 출력은 1,3,2 순으로 될것이다. 비동기적으로 처리하는것은 효율성에 있어서 매우 큰 핵심 요소이며 callback -> promise -> async,await 로 발전해 왔다 먼저 콜백이란 js에서의 callback 함수는 다른 함수의 인자로써 이용되는 함수 라고 정의 되어있다 function getData(callbackFunc) { $.get('https://main.com', function(response) { callb..

overflow-x 와 overflow-y 는 내용이 넘칠때에 해당 축에 대하여 어떻게 보여줄지를 지정한다. 브라우저 지원 Chrome Edge FireFox Safari Opera 4.0 9.0 8.0 -ms- 1.5 3.0 9.5 속성으로는 scroll , hidden , auto , visible 이 있다 scroll 해당 영역에 내용이 잘리면 스크롤바가 생성된다. hidden 해당 영역에 내용이 잘려서 보인다. auto 해당 영역에 내용이 잘려서 보이나 필요시 스크롤바 나타난다. vivible 내용이 밖을 넘어선다 ex) 해당 스크롤에 대해서는 ::-vebkit-scrollbar로 스타일 혹은 보이지 않게 가능하다 ::-vebkit-scrollbar 에 대한 내용은 나중에 정리 해보려한다!