syleemomo의 IT 블로그 syleemomo의 IT 블로그

format_color_text format_color_text body{ text-align: center; } .container{ max-width: 2rem; display: inline-flex; flex-flow: column; align-items: center; position: relative; } .color-box{ width: 10rem; background-color: #333; position: absolute; display: none; bottom: -11rem; } .color-box::before{ content: ''; width: 1.4rem; height: 1.4rem; background-color: #333; position: absolute; left: 50%;..

스크롤을 조금 내리면 헤더가 나타나고 scroll to top 버튼도 함께 나타난다. open 버튼을 클릭하면 모달창이 나타나고 뒷배경은 음영처리된다. 또한, 모달창을 확인하는동안 뒷배경이 스크롤되지 않도록 스크롤바는 숨긴다. close 버튼을 클릭하면 모달창이 사라지고 다시 스크롤바가 나타난다. story about contact OPEN header Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis officia, tempora ipsam libero expedita, doloribus velit eveniet delectus omnis nostrum consectetur magnam tempore quas explicabo mol..

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