본문 바로가기
728x90
반응형

웹퍼블리셔30

[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로 만드는 자연스러운 슬라이드 이동 효과 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.
[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] 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.
[javascript] 버튼 클릭하면 클립보드로 텍스트 복사하기 (-를 제외하고 숫자만) 폰 번호나 계좌번호 등 하이픈이 들어가는 숫자 텍스트에서 '-'를 공백으로 대체하고 복사하는 코드 var textToCopy = $(this).text().replace(/-/g, ""); See the Pen copy to clipboard by sel (@wimmwell) on CodePen. 2023. 7. 27.
그누보드 모바일 버전 해제하고 반응형 웹으로 사용하는 방법 그누보드에 기껏 반응형 CSS로 작업 해놨더니 모바일 디바이스에서는 못생긴 그누보드 모바일 웹으로 연결 됐다. ㅂㄷㅂㄷ.. 여기서 PC버전으로 들어가도 이상한 뱌율로 보인다. 이 문제는 config 설정 변경을 통해 해결할 수 있다. 1. public_html의 config.php 파일을 연다. 2. use_mobile을 검색해 'G5_USE_MOBILE' 부분을 찾는다. 3. 모바일 홈페이지를 사용하지 않기위해 true->false로 변경해준다. 그러면 이렇게 PC사이트를 기준으로 반응형 스타일이 적용되어 보인다. 그리고 head.sub.php 파일에서 2023. 7. 22.
[HTML/javascript] 옵션 선택에 따라 달라지는 셀렉트 박스 Cascading dropdown 상위 셀렉트박스에서 어떤 옵션을 선택하는지에 따라 다음 셀렉트박스의 옵션 내용이 바뀐다. 자바스크립트가 필요하다. https://www.w3schools.com/howto/howto_js_cascading_dropdown.asp How To Create a Cascading DropdownW3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.www.w3schools.com 위의.. 2023. 6. 24.
[CSS/javascript] 스크롤 하면 줄어드는 헤더 (How To Shrink Navbar on Scroll) 스크롤 높이가 100이 넘어가면 gnb에 변경 후 스타일이 적용된 fixed 클래스를 추가하여 헤더 크기를 줄이는 코드이다. &.fixed { padding: 1rem 0; background-color: #fff; .gnb-wrap { .gnb-logo {max-width: 14rem;} .gnb-list {font-size: 1.8rem;} } } See the Pen Untitled by sel (@wimmwell) on CodePen. 2023. 6. 22.
728x90
반응형

티스토리툴바