CSS (10) 썸네일형 리스트형 [#CSS] Swiper 슬라이드 생성하기, 이미지 슬라이드, 유튜브 슬라이드 가로로 슬라이드할 수 있는 이미지 슬라이드를 사용하려고 한다 swiper를 쉽게 사용해보자 swiperjs.com/demos/ Swiper Demos swiperjs.com ⑴ 설치 ① CDN으로 사용 ② NPM 설치 npm install swiper // import Swiper JS import Swiper from 'swiper'; // import Swiper styles import 'swiper/swiper-bundle.css'; const swiper = new Swiper(...); 둘 중 편한 방법으로 설치한다 ⑵ html Slide 1 Slide 2 Slide 3 ... ⑶ script var mySwiper = new Swiper('.swiper-container', { // Opti.. [CSS] Grid Layout, 그리드 레이아웃 사용하기 display: flex flex-direction: row; flex-direction: column; css에서 보통 Flex를 많이 이용했을 것이다 Flex는 한 방향 레이아웃이다 row 혹은 column 속성을 줘서 일렬로 정렬한다 Grid는 row, column을 둘다 정렬할 수 있는 레이아웃이다 1 2 3 4 5 6 7 8 9 각각의 div를 배치하고 싶은대로 배치할 수 있다 1 2 3 4 5 6 7 8 9 단순 정렬 외에도 속성이 많다 div 정렬 시 활용할 수 있는 방법이 많으니 유용하게 사용하자 이전 1 2 다음
