KEEP CODING

courses.wesbos.com/ 의 javascript30 / Day5 flex: 1 0 auto; mother가 flex인 경우 item의 너비를 설정하는 속성 증가너비, 감소너비, 기본너비 참고) heropy.blog/2018/11/24/css-flexible-box/ .panel > * *: 전체선택자(모든 요소) > 직계자식만 선택 참고) code.tutsplus.com/ko/tutorials/the-30-css-selectors-you-must-memorize--net-16048 반드시 기억해야 하는 CSS 선택자 30개 여러분은 id, class, descendant 기초를 알고 있겠죠. 과연 그게 전부일까요? 그렇다면, 여러분은 폭넓게 적용하지 못하고 있네요. 이 글에서 설명하는 선택자 ..

reduce로 중복값 갯수 세기 reduce함수는 배열 내의 요소들을 한 번씩 호출해 작성한 코드를 수행한다 모든 요소를 더하거나, 중복값을 체크하는데 유용하게 사용할 수 있다. initialValue = {}, arr[0]부터 시작, accu를 반환해 계속 업데이트한다 참고) hianna.tistory.com/459 logical OR (||) accu[curr] = (accu[curr] || 0)+1; 에서 괄호 안의 내용은, accu[curr]의 값이 있으면(truthy) accu[curr]을, 없으면 0을 반환한다. 여러개의 ||가 사용된다면, 가장 첫 번째 truthy를 반환한다. result = value1 || value2 || value3; value1 value2 value3 result..

javascript에서의 Array 복제 참조형 데이터인 Array는 값이 담긴 주솟값들의 묶음을 참조하는 형식이다 const Arr1 = ['a', 'b', 'c', 'd'] 로 생성한 경우의 메모리 주소 1002 ... 5001 5002 5003 5004 5005 ... 데이터 이름 : Arr1 값 : @5001 ... @7100~ 'a' 'b' 'c' 'd' ... 주소 ... 7100 7101 7102 7103 7104 7105 ... 데이터 ... 이름: 0 값: @5002 이름: 1 값: @5003 이름: 2 값: @5004 이름: 3 값: @5005 이름: Arr2 값: @5001 ... 이 때 const Arr2 = Arr1 로 복제하고나면 @1002만 복사한다(@7105) 그래서 Arr2..

event 중단을 멈추는 방법들 event.preventDefault() -이벤트의 기본 동작을 중단한다 -form의 submit button이나 a태그의 페이지 이동 동작 -custom event를 만들어 작동하게 한다면 preventDefault를 실행해주어야 기본동작이 실행되지 않고 원하는 이벤트만 실행할 수 있다 event.stopPropagation() -event가 부모 엘리먼트에게 전파되는 것을 막는다 -li 안에 button이 있다면 button의 이벤트가 실행된 뒤 li의 click이벤트가 이어서 실행된다 -event전파를 막고, 해당 함수를 호출한다 event.stopImmediatePropagation() -해당 DOM 에 걸린 다른 이벤트를 막는다 return false -jQuer..

string.trim() -string의 양 끝 공백을 제거한 새로운 문자열을 반환한다 -원래 문자열을 바꾸지 않는다 참고) developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/Trim arr.reduce(callback[, initialValue]) -callback : 배열의 각 요소에 실행할 함수 -initialValue : 초기값 / 설정하지 않으면 배열의 첫 번째 요소를 사용한다 -반환값 : 누적 계산의 결과 값 -callback 함수의 인수들 1) accumulator : 콜백의 반환값 누적 2) currentValue : 처리할 현재 요소 3) currentIndex (Optional): 처리할 현재 요소의..

Javascript www.inflearn.com/course/%ED%95%B5%EC%8B%AC%EA%B0%9C%EB%85%90-javascript-flow/dashboard Event 관련 customEvent - event 자체를 생성함 event = new CustomEvent(typeArg, customEventInit); typeArg : event이름 customEventInit : Optional/'detail'이라는 field를 가지고 있는 객체 addEventListener - event가 생기면 할 것 지정(클릭 event가 생성되면 A를한다) EventTarget.addEventListener(typeArg, listener) typeArg : event이름 listener : 실행할..

보이는 대로만 만드는 건데도 시간이 오래걸리는데 직접 사용할 수 있는 페이지는 시간이 얼마나 걸릴지... not 뭔가가 적용되는 것을 원하지 않을 때 :not(secector) { style properties} *cascading 을 잘 이해하고 코딩하자 input 에 border: none;인 경우 #login-form input:focus { border-color: var(--yellow); } #login-form input:not([type="submit"]) { border-bottom: 1px solid rgba(0, 0, 0, 0.3); transition: border-color 0.3s ease-in-out; } 로 작성하면 input에 border없어서 색변경불가 input:not을..

font style google fonts에서 검색해서 원하는 폰트를 css파일에 import한다 @import url () 을 css파일 맨 위에 적고 아래에서 font-family로 적용한다 justify-content: space-between; 은 사이의 공백을 똑같이 나눈다=크기 다르면 두번째것이 중심으로 오지못한다 .status-bar {display: flex; justify-content: center;} .status-bar__column {width: 33%;} 부모요소의 공간을 33%씩 차지함 각 요소가 1/3에 위치한다 그 후에 column의 두번째, 마지막 요소들을 배치해주면 된다 icon 크기조절 class에 fa-2x, fa-3x, fa-lg 를 맞게 추가한다 reset css..

github을 시작했는데 그러고나니 블로그에는 무슨 내용을 적을지 애매해졌다. 일단 이론에대해서라도 적어야겠다 BEM class 명명법 코드를 쉽게 읽기 위해(id는 중복이 안돼서 class사용) btn ; 버튼 btn__price ; 버튼 구성요소 btn--big ; 버튼 요소/속성 다른 사람이 코드를 확인했을 때 이해하기 쉽도록 만드는 것이 목표이다 icon 직접 만들거나 svg파일 이용하기 - heroicons, font awsome 버튼 만드는 방법 두 가지 방법이 있는데 같은 것이라고 봐도 될 것 같다. form을 만들었으면 input으로 만드는게 더 보기 쉬우니까 첫번째 방법으로 만드는게 더 나아보인다.

Animation 마우스나 focus 상관없이 움직임을 만듬 @keyframs 애니메이션이름 { from {처음상태} to {나중상태}} 정의해줘야함 그리고 element에서 animation: 애니메이션이름 1s linear infinite; infinite없으면 1회로 끝남 from상태=to상태 아니면 연결이 부자연스러움 대신 0%~100%로 설정할 수 있음(여러step만들 수 있음) 0%=100%이면 다시 돌아갔다가 실행됨-부드러움 Media Query CSS만을 이용해 사용자의 스크린의 사이즈를 알 수 있는 방법(데스크톱, 핸드폰, portrate/landscape..) @media screen and (조건) { } min-width : 600px / 최소 600px부터 600px보다 크면 ma..