본문 바로가기

Web

(56)
[프로그래머스 > 해시] 베스트 앨범 프로그래머스 문제 읽을 때면 종종 읽어도 읽은 것 같지 않은 느낌이 들 때가 많다.ㅎㅎ 많이 풀어보면 쉬워지겠지..ㅎㅎ흑 문제) 과정) 첫번째, 스트리밍 총합이 큰 장르 순으로 내림차순 정렬 되어야 하고, 두번째, 각 장르별 스트리밍 수가 많은 노래를 내림차순 정렬 세번째, 정렬된 상태에서 각 장르별로 노래 두개를 뽑아야 한다. 장르에 노래가 하나 뿐일 경우 하나만 뽑는다. 총 반환되는 값은 장르*2 ( - 알파)가 된다. 내가 재출한 해설) function solution(genres, plays) { let answer = []; let genres_ = Array.from(new Set(genres)); //중복 제거한 장르만 모아놓음 let target = []; genres_.forEach((g..
[ Nuxt.js ] 글로벌 css파일, 미디어쿼리 적용하기 1.Vue는 main.js에서 css파일을 require 해주면 된다. 2. Nuxt는 nuxt.config.js 파일에 아래와 같이 추가해 주면된다. 3.scss를 사용할 경우 >$ npm i sass-loader node-sass --save-dev //설치 해준다. style 태그에 scss 사용한다고 명시해준다. 로컬에서 사용하고 싶을 경우, style 태그 마지막에 scoped 키워드를 붙혀주면 된다. 4. 미디어 쿼리 사용해야 할 경우 >$ npm i nuxt-mq // 설치해 준 뒤, nuxt.config.js에 사용할 준비를 마친다. breakpoints는 각 화면 너비 값이다. 미디어 쿼리 적용해야할 요소에 :class="mq"라고 지정해 주면 $mq부분이 화면 사이즈에 따라 알아서 pc..
CSS 지원 확인 사이트 https://caniuse.com/#home Can I use... Support tables for HTML5, CSS3, etc About "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers. The site was built and is maintained by Alexis Deveria, with occasional updates provided by the web development commu caniuse.com
scroll 이벤트를 위해 미리 알아둘 것들 window.pageYOffset (혹은 X도 있음) 스크롤을 얼마나 움직였는가. (스크롤 이동 거리) 타겟.offsetTop (스크롤 움직여도 값 변하지 않음) 타겟이 document 상단에서 얼마나 떨어졌는가 스크롤에 영향받지 않음. 타겟.getBoundingClientRect() 타겟의 크기와 위치 값을 가지고 있어서 타겟이 브라우저 창의 top,left,right,bottom에서 얼마나 떨어졌는 지의 값을 알 수 있다. 스크롤 변화할 때마다 값이 바뀌고, 스크롤의 속도에 영향 받는다. window.innerHeight 브라우저 내부 높이 (가로 스크롤바 포함) window.outerHeight 브라우저 창 자체의 전체 높이 window.innerWidth 브라우저 내부 너비(세로 스크롤바 포함) ..
CSS 3D:perspective - 카드 뒤집기 효과 perspective 속성은 원근감을 통해 대상을 입체적으로 보이게 표현한다. 사용법 - 3D로 표현할 요소의 부모 요소에 perspective: 숫자값px; 라는 속성을 사용한다. 여기서 perspective값의 크기는 사용자와 대상 요소와의 거리감을 나타낸다고 생각하면 된다. 즉, 값이 크면 좀 더 멀리서 떨어져서 보는 것 같은 느낌. 값이 작으면 가까이서 보는 느낌을 준다. 즉 가까우면 3D 효과가 더 극적으로 나타나고, 값이 크면 좀 더 자연스럽게 나타난다고 생각하면 된다. perspective 속성을 준 부모와 타겟 요소 사이에 다른 요소들이 존재하는 상황이라면, 그 각각의 요소들에 transform-style: preserve-3d 를 적용해 줘야한다. See the Pen 카드 뒤집기 by ..
css로 애니메이션 넣기: transition, animation voltnuna.tistory.com/55 css transform transform 이름에서 알 수 있듯이 형태를 변환하는 동작을 한다. 보통 기준점이 왼쪽 상단인 것에 비해 트랜스폼은 기준점을 요소의 중앙으로 잡는다. transform-origin를 사용해서 기준점 위치를 변�� voltnuna.tistory.com Transition transform할 대상에 적용하는 속성으로 transform에 애니메이션을 넣어 부드럽게 처리하고 싶을 때 사용한다. 즉, 특정 요소의 상태(너비나 높이 색상 등등--)가 변화할 때, 그 변화하는 과정을 부드럽게 처리할 수 있다. transition(축약형) duration, timing-function, delay 순서로 값을 적어주면 된다. transition-d..
[ 프로그래머스 > 정렬 ]H-Index 문제 이해하기) 배열 안의 각 요소를 elem이라고 할 때 elem은 각 논문의 인용 횟수를 말하는데, elem이 h보다 작거나 같을 때는 elem값을, elem이 h보다 클 때는 h값을 h-index값으로 넣어야 한다. 이렇게 각 논문 마다의 h-index 값을 구한 뒤, 이 h-index값들 중 가장 큰 값을 최종 h-index값으로 반환해야 함. (문제에서 "나머지 논문이 h번 이하 인용"이 말은 h값이 될 수 있는 수중 가장 작은 수가 h가 되고, 이렇게 결정 된 h들 중에서 최댓값이 되어야 한다는 뜻이다. ) 위의 예제를 예로들면 citations = [3,0,6,1,5]; //elem === 3 이면 h는 3,6,5로 3 elem === h 즉 3을 반환 //elem === 0 이면 h는 0,..
[ 프로그래머스 > 해시] 위장 내 통과 코드 function solution(clothes) { let answer = 0; let closet = clothes.reduce((prev,now) => ({ ...prev, [now[1]]: (prev[now[1]] || 0) + 1 }),{}); let key = Object.keys(closet).length-1; let res = 1; while (key >= 0) { res *= closet[Object.keys(closet)[key]]+1 key--; } return answer = res - 1, answer; } 종류 - 모자:[빨강, 검정] , 상의:[긴팔, 민소매] , 하의:[미디스커트, 슬랙스, 숏팬츠] 라고 한다면 모자의 종류 2가지 상의의 종류 2가지 하의의 종류3..