https://webty.tistory.com/178 JS : 스크롤 동적처리 1. scrollTo, scrollBy, offsetTop, scroll-behavior window.scrollTo( X, Y ) window.scrollTo({ X좌표, Y좌표 }) 문서의 지정된 위치로 스크롤을 이동합니다. * X, Y좌표는 문서의 왼쪽 상단부터 시작합니다. * X, Y좌표는 px 단위의 가로/세로 축입니다. * X 좌표의 webty.tistory.com https://www.javascripttutorial.net/javascript-dom/javascript-width-height/ Getting Width & Height of an Element in JavaScript In this tutorial..

https://takeknowledge.tistory.com/34 CSS와 javascript는 눈보다 빠르다 슬라이드와 무한슬라이드 일정 시간이 지나면 가로로 넘어가는 슬라이드를 만들어보자. 준비물은 다음과 같다. div 하나, 가로로 쭉 이어붙인 li 다섯개, 그 li 다섯개의 총 너비와 같은 너비를 가진 ul 하나! 여기에 필자는 takeknowledge.tistory.com slide 1 slide 2 slide 3 slide 4 slide 5 :root{ --slide-width: 800px; --slide-count: 6; /* 복사한 첫번째 슬라이드 포함 6개 */ --slide-height: 500px; } body * { height: 50px; } .slide_box{ width: va..

home Social Media instagram google github Big companies instagram google github Places instagram google github a{ text-decoration: none; color: #333; } ul{ padding: 0; margin: 0; list-style: none; } .dropdown-menu{ width: 30rem; display: none; background-color: #eee; padding: .5rem; z-index: 1; box-shadow: .3rem .3rem .5rem rgba(0, 0, 0, .3); } .dropdown-menu .sub-menu{ font-weight: bold; font-s..

home Social Media instagram google github Big companies instagram google github Places instagram google github a{ text-decoration: none; color: #333; } ul{ padding: 0; margin: 0; } li{ list-style: none; } .dropdown-menu{ display: none; width: 20rem; padding: .5rem; background: #eee; z-index: 1; box-shadow: .3rem .3rem .5rem rgba(0,0,0,.3); } .dropdown-menu .sub-menu{ font-weight: bold; font-size..

:root{ --num-of-column: 6; } h3, p{ margin: 0; } .card-container{ display: flex; justify-content: space-around; flex-wrap: wrap; margin-top: 2rem; } .card-container .card{ width: calc(100vw / var(--num-of-column)); height: 15rem; background: #eee; box-shadow: 0rem 0rem .5rem rgba(0, 0, 0, .3); padding: 1rem; display: flex; flex-flow: column; justify-content: space-between; margin-bottom: 1rem; }..

This is Life ! body{ margin: 0; padding: 0; } .bg{ width: 100vw; height: 100vh; background-image: url(https://www.yachtandboat.com/wp-content/uploads/2018/12/hero-image-2.jpg); background-repeat: no-repeat; background-size: cover; background-position: center; position: fixed; /* 백그라운드 배경 고정 */ display: flex; justify-content: center; align-items: center; font-size: 20rem; font-weight: bold; /* 투명..

https://hyoni-k.tistory.com/48 mix-blend-mode : 요소를 겹치는 효과 이미지 등의 요소가 겹치는 경우 중첩된 상태를 표시하는 방법에 대해 알아보고자 한다. 포토샵에서 사용하는 블렌드 모드와 유사한데, 이 효과를 css에서도 사용할 수 있다. 서로 다른 요소(ex. hyoni-k.tistory.com 핵심적인 아이디어는 mix-blend-mode 를 설정해서 각 레이어의 색상을 섞는 것이다. position: fixed 로 설정하면 배경화면은 무시하고, 아래쪽에 있던 글자들은 브라우저 상단으로 올라온다. 이때 position: fixed 로 설정한 배경화면의 레이어가 텍스트(position: static)보다 더 높기 때문에 글자는 아래쪽 레이어에 가려진다. 그래서 글자..

:root{ --num-of-column: 6; } h3, p{ margin: 0; } .card-container{ display: flex; justify-content: space-around; flex-wrap: wrap; margin-top: 2rem; } .card-container .card{ width: calc(100vw / var(--num-of-column)); height: 15rem; background: #eee; box-shadow: 0rem 0rem .5rem rgba(0, 0, 0, .3); padding: 1rem; display: flex; flex-flow: column; justify-content: space-between; margin-bottom: 1rem; }..

home instagram google github html 코드를 위와 같이 작성한다. 폰트아우썸 아이콘을 이용하여 드롭다운 메뉴를 만든다. a{ text-decoration: none; color: #333; } .dropdown-menu{ width: 20rem; padding: .5rem; background: #eee; z-index: 1; box-shadow: .3rem .3rem .5rem rgba(0, 0, 0, .3); } 이렇게 하면 아래와 같이 드롭다운 디자인이 완성된다. a{ text-decoration: none; color: #333; } .dropdown-menu{ width: 20rem; padding: .5rem; background: #eee; z-index: 1; box..