하수도키의 성장일기

개발일기/SCSS(SASS)

[SCSS(SASS)] 반응형 breakpoints 추가하는 방법

개요 이번에는 반응형 웹사이트 작업 시 꼭 필요한 mediaquery를 공부해봅시다! scss 사용해서 살펴보겠습니다 : ) 코드 우선 완성된 코드를 보여주고 설명해드릴게요 : ) $breakpoints: ( 'mobile-extra-small': (min-width: 21.25rem), // 340 'mobile-portrait-only': (max-width: 29.9375rem), // 479 'mobile-landscape': (max-width: 51rem), // 816 'tablet-portrait': (min-width: 48rem), // 768 'desktop-template': (min-width: 48.0625rem), // 769 'tablet-portrait-only': (max..

개발일기/Vue.js

[Vue.js] Vue 3 Reactivity (#1)

[Vue.js] Vue 3 Reactivity (#1) 개요 이 문서는 www.vuemastery.com 에 Vue 3 Reactivity 를 보고 정리했습니다. Vue3가 드디어 릴리즈가 되었다. 아직 베타인것 같지만... Vue3 Reactivity System(반응형)에 대해 알아보자. 이걸 알면 좋은 점은?? Vue 내부 디자인 패턴 이해 Vue 디버깅 스킬 향상 Vue3 modularzied 반응형 라이브러리 사용 Vue3 소스 코드에 기여 가능 어마어마한 혜택들이 있다. 반응형(Reactivity) 이해하기 Vue 반응형은 정말 매직과 같다. 아래 코드로 어떻게 작동하는지 살펴보자. Price: ${{ product.price }} Total: ${{ product.price * product..

개발일기/CSS

CSS - 반응형 16:9 비율 유지하는 법

CSS - 반응형 16:9 비율 유지 개요 이 https://css-tricks.com/aspect-ratio-boxes/ 페이지를 보고 번역/의역을 했습니다. 자세한 내용은 위 링크를 참고해주세요. 유투브 동영상 또는 반응형 작업시에 필요한 비율에 대해 다뤄봤습니다. padding-top 사용 padding-top 또는 padding-bottom 사용 padding 값은 요소의 width을 참조한다. width값이 100px이고 padding이 20%이면 px로 계산하면 20px이다. padding-top을 56.25%을 주면 16:9 비율로 보인다. height: 0을 주면 박스 모델 높이에 영향을 주는 것이 padding-top밖에 없다. .video { overflow:hidden; padding..