Simple Is Best

안녕하세요~ 이번 포스팅에서는 Carousel 에 대해서 알아보도록 하겠습니다. Carousel 이란? : '회전목마' 라는 뜻으로 이미지 슬라이더 (버튼을 누르면 다음 사진으로 슬그머니 넘어가는) 를 칭합니다. 오늘의 Target 1. 초기화면 shirts1 img를 띄우고 right버튼을 누르면 다음 이미지로 슬그머니 넘어간다. 2. Right 버튼 눌렀을 때 1초동안 다음 사진으로 슬그머니 넘겨준다. 3. Left 버튼 눌렀을 때 다시 이전 사진으로 돌아온다. Carousel 동작 원리 HTML ▷ overflow : hidden : viewport 내에 들어 오지 않는 영역들을 스크롤이 생성되는 것을 방지하여 아예 시야에서 사라지게 끔 해주는 역할 ▷ container : img-box 3개를 포..

안녕하세요 데이터미널입니다. 본 포스팅에서는 [반응형 레이아웃]에 대해서 알아보겠습니다. 이전까지는 width 및 height 를 px 단위가 아닌 %(상위 요소에서 몇 %?) 로 설정하는 것으로 대충 얼버무렸었는데요. 오늘! 드디어 반응형 레이아웃에 필요한 지식들을 정리해보도록 하겠습니다. 우선, 반응형 레이아웃을 만들려면 HTML 파일 [CSS] .div { box-sizing: border-box; } body { margin: 0px; } .mybox-container { max-width: 1200px; } .mybox { width: 22%; max-width: 200px; height: 100px; background-color: red; margin: 10px; float: left; } ..