개발하는 고라니

프로젝트를 진행하던 중 글 상세조회 페이지에서 이미지를 보여주는데, 이미지가 여러개일 경우 한번에 다 나열해서 보여주기보다, 화살표나 버튼을 클릭해서 다음 이미지, 이전 이미지를 보는 것에 알게모르게 익숙해져있을 것이다. 그래서 트렌드에 맞게 이미지 슬라이더를 HTML, CSS, JS만으로 구현해보도록 하자. 먼저 결과를 보면 위와같은 UI가 될 것이다. 설계 구현을 하기에 앞서 어떻게 구현할지 설계를 해보았다. 가장 바깥에서 버튼들과 이미지가 보여질 곳(B)을 감싸는 녀석을 A라고 하고, 각각의 이미지(D)를 감싸는 프레임을 C라고 생각하면 된다. # A display: flex justify-content: center align-items: center position: relative # B di..