본문 바로가기
728x90
반응형

분류 전체보기298

이미지 비율 맞추기 .img-box::after 또는 ::before를 통해 width:100%; padding-bottom:100%; 또는 padding-top:100%; 로 가로세로 높이를 1:1로 맞춘다 이미지는 absolute를 통해 top:0;left:0;에 위치시킨다 (::after 또는 ::before의 패딩과 겹쳐지도록) .img-box의 width - height 를 100%로 크기를 꽉채운다 See the Pen Untitled by gahyun (@gahyun) on CodePen. object-fit 을 모른다면 [CSS/CSS 기초] - [CSS]Object-fit 이미지나 비디오 크기에 맞춰 자르는 방법 2022. 8. 22.
swiper 플러그인 옵션정리 let swiper = new Swiper('#id', { slidesPerView : 보여질 개수, spaceBetween : 아이템 사이 간격, slidesPerGroup : 한번에 슬라이딩될 개수, threshold:100, //마우스 스와이프 민감도 autoplay:{ delay: 몇초후 시작, }, navigation: { nextEl: 다음버튼 선택자, prevEl: 이전버튼 선택자, }, pagination: { el: 페이징 선택자, }, scrollbar:{ el : '선택자', draggable: 스크롤바 이동으로 스와이프가 가능하게 할지, dragSize: 스크롤바 크기, }, loop: 무한반복 할지말지, a11y: { // 웹접근성 enabled: true, prevSlideMes.. 2022. 8. 22.
box-shadow 예제 모음사이트 https://www.webfx.com/archive/blog/images/assets/cdn.sixrevisions.com/0457-01-css-box-shadow-demo/demo.html CSS Box Shadow Examples Basic Drop Shadow box-shadow: 0 0 10px; Inner Shadow box-shadow: inset 0 0 10px; Offset Drop Shadow (Bottom Right) box-shadow: 5px 5px 10px; Offset Drop Shadow (Top Left) box-shadow: -5px -5px 10px; Inset Value box-shadow: inset 0 0 5px 5px olive; No Inset www.webfx.. 2022. 8. 12.
[em]반응형을 좀 더 편하게 할 수 있는 폰트사이즈 단위/쉽게 알아보기 em 은 상위 요소가 기준이 되는 단위 하단 예시를 보면 1줄에 4개의 p를 넣고 4개씩 1개의 박스로 묶었다 첫번째 박스부터 순서대로 16px / 20px / 30px / 40px 이고 왼쪽부터 순서대로 0.5em / 1em / 1.5em / 2em 이다 모두 폰트 사이즈가 다르다 16px 기준의 1em 이 16px 이고 20px 기준의 1em 은 20px 이다 박스별로 기준 크기를 정해두고 반응형작업시 박스별 폰트사이즈만 조정해주면 하단의 딸려있는 아이들의 폰트사이즈는 상위에 맞춰 자동 조절된다!! 편하게 반응형 조절이 가능하다 See the Pen Untitled by gahyun (@gahyun) on CodePen. 2022. 8. 10.
728x90
반응형