Studying Coding Studying Coding

옆으로 이동하면서 정보를 변경하는 css설정하기 article{ position: absolute; top:0; left:0; width:100%; height:100%; opacity:0; transition:all 0.3 linear;} article.activeSlide{ opacity:1; trasform:traslateX(0) } article.lastSlide { transform: translateX(-100%); } article.nextSlide { transform: translateX(100%); }

animation @keyframes div{ width:100px; height:100px; bacground:red; animation-name:example; animation-duration:4s; } @keyframes example { from {background-color: red;} to {background-color: yellow;} } In the example above we have specified when the style will change by using the keywords "from" and "to" (which represents 0% (start) and 100% (complete)). @keyframes example { 0% {background-color:..

화면 아래 일정의 스크롤을 내리면 화살표 link가 보여진다. 이것은 visibility 와 z-index 를 사용해서 사라짐과 나타남을 보여줄수 있다. .top-link { visibility : hidden; z-index:-100 } .show-link{ visibility:visible; x-index:100; }

header { min-height:100vh background: linear-gradient(rgba(63, 208, 212, 0.5), rgba(0, 0, 0, 0.7)), url(./hero-bcg.jpeg) center/cover no-repeat; }

화면에 크기에 따라서 요소를 보이거나 사라지게 만들수 있다. 화면이 작을 경우 이렇게 바가 보이지만 화면이 커지면 바가 사라지는 것을 확인할수 있다. .links-container{ height:0; overflow:hidden; transition: all 0.3s linear; } 2022.05.26 - [Coding Studying/JavaScript] - Fixed-navbar / pageYoffset Fixed-navbar / pageYoffset Even if i scroll down and up, i want to see the navbar. then I can set the navbat to be fixed. // pageYOffset is a read - only window proper..

.fixed-nav { position: fixed; top: 0; left: 0; width: 100%; /**/ background: var(--clr-white); box-shadow: var(--light-shadow); } 마우스를 스크롤 할때 바를 위에 고정하고 싶다면 위에 그림처럼 네비바가 스크롤에 따라 따라온다.