https://seokzin.tistory.com/entry/SCSS-SCSS-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC [SCSS] SCSS 문법 정리 프로젝트 규모가 커지고 복잡해질수록 순수 CSS의 한계를 많이 느끼게 됩니다. 그래서 SCSS나 CSS-in-JS의 도입은 사실상 필수가 되었습니다. 이 글을 통해 CSS의 문제점을 개선한 SCSS에 대해 알아보 seokzin.tistory.com 7. 함수 (Function) 박스 1 박스 2 박스 3 $max-width: 100%; // 부트스트랩 그리드 시스템처럼 12개의 컬럼 중에서 특정 비율만큼 가져감 @function columns($number: 1, $columns: 12){ @return $max-width * ..

부트스트랩 5 를 사용하였고, 화면 상단에는 슬라이드 애니메이션이 동작합니다. images 폴더에 pet1.jpg, pet2.jpg, pet3.jpg, pet4.jpg 파일이 있어야 합니다. https://unsplash.com/ko 아름다운 무료 이미지 및 사진 | Unsplash 어떤 프로젝트를 위해서든 다운로드 및 사용할 수 있는 아름다운 무료 이미지 및 사진입니다. 어떤 로열티 프리 또는 스톡 사진보다 좋습니다. unsplash.com 해당 사이트에서 무료 이미지를 다운로드 받으실수 있습니다. Carousel Home Link Disabled Search First slide label Some representative placeholder content for the first slide. S..

images 폴더에 pet1.jpg 라는 파일이 있어야 제대로 화면이 구성됩니다. About Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information. Contact Follow on Twitter Like on Facebook Email me Album Album example Something short and leading about..

컨테이너 container 마진이 적용된 컨테이너 (반응형) 이미지 img-fluid 반응형 이미지 rounded-circle 둥근 이미지 텍스트 text start 좌측정렬 text end 우측정렬 fw-bold 볼드체 fs-1 폰트크기 display-4 fs-1 보다 큰 글씨체 Small 작은 텍스트 text-info 텍스트 색상 text-warning 텍스트 색상 text-dark 텍스트 색상 text-muted 텍스트 색상 (회색) text-center text-sm-start 기본적으로는 텍스트를 중앙에 정렬하고 디바이스 크기가 좀 더 커지면 왼쪽으로 정렬함 배경색 bg-dark 배경색 설정 bg-opacity-75 배경색 투명도 설정 opacity-50 투명도 50% 버튼 btn-info 버튼..

https://spicyyoghurt.com/tools/easing-functions Easing Functions for JavaScript - Animation Tool | Spicy Yoghurt Get easing function for JavaScript and try them out on your own custom motions, using the animation tool. You can create animations in an interactive way and see the effects of using different easing functions. When satisfied, look-up the matching equation spicyyoghurt.com easing func..

body{ margin: 0; padding: 0; text-align: center; } #box-container{ width: 100%; height: 100vh; background-color: lightsalmon; display: flex; justify-content: center; align-items: center; } .box{ width: 30px; height: 30px; border-radius: 50%; background-color: lightpink; transition: all 0.5s; margin-left: 20px; user-select: none; } const boxes = document.querySelectorAll('.box') let index = 0, pr..

기본적인 아이디어는 아래 링크로 걸어둔 Easing 기법을 이용한다. https://spicyyoghurt.com/tools/easing-functions Easing Functions for JavaScript - Animation Tool | Spicy Yoghurt Get easing function for JavaScript and try them out on your own custom motions, using the animation tool. You can create animations in an interactive way and see the effects of using different easing functions. When satisfied, look-up the matchin..

https://stackoverflow.com/questions/42273135/why-does-absolute-positioned-element-is-displayed-over-a-static-one Why does absolute positioned element is displayed over a static one? I know absolute positioning breaks normal flow but since the order in HTML is absolute element first then static one, I was expecting it to be reflected in the display order too. .absolute { stackoverflow.com 이미지 텍스트..

https://learnjs.vlpt.us/basics/08-loop.html 08. 반복문 · GitBook 반복문은 특정 작업을 반복적으로 할 때 사용할 수 있는 구문입니다. for 문은 가장 기본적인 반복문입니다. 특정 값에 변화를 주어가면서 우리가 정한 조건이 만족된다면 계속 반복합니다. 한번 learnjs.vlpt.us 아래와 같이 조건을 주면 맨 처음 i 값이 0 이므로 numbers[i] 는 1 이 된다. 그러므로 numbers[i] > 3 이 거짓이 된다. 그러므로 while 문 내부는 실행되지 않는다. function biggerThanThree(numbers) { const filteredNumbers = [] let i = 0 while(i < numbers.length && numb..

SASS grid 부분 해결 @mixin setGridPosition($col-1, $col-2, $row-1, $row-2){ grid-column: #{$col-1} / #{$col-2} ; grid-row: #{$row-1} / #{$row-2} ; } 애니메이션 구현 부분 테스트 *{ box-sizing: border-box; } html, body{ margin: 0; padding: 0; } section{ width: 100%; height: 100vh; grid-gap: 5px; overflow: hidden; display: none; } section span{ width: 200px; height: 300px; background: #333; color: #fff; font-size:..