STUDY

const checkFloatNumber = (float) =>{ let result = 0; let temp = 0; if(float === parseInt(float)){ //정수일때 result = float; } else { //실수일때 temp = Math.floor(float * 100)/100; //둘째짜리 이후 소수점 버리기 result = temp.toFixed(2); //소수점 한자리일때 0을 붙여줌 } return result; }; toFixed 는 반올림을 해주기 때문에 반올림없이 절삭하려면 Math.floor 함수가 필요하다. Math.floor 함수는 주어진 숫자와 같거나 작은 정수 중 가장 큰 수를 반환한다. Math.floor(5.95) => 5 Math.floor(-5.0..

자바스크립트의 this는 함수를 호출하는 방식에 따라 동적으로 결정됨(누가 불렀냐에 따라 결정) *바인딩 : this가 호출 방식에 따라서 특정 '객체'에 연결되는 것 1. 일반 함수 내부에서는 this는 글로벌 객체와 바인딩 됨 function foo() { return this; } console.log(foo()) //window 2. 객체 메서드 내부에서는 호출한 객체와 바인딩 const animal = { name: “dog”, getName: function() { console.log(this); } } animal.getName(); //animal(dog) 객체 const animal2 = { name: “cat”, getName: animal.getName } animal2.getNam..

?? 은 null 병합 연산자라고 함 피연산자 중 확정되어 있는 변수(null도 아니고 undefined도 아닌)를 찾을 수 있다 // 이 if문은 if(a ?? b) //이 문장과 같다 (a !== null && a !== undefined) ? a : b a가 null이 아니고 undefined 가 아니면 a, 아니면 b && , || 연산자와의 차이 && 는 첫번째 false 인 값을 반환 (false 가 없으면 마지막 값) || 는 첫번째 true 인 값을 반환 (true 가 없으면 마지막 값) ?? 는 첫번째 정의된 값을 반환 console.log(0 && 10); // 0 console.log(0 || 10); // 10 console.log(0 ?? 10); // 0 대다수의 연산자보다 우선..

function convert( date ){ var element, dayElement, endTime, hours, mins, msLeft, time, day; var arr = date.split(/[- :]/); date = new Date(arr[0], arr[1]-1, arr[2], arr[3], arr[4], arr[5]); } 사파리에서 Y-m-d H:i:s 포멧을 지원하지 않아서 발생(21년 7월에 확인) Y-m-d H:i:s 포멧으로 date 정보를 받을 경우 split 으로 분해해서 새로운 date로 생성하면 해결됨 https://stackoverflow.com/questions/26657353/date-on-ios-device-returns-nan Date on iOS device ..

뒤로 가기 앞으로 가기 원하는 페이지 수만큼 이동

input에 값 입력 시 일정 간격을 두고 따라오는 단위를 만들어야 했음 const [number, setNumber] = useState(0); const inputHandler = e => { setNumber(e.target.value); }; return ( ... inputHandler(e)} /> {number ? "kg" : ""} // number state 값과 똑같이 그대로 작성됨 ... ) //scss .input-wrap { position: relative; .input { height: 48px; } .unit { position: absolute; top: 16px; left: 18px; font-size: 14px; } [data-before]::before { content..

IE에서 slick slider 체크 시 overflow: hidden 이 적용되지 않아서 slider 의 모든 요소들이 펼쳐져 보이는 경우가 있었음 IE 11에서는 css3 transform을 적용한 엘리먼트가 부모의 overflow:hidden을 무시하는 현상이 있다고 함 transform 속성을 적용한 엘리먼트에 opacity: 0.99 를 주면 해결됨 https://medium.com/@laziel/windows-8-1-ie-11-%EC%97%90%EC%84%9C-overflow-hidden-%EC%9D%B4-%EB%AC%B4%EC%8B%9C%EB%90%98%EB%8A%94-%EC%96%B4%EB%96%A4-%EA%B2%BD%EC%9A%B0-f322fd5908ae Windows 8.1 IE 11 ..

padding-top 50% - 2:1 padding-top 200% - 1:2 padding-top 75% - 4:3 360 width 720 width 참고 https://happyer16.tistory.com/entry/%EA%B0%80%EB%A1%9C%EC%84%B8%EB%A1%9C-%EB%B9%84%EC%9C%A8-%EC%9C%A0%EC%A7%80%ED%95%98%EB%8A%94-%EB%B0%98%EC%9D%91%ED%98%95-%EB%B0%95%EC%8A%A4 가로세로 비율 유지하는 반응형 박스 반응형 웹디자인에서는 .wrap { max-width: 100%; width: 100%; } 를 활용하여 콘텐츠가 컨테이너의 너비에 맞게 유동적으로 변경되게 하는 기법을 많이 사용한다. 이 때 높이는 ..

사용자에게 고를 수 있거나 추천하는 선택지를 나타내는 option을 여러개 보여줄 수 있는 태그 input list 속성 값 === datalist id 속성 값 select와 다른 점은 사용자가 입력이 가능하고 자동완성 기능을 제공해서 입력된 값으로 option을 빠르게 찾을 수 있음 참고 https://developer.mozilla.org/ko/docs/Web/HTML/Element/datalist - HTML: Hypertext Markup Language | MDN HTML 요소는 다른 컨트롤에서 고를 수 있는 가능한, 혹은 추천하는 선택지를 나타내는 요소 여럿을 담습니다. developer.mozilla.org

1. 시맨틱 마크업 Semantic - 의미론적인 시맨틱 마크업 - 의미를 잘 전달하도록 시맨틱 태그로 문서를 작성하는 것, 웹 페이지의 구조를 명확하게 표현할 수 있다. 각 태그를 그 용도에 맞게 사용해야 한다. 헤더: 푸터: 메인: , 독립컨텐츠: 제목: - ... 네비: 리스트: 과 그 외 블록 요소 안에 인라인 요소 넣기 hgroup 은 큰 거부터 사용하기 br 태그 남발하지 않기 css 는 스타일시트나 별도 코드로 분리해서 사용하기(css 인라인으로 넣지 말기) css 스타일을 명시하는 태그는 적합하지 않음 ex) 글자를 진하게 할때 (스타일 bold)보단 (내용 강조)을 사용해야 함 (기울어진 스타일)