Simple Is Best

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

이전 포스팅에서는 레이아웃 배치 2가지 방법에 대해 학습했었습니다. 1. float : left; 2. display : inline - block; 본 포스팅에서는 레이아웃 배치를 굉장히 쉽게 쓸 수 있게 해주는 flexbox에 대해서 학습하겠습니다. 우선 flex를 사용하기 위한 기본 구조부터 알아보겠습니다. flex를 사용하기 위한 구조 1. flex-box들을 모두 감싸는 flex-container의 클래스명을 가진 div 태그 2. flex-box : flex-box는 어떤 태그로 선언하던 간에 display : block 속성을 가지고 있기 때문에 기본적으로 한 행을 전부 차지(회색 박스) 따라서, 겉으로 보기에는 박스들이 세로로 배치되는 것처럼 보입니다. 이를 코드로 표현하면 다음과 같습니다..