728x90 반응형 실전 코딩61 swiper 버튼 위치 조절 마음대로 하기 내가 생각하는 swiper 플러그인은 6버전이냐 그 상위버전이냐에 따라서 문제점과 활용도가 살짝 나뉜다. 그 중에 좌우버튼이 슬라이드 위에 있거나 아래에 위치할 때 등 버튼들이 mySwiper를 벗어날 때 잘리는 경우가 있었다. 6버전/최신버전 둘 다 방법은 mySwiper를 감싸는 div를 하나 추가해주고 그 div에 position : relative를 주면 된다. 현재 살펴보니 6버전에는 버튼위치의 상위에 기준점이 없어서 상관없지만 최신버전에는 .swiper, swiper-container에 기준점이 들어가있다. 그래서 .swiper, swiper-container에 따로 클래스를 추가해준 뒤 (ex. banner_slide) position: static으로 기준점을 초기화시켜준다. 이미지없이 설.. 2023. 6. 1. 이미지 그림자가 검은색으로 나올 때 디자인대로 저장해서 웹에 띄었는데 가끔씩 그림자처리가 까맣게 나올 때가 있다. 그럴 때 이 속성을 써보면 해결할 수 있을지도 모른다. mix-blend-mode img {mix-blend-mode: screen;} 내가 해결했던 방법은 mix-blend-mode의 screen을 사용했었다. 아래 더 많은 효과가 있으니 참고하면 좋을것 같다. https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode 2023. 4. 27. 아이콘 호버시 색상 전환 쉽게하기 보통 svg, png 확장자의 이미지나 아이콘을 호버할 때 아래 예시처럼 색상 전환을 많이 하는데 여러가지 방법으로 적용할 수 있다. * 예시) - png, svg 모두 해당하는 방법 첫번째 방법은 호버했을 때의 이미지를 먼저 저장한 후 opacity를 1보다 낮게 설정한 후 호버시에 opacity를 1로 설정해주는 방법. .icon_blog {opacity: 0.5;} .icon_blog:hover {opacity: 1;} 두번째 방법은 일반 이미지를 저장한 후 filter 효과를 주는 방법인데 보통 기존 이미지보다 밝게 적용하는 경우 filter의 brightness를 냅다 먹이면 된다. .icon_blog:hover {filter: brightness(200);} 밝게가 아닌 다른 컬러일 시 아래 .. 2023. 4. 27. html로 이미지 미디어쿼리 설정하기 picture 태그의 source태그를 쓰면 html만으로도 이미지 미디어쿼리를 구현할 수 있다. 보통 모바일/데스크톱일때의 사진이 화질별/사이즈별 달라지는 경우가 많은데 그때 사용하기 좋을것 같다. img태그는 picture태그나 source태그를 지원하지 않는 곳에서 기본값으로 쓰이기때문에 적용해놓는게 좋다. ** 참고로 Opera Android는 서포트가 안된다고 하니 앱을 고려할때는 사용성에 유의해야겠다. ** source 태그 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source : The Media or Image Source element - HTML: HyperText Markup Language | MDN The HTML el.. 2023. 4. 25. 자연스럽게 그라데이션 만들기 간혹 슬라이드나 버튼에 fade효과처럼 그라데이션이 들어가야할 때 쓰면 좋은 방법이다. 포인트는 background로 linear-gradient를 적용해서 transparent로 투명도를 점차 주면서 자연스럽게 투명 그라데이션을 만들 수 있다. See the Pen fade 효과 by seri (@ay9318) on CodePen. 2023. 4. 19. 카카오톡 링크공유 썸네일 설정(og img) 아래는 카카오톡에서 링크를 공유할 때 나오는 썸네일 화면이다. 설정 방법은 메타태그(meta tag)로 설정할 수 있다. 원래 페이스북에서 사용을 하다가 요즘은 다른곳에서도 많이 사용하고 있다고 한다. Open Graph의 줄임으로 쓰이는건지 아래처럼 og를 붙여서 사용된다. // 절대경로로! title은 title 태그에 쓴것 처럼 사이트 제목을 적으면 되고 type은 웹인지 앱인지 등등 타입을 지정 url은 사이트 도메인 description은 사이트에 대한 설명 site_name도 말 그래도 사이트 이름을 적어주면 된다. 다른건 다 텍스트이지만 og: image의 사이즈가 문제인데 원래 표준 사이즈는 1200 x 630의 1:1.91이라고 하지만 카카오톡으로 반영을 하려면 사이즈는 800 x 400.. 2023. 4. 19. 이전 1 2 3 4 ··· 11 다음 728x90 반응형
