Sass와 Scss의 차이는 세미콜론을 붙이느냐, 안 붙이느냐 그리고 대괄호로 묶어주냐 마냐이다. 전자가 Scss이다. 1. 변수를 사용할 수 있다. 변수 정의 시 $기호 사용한다. $font-stack: nanum-gothic, sans-serif; $primary-color:#333; $url-images: 'assets/images/'; body{ font:100% $font-stack; color:$primary-color; background: $primary-color url($url-images + 'img-names.jpg'); } 2. 중첩이 가능하다. $default-color:#999; $navhover-color:#333; nav{ ul{ list-style:none; li{ dis..

프로그래머스 문제 읽을 때면 종종 읽어도 읽은 것 같지 않은 느낌이 들 때가 많다.ㅎㅎ 많이 풀어보면 쉬워지겠지..ㅎㅎ흑 문제) 과정) 첫번째, 스트리밍 총합이 큰 장르 순으로 내림차순 정렬 되어야 하고, 두번째, 각 장르별 스트리밍 수가 많은 노래를 내림차순 정렬 세번째, 정렬된 상태에서 각 장르별로 노래 두개를 뽑아야 한다. 장르에 노래가 하나 뿐일 경우 하나만 뽑는다. 총 반환되는 값은 장르*2 ( - 알파)가 된다. 내가 재출한 해설) function solution(genres, plays) { let answer = []; let genres_ = Array.from(new Set(genres)); //중복 제거한 장르만 모아놓음 let target = []; genres_.forEach((g..

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..

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

window.pageYOffset (혹은 X도 있음) 스크롤을 얼마나 움직였는가. (스크롤 이동 거리) 타겟.offsetTop (스크롤 움직여도 값 변하지 않음) 타겟이 document 상단에서 얼마나 떨어졌는가 스크롤에 영향받지 않음. 타겟.getBoundingClientRect() 타겟의 크기와 위치 값을 가지고 있어서 타겟이 브라우저 창의 top,left,right,bottom에서 얼마나 떨어졌는 지의 값을 알 수 있다. 스크롤 변화할 때마다 값이 바뀌고, 스크롤의 속도에 영향 받는다. window.innerHeight 브라우저 내부 높이 (가로 스크롤바 포함) window.outerHeight 브라우저 창 자체의 전체 높이 window.innerWidth 브라우저 내부 너비(세로 스크롤바 포함) ..

perspective 속성은 원근감을 통해 대상을 입체적으로 보이게 표현한다. 사용법 - 3D로 표현할 요소의 부모 요소에 perspective: 숫자값px; 라는 속성을 사용한다. 여기서 perspective값의 크기는 사용자와 대상 요소와의 거리감을 나타낸다고 생각하면 된다. 즉, 값이 크면 좀 더 멀리서 떨어져서 보는 것 같은 느낌. 값이 작으면 가까이서 보는 느낌을 준다. 즉 가까우면 3D 효과가 더 극적으로 나타나고, 값이 크면 좀 더 자연스럽게 나타난다고 생각하면 된다. perspective 속성을 준 부모와 타겟 요소 사이에 다른 요소들이 존재하는 상황이라면, 그 각각의 요소들에 transform-style: preserve-3d 를 적용해 줘야한다. See the Pen 카드 뒤집기 by ..