본문 바로가기

Study

(120)
[CSS] flex-box 안 items 크기가 안 변할때 개요 flex container안의 item들의 크기가 넘치면 가로 스크롤을 주고 싶었다. 그런데 width를 5000px로 주어도 flex container안 items은 넘치지 않았다. 문제 flex-items가 스스로 container크기에 맞게 줄어들었다. flex-shrink옵션 때문이다. 해결 flex-shrink 옵션과 flex-basis 옵션을 설정한다. flex-shrink flex item들이 컨테이너에 맞도록 줄어드는 비율을 설정한다. 기본값은 1이고, 양수로 설정할 수 있다. 0으로 설정하면 줄어들지 않고 원래의 너비를 유지한다. flex-basis flex item의 너비값을 px, %등의 단위로 지정한다. 기본값은 auto다. 결과 flex-container에 item들이 하나씩..
[프로그래머스] 더 맵게 개요 programmers.co.kr/learn/courses/30/lessons/42626 코딩테스트 연습 - 더 맵게 매운 것을 좋아하는 Leo는 모든 음식의 스코빌 지수를 K 이상으로 만들고 싶습니다. 모든 음식의 스코빌 지수를 K 이상으로 만들기 위해 Leo는 스코빌 지수가 가장 낮은 두 개의 음식을 아래와 같�� programmers.co.kr 힙이다. 그냥 우선순위 큐를 이용해서 풀었다. while(int temp = q.front() < K)라고 했다가 temp에 1 아니면 0이 저장되는 바람에 헤맸다. 주의하자. 우선순위 큐 관련 포스팅 : koosaga.com/9 STL priority queue 활용법 모든 nlgn들의 영웅(?) 같은 priority_queue 존재 그 자체로 멋지지만..
[프로그래머스] 다리를 지나가는 트럭 개요 programmers.co.kr/learn/courses/30/lessons/42583 코딩테스트 연습 - 다리를 지나는 트럭 트럭 여러 대가 강을 가로지르는 일 차선 다리를 정해진 순으로 건너려 합니다. 모든 트럭이 다리를 건너려면 최소 몇 초가 걸리는지 알아내야 합니다. 트럭은 1초에 1만큼 움직이며, 다리 길이�� programmers.co.kr 기본적인 큐 문제 순서대로 큐에 넣고 빼면 된다. 코드(정답, 100/100점)
[JS] set에 배열를 넣으면 중복으로 넣어지는 문제 개요 set은 중복이 허용되지 않는다. 그런데 js set에 배열을 넣었더니 중복으로 들어가는 문제가 발생했다. 원인 크롬 디버그콘솔에 입력해보니 arr1과 arr2는 같지 않다고 나왔다. 그래서 내용물은 같지만 다른 오브젝트로 처리되서 set에 둘 다 들어간 것 같다. 해결 2020.05.21 기준 알아보는중 1. 내용물만 비교하는 방법을 알아보자 2. []과 오브젝트에 대해 알아보자 이번기회에 오브젝트에 대해 공부해야겠다. 어렵고도 어려운 js의 세계... 깊은복사 얕은복사도 알아봐야지
티스토리 코드블럭에 html을 작성하면 미리보기에 적용이 된다. 짜잔~~~~~~~~ 미리보기에 짱큰글씨로 나타날 문구입니다 놀랍군요
[js] 클래스 안 EvnetListener에서 클래스에 있는 메소드 이용하기 개요 html이 아래처럼 구성되어있다고 하자. TODO List TODO List라는 h1타이틀에 이벤트 리스너를 붙여보자. 클릭하면 알람이 나오도록. 보통 이벤트 리스너를 붙이는 방법은 세 가지다. 1. 익명함수 이용하기 $title = document.querySelector("#title"); this.$title.addEventListener("click", function(){ alert(this.innerText); //TODO List }); 2. 이벤트용 함수 이용하기 $title.addEventListener("click", alertValue); function alertValue(){ alert("title clicked"); } 3. 매개변수가 필요할땐 익명함수 안에 이벤트함수를 넣..
5. 프론트엔드 개발환경의 이해: 웹팩 개발 서버 vue.js와 node.js를 공부하면서 다시 정리할 예정 7강 내용 정리 https://tacademy.skplanet.com/live/player/onlineLectureDetail.action?seq=174 프론트엔드 개발환경 이해 | T아카데미 온라인강의 1. NPM 프로젝트와 모듈 시스템을 이해하고, Webpack/Babel/Lint 등 개발 도구들의 역할에 대해 알아봅니다. 2. 각 개발도구들을 이용하여 React 개발환경을 .. tacademy.skplanet.com 웹팩 개발 서버 웹팩 개발 서버는 웹팩과 별개다. 따로 설치를 해야 한다. 매번 브라우저 새로 띄워서 새로고침할필요 없이, 그냥 저장만 누르면 알아서 브라우저를 갱신해준다!! 설치: $ npm i -D webpack-dev-se..
4. 프론트엔드 개발환경의 이해: 린트, 프리티어 6강의 내용을 정리. 이번 포스팅은 요약을 많이 했다. 자세한 내용은 원본 블로그를 참조하자. https://tacademy.skplanet.com/live/player/onlineLectureDetail.action?seq=174 프론트엔드 개발환경 이해 | T아카데미 온라인강의 1. NPM 프로젝트와 모듈 시스템을 이해하고, Webpack/Babel/Lint 등 개발 도구들의 역할에 대해 알아봅니다. 2. 각 개발도구들을 이용하여 React 개발환경을 .. tacademy.skplanet.com 린트(Lint) 협업 코드의 규칙을 정하고싶다면? 린트를 사용한다. 코드의 보푸라기를 제거하는 역할. 코드의 오류나 버그, 스타일 따위를 점검하는 것을 린트(Lint) 혹은 린터(Linter)라고 부른다. 코..