반응형 전체 글39 CSS Scroll Snap(스크롤스냅)으로 이미지 slider 만들기 scroll snap이란 사용자가 터치하거나 스크롤 시 조작을 마쳤을 때 화면에서 다음 화면으로 전환될 때 자석처럼 특정 위치에 탁 붙는 기능입니다. 보통 swiper를 이용하여 슬라이더를 만들었는데, swiper를 사용하는 대신 scroll snap을 이용하여 슬라이더 기능을 간단하게 만들 수도 있습니다. 또는 fullPage js와 같은 기능을 sroll snap을 사용하여 구현할 수도 있습니다. css scroll snap에 대한 브라우저 지원은 대부분 지원을 합니다. scroll snap 의 기본 사용법 스크롤 스냅은 컨테이너 요소에 scroll-snap-type 속성을 설정하고 그 안에 있는 요소에 scroll-snap-align 속성을 설정하여 사용합니다. 가장 기본적인 형태는 다음과 같습니다.. 2023. 1. 17. css 이미지 비율(종횡비) 고정하는 방법 aspect-ratio 사용 aspect ratios는 화면비(종횡비)라는 뜻으로 디스틀레이의 가로 세로 길이의 비율을 뜻합니다. css최신 기능으로 추가된 aspect-ratio속성으로 이미지 비율을 편리하게 설정할 수 있습니다. 지원 가능한 브라우저는 다음과 같습니다. aspect-ratio는 IE를 지원하지 않습니다. IE를 고려하지 않아도 된다면 aspect ratios를 사용하면 좋을 것 같습니다. 속성값은 다음과 같이 사용할수 있습니다. 컨테이너의 기본 가로 세율 비율은 지정된 width와 height 비율입니다. height와 앞의 슬래시( / ) 문자를 생략하면 높이는 1로 설정됩니다. 기본 종횡비의 크기 계산은 box-sizing으로 지정된 상자의 크기로 계산됩니다. aspect-ratio: 1 / 1; aspect.. 2023. 1. 16. SASS(SCSS) 재활용 하기 @mixins, @include sass에서 mixin은 스타일시트 전체에 걸쳐 스타일 블록을 정의하고 재사용하게 해 줍니다. 즉 반복되는 규칙을 따로 만들어서 사용하는 것입니다. 똑같은 규칙을 반복하여 작성하는 것보다는 mixin을 사용하여 한번만 스타일 그룹을 정의하고, 필요할 때 참조하여 사용합니다. scss파일 위쪽 부분에 @mixin지시자를 이용하여 mixin을 정의합니다. 정의된 스타일을 넣고자 하는 곳에 @include지시자를 이용하며 믹스인을 참조할 수 있습니다. @mixin을 사용하여 선언 : @mixin 이름 (arguments) { ... } @include를 이용하여 사용 : @include 이름 (arguments) /* scss */ @mixin title-style { // mixin 정의 margin: 30.. 2023. 1. 13. 무료 상업 폰트 프리텐다드(Pretendard) 웹에서 사용하기 프리텐다드(pretendard) 폰트는 inter와 본고딕(Noto), M PLUS 1p를 바탕으로 결합하여 서로의 단점을 보완하여 만든 폰트입니다. 다국어를 지원하므로 다국어 타이포그래피에서 이용 시 자연스러운 글꼴을 만나볼 수 있습니다. 그리고 window와 ios 둘다 지원이 가능하여 어디서든 동일환 환경에서 글꼴을 서비스할 수 있습니다. SIL 오픈 폰트 라이선스로 배포되며, 글꼴 단독 판매를 제외한 모든 상업적 행위나 수정, 재배포 가능할 글꼴입니다. CDN서비스(jsDelivr, cdnjs, UNPKG)를 이용하여 프리텐다드 웹폰트를 사용할 수 있습니다. jsDelivr, cdnjs, UNPKG 중 원하는 CDN을 사용하시면 됩니다. 총 9가지의 굵기로 제공되며, 가변 글꼴도 지원합니다. HT.. 2023. 1. 12. 이전 1 2 3 4 5 6 ··· 10 다음 반응형
