본문 바로가기
728x90

Front-end47

[HTML/SCSS] Swiper 썸네일 갤러리 with 텍스트 슬라이더 메인 슬라이더와 연동되어 동작하는 작은 썸네일 슬라이더 (설명이 이상하네요 간단한 말로 뭐라 하지?) 레이아웃을 여기저기서 많이 보셨을 것입니다. Swiperjs에서는 Thumbs Gallery라는 이름으로 해당 기능 데모를 제공하고 있습니다. 데모 코드를 응용해 아래와 같은 슬라이더를 만들어 보았습니다. 우선 두 개의 Swiper가 필요합니다. 메인으로 사용할 슬라이더와 썸네일 갤러리로 만들 슬라이더(thumbsSlider)입니다. 스크립트에도 두 개의 Swiper를 정의해야 합니다. var swiperMini = new Swiper(".swiper-mini", { spaceBetween: 10, slidesPerView: 4, watchSlidesProgress: true, }); var swiper.. 2024. 2. 29.
[HTML/SCSS] Swiper 하나에 여러 pagination(fraction+progressbar) 커스텀 적용하는 방법 이전에 Slick 슬라이더로 https://selinak.tistory.com/74 [javascript] Slick 슬라이더 페이징, 커스텀 내비게이션, 진행바 달기 - slick slider custom navigation Swiper는 페이징, 내비게이션, 프로그레스바 기능들이 이미 있지만 Slick은 호락호락하지 않다. 근데 Slick을 써야할 경우가 있을 수도 있잖아요,, Slick은 기본적으로 dots, arrows가 있는데 dots는 슬라이 selinak.tistory.com 다양한 Pagination을 만든 적이 있습니다. 이번엔 더 활용도가 높은 Swiper에서 다양한 Pagination을 만들어보겠습니다. Swiper는 기본 API와 CSS만으로 충분히 원하는 시안을 구현할 수 있을만큼.. 2024. 2. 23.
[HTML/SCSS] Swiper로 만드는 자연스러운 슬라이드 이동 효과 Swiper 슬라이더를 활용한 부드러운 애니메이션 Swiper 슬라이더에서 현재 슬라이드에는 'swiper-slide-active' 클래스가 추가됩니다. 참고: https://swiperjs.com/swiper-api#parameters 이 swiper-slide-active 클래스에 스타일을 주면 현재 액티브된 슬라이드에만 스타일을 적용할 수 있습니다. 각 슬라이드의 item div에 padding-top을 주고 흑백 필터(grayscale)를 적용했습니다. .item { width: 100%; height: 100%; padding-top: 2.5rem; filter: grayscale(0.8); } position: absolute;로 자식 요소들을 원하는 레이아웃대로 꾸며 위와 같이 만들었습니다... 2024. 1. 29.
[HTML] HTML Entity 코드로 특수문자 입력하기 📍HTML Entity 코드란? HTML 문서에서 특정 문자는 특별한 의미를 가지거나 렌더링 되지 않을 수 있습니다. 이런 경우에 HTML 엔터티를 사용하여 해당 문자를 나타냅니다. 예를 들어, ''와 같은 기호는 HTML에서 태그를 나타내는 데 사용되므로 이러한 문자를 일반 텍스트로 표현하려면 HTML 엔터티를 사용해야 합니다. -챗GPT- 즉, entity 코드는 일부 특수문자가 HTML에서 오류를 일으키거나 렌더링이 안될 때 사용하는 코드입니다. 대표적으로 공백 코드인 가 있습니다. 📍HTML코드와 HTML Entity 코드의 차이 HTML코드는 마크업 언어입니다. 일반적으로는 HTML코드에 특수문자를 직접 넣으면 되지만, 기능을 갖는 일부 특수문자는 Entity 코드를 사용하여 나타냅니다. 이렇듯.. 2023. 12. 7.
[CSS] VSCODE emmet(에밋) 기능 더 빠르게 사용하기 요즘 컴퓨터 바꾼 후로 에밋 적용 속도가 좀 느려졌다고 느꼈다. 탭키나 엔터를 누르면 바로 챡 완성이 되어야하는데 살짝 기다렸다가 completions(완성 텍스트 박스?)가 뜬 후 눌러야 적용이 돼서 답답했다. 답답해! 0.1초도 기다리기싫어! 구글링ㄱㄱ https://stackoverflow.com/questions/66994447/vs-code-emmet-being-very-slow 아하 탭으로 트리거 체크? 1. VSCODE에서 command palette을 연다. (F1 또는 Command+Shift+P) 2. setting을 검색해 Open User Settings에 들어간다. 3. 세팅 검색창에 emmet을 검색한다. 검색결과에서 Emmet: Trigger Expansion On Tab 을 .. 2023. 11. 30.
[CSS] filter:drop-shadow()와 box-shadow의 차이점 둘 다 그림자 효과를 준다는 공통점이 있지만 요소에 적용되는 범위가 다르다. box-shadow: 요소의 상자에 그림자를 추가하여 뒷면에 그림자 효과를 생성합니다. filter: drop-shadow(): 요소 전체에 드롭 셰도우 효과를 적용하며, 이는 요소의 상자에만 국한되지 않고 내부의 투명하거나 반투명한 부분에까지 확장됩니다. div { display: flex; width: 50px; height: 50px; border: 1px solid gray; margin: 1rem; align-items: center; justify-content: center; } .drop {filter: drop-shadow(0 0 5px rgba(0,0,0,.5));} .box {box-shadow: 0 0 5p.. 2023. 11. 28.
[CSS] Hover 하면 현재 배경 색상에서 어두워지게/밝아지게 하는 CSS Trick 버튼에 각각 오버할 때 현재 색상에서 어두워지게 하고 싶은 경우, 아래 코드처럼 따로 색상 hover를 주고 계신가요? /* 예시 */ .btn--red {background-color: brown;} .btn--red:hover {background-color: #62191b;} .btn--green {background-color: green;} .btn--green:hover {background-color: #074d09;} background-image 속성을 이용하면 한번에 현재 색상에서 어두워지게 할 수 있습니다. background-image: rgba(0,0,0,.4); 검은 색상(0,0,0)에 40%의 투명도를 준 값이죠. hover에 위와 같이 값을 주면 각각 현재 색상에서 40%만큼.. 2023. 10. 25.
[CSS] Firefox에서도 문제없는 백그라운드 이미지 디졸브/크로스페이드 효과 CSS - Firefox background-image animation not smooth img 태그의 이미지는 CSS의 background-image 속성으로 나타낸 이미지처럼 원하는 비율이나 위치로 보여주기가 어렵다. 이 때문에 개인적으로 메인 비주얼로 크게 들어가는 이미지는 img태그보다는 background-image 사용을 선호한다. 최근에 퍼블리싱한 홈페이지 호환성을 체크하는데 파이어폭스에서만 메인 백그라운드이미지의 cross fade 효과가 안 먹는 것이 아닌가! 빈 div에 background-image를 지정하고, keyframes 애니메이션으로 background-image의 소스가 바뀌게 짠 코드였다. 이미지 전환은 되는데 부드럽게 페이드인&아웃이 되지않았다. 이는 내가 알아본 바로는 파이어폭스가 cross-fade 속성을 지원하지 않기 때문인 듯하다. 위의 캡쳐는 크롬 .. 2023. 8. 17.
[javascript] Slick 슬라이더 페이징, 커스텀 내비게이션, 진행바 달기 - slick slider custom navigation Swiper는 페이징, 내비게이션, 프로그레스바 기능들이 이미 있지만 Slick은 만만치 않습니다.근데 Slick을 써야할 경우가 있을 수도 있잖아요,, Slick은 기본적으로 dots, arrows가 있는데dots는 슬라이드 수 만큼 생성되고 클릭하면 해당 슬라이드로 이동하는 기능이며,arrows는 화살표 버튼으로 이전/다음 슬라이드로 이동하는 기능입니다.이 기본 기능들을 원하는대로 탈바꿈하고 프로그레스 바를 만들어 봅시다. 완성본 dots는 슬라이드수에 비례하여 나타나는 기능이므로 이 dots와 API를 활용해서 페이징을 만들 수 있습니다.appendDots: '.slick--visual__paging',customPaging: function (slider, i) { return  ''+(i + 1.. 2023. 8. 4.
728x90

티스토리툴바