css

이미지 슬라이더를 활용할 일이 생겨서, 어떻게 해야할 지 알아보던 와중 생각보다 복잡하고 그렇다고 모듈을 쓰기에는 싫어서 공부하고 그 결과물을 올린다.

아래와 같은 이미지 구성이 요즘 유행하는 것 같아서 내가 직접 만들어 보기로 했다. 여러 자료들을 찾아봤지만 단순히 CSS로만 만들거나 span(2)와 같은 인위적인 고정값을 주길래 grid로 직접 만들어보기로 했다.처음 Grid로 width 부분을 잡고 안에 Grid

프론트 기술의 선두주자 애플의 홈페이지부터 시작해서 parallax scroll이 유행인 것 같아 직접 구현해보았다.뒤에 배경으로 고정시킬 사진과, 움직일 사진을 따로 준비를해서 배치를 한다. (z-index 특성으로 위로 오게 배치)그리고 html, css 를 작성한

이전에 한 방식보다는 위로만 올라가는 단순한 방식이 쓰일 곳이 많을 것같고, 창에 따라서 scroll의 정도가 달라져서 불편했다. 또한 js 파일 없이 css만으로 구현을 해보고 싶었다.위의 CSS 코드에서 보는 것처럼 단순히 각 레이어마다 translate 값을 다르

parallax scrolling 처럼 대세가 되어버린 infinite scrolling을 구현해봤다.js 파일로 for 문을 돌려서 원하는 값을 createElement / innerText 로 넣으면 됐다.만약 서버나 API가 있다면 그 값을 넣어주면 될 것이다.스