본문 바로가기
728x90
반응형

코딩24

[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.
[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.
[CSS] overscroll-behavior: contain의 역할 기본적으로 한 박스 안의 스크롤이 끝나면 부모 요소의 스크롤로 넘어간다. 이 것을 scroll chaining 스크롤 체이닝이라고 한다. 이 스크롤 체이닝을 막고싶은 경우 사용하는 속성이 바로 overscroll-behavior이다. 스크롤 박스에만 적용되는 속성이다. 기본 상태에서는 이렇다. 박스 안에서 스크롤이 끝나면 다음 스크롤로 넘어간다.overscroll-behavior: contain;을 적용하면이렇게 박스 안에서 스크롤이 끝나도 더 이상 스크롤이 되지않고 머무른다. (부모 요소에 커서를 대고 스크롤 하면 당연히 스크롤 됨) overscroll-behavior: none;도 부모요소의 스크롤을 제한하여 contain과 같은 효과를 낸다. 사실은 서로 다르다고하는데 외적으로는 큰 차이를 느끼기 .. 2023. 6. 18.
[HTML/CSS] DIV 안에 이미지 가득 차게 중앙 정렬하기 같은 비율의 이미지만 사용한다면 수직, 수평 중앙정렬이 어렵지않겠지만 클라이언트들은 보통 제각각의 이미지를 사용하잖아요?그래서 이미지 박스를 작업할 때는 어느 비율의 이미지든 박스에 풀로 채워지며 센터 정렬이 되게 해야한다. 이런 세로 이미지를 박스에 풀로 채운다고 치자이미지 중앙 정렬은 크게 두가지의 CSS로 맞추는데 display: flex,나 position: relative;가 있다.왼쪽(1번)은 flex로 센터 정렬 (object-fit: cover;를 안넣으면 이미지 원본 비율이 깨진다.),.box1 { display: flex; align-items: center; justify-content: center; img { width: 100%; height: 100%; .. 2023. 5. 23.
[javascript] 커스텀 스타일링 SELECT 박스 만들기 HTML, CSS를 수정해서 셀렉트박스를 꾸밀 수도 있지만 한계가 있다. select 태그 자체를 꾸민다해도 option 박스는 기본 디자인에서 크게 벗어나지 못하며, 모바일에서는 폰 자체 UI가 적용되기때문이다. 웹디자이너분이 넘기는 시안은 보통 커스텀 셀렉박스인데 사실 나는 코딩하는 입장에서 귀찮기때문에 웬만하면 복잡한 스타일링을 지양하고싶긴하다ㅎㅎ 아무튼 기본 UI에서 벗어나기 위해 자바스크립트를 이용해 스타일링을 해보자. 옵션값이 중복으로 들어가는 다소 귀찮은 코드이다. 그래도 모바일에서 꾸며진 모습이 깔끔해 맘에 든다. See the Pen Custom select box by sel (@wimmwell) on CodePen. 코드펜의 콘솔을 열어서 확인해보면 옵션 값을 선택할때마다 값이 찍히는.. 2023. 5. 22.
[chatGPT] 챗지피티한테 코딩 배우기 codepen을 살펴보다가 마음에 드는 자바스크립트 효과를 발견했다. https://codepen.io/Hyperplexed/pen/KKBjvbG Glowing Blob Effect ... codepen.io 마우스 포인터를 따라서 그라디언트 blob (방울)이 움직이는 애니메이션이다. 그런데 코드펜 코드는 100vh 풀스크린을 기준으로 작성되어서 긴 페이지에도 적용되게 코드를 수정해보고싶었다. 그러나 100vh를 풀고 그냥 컨텐츠 길이를 늘려봤더니 스크린 높이 안에서만 방울이 움직였다. 뭐가 문젠데.. ㅣㅅㅇ)... chatGPT를 써보자 챗지피티한테 같은 기능의 코드를 요청했다. 나: 요소가 마우스 포인터를 따라다니는 스크립트 어떻게 만들어? 친절하게 알려줌 하지만 이 코드는 사실상 코드펜과 같은 코.. 2023. 4. 28.
[HTML] Unsplash 랜덤 이미지(무료) src로 불러오기 코드를 이용해 예쁜 상업용 무료 이미지가 가득한 Unsplash의 이미지를 랜덤으로 불러올 수 있다.새로고침하면 이미지가 바뀜. img의 src에 "https://source.unsplash.com/random/?원하는검색어"를 넣어주면 된다.영어 기반 사이트라 영어로 입력해야 많은 결과를 얻을 수 있다. 아래의 이미지는https://source.unsplash.com/random/?seoul" /> 의 결과값이다.seoul을 검색했을 때 나오는 이미지가 랜덤으로 로드된다.   2024-11-07 추가 위 방법은 더이상 작동하지 않습니다엑박이 떠서 찾아보니 source.unsplash.com은 API 사용자에게만 제공되는 것 같아요 2023. 4. 21.
728x90
반응형

티스토리툴바