728x90 반응형 실전 코딩/CSS21 이미지 그림자가 검은색으로 나올 때 디자인대로 저장해서 웹에 띄었는데 가끔씩 그림자처리가 까맣게 나올 때가 있다. 그럴 때 이 속성을 써보면 해결할 수 있을지도 모른다. 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. 자연스럽게 그라데이션 만들기 간혹 슬라이드나 버튼에 fade효과처럼 그라데이션이 들어가야할 때 쓰면 좋은 방법이다. 포인트는 background로 linear-gradient를 적용해서 transparent로 투명도를 점차 주면서 자연스럽게 투명 그라데이션을 만들 수 있다. See the Pen fade 효과 by seri (@ay9318) on CodePen. 2023. 4. 19. 모바일 기기마다 폰트 크기가 다를 때 휴대폰 기종이 다양한 만큼 모바일에서 폰트 크기가 다르게 나올 때 쓸 수 있는 속성이다. (특히 아이폰이..) text-size-adjust 속성 표준 속성이 아니므로 벤더 프리픽스를 적용시켜야 한다. -webkit-text-size-adjust : none; /* 크롬, 사파리, 오페라 신버전 */ -ms-text-size-adjust : none; /* IE */ -moz-text-size-adjust : none; /* 파이어폭스 */ -o-text-size-adjust : none; /* 오페라 구버전 */ 1. text-size-adjust : none 기본값(default)으로 화면의 크기에 따라 크기를 조정하지 않는다. 기본값이기는 하나 특정 디바이스에 해당값이 무시되는 경우가 있기 때문에 .. 2023. 4. 12. 웹 호환성 css 속성(벤더 프리픽스) css속성을 쓰다보면 -webkit-, -moz- 이렇게 생긴애들이 있다. '-' 기호를 쓰는 이유는 벤더 프리픽스라고 검색해보면 다음과 같다. 주요 웹 브라우저 공급자가 새로운 실험적인 기능을 제공할 때 이전 버전의 웹 브라우저에 그 사실을 알려주기 위해 사용하는 접두사(prefix)를 의미한다. 특정 브라우저에서만 지원되는 css 속성을 사용하기 위해 쓴다고 보면 된다. 결국 호환성 문제인데 scss를 쓰면 컴파일 되면서 css 파일에 자동으로 생기는데 css 파일을 쓰고 있다면 웹 호환성(크로스 브라우징)을 위해서 써주는게 좋다. 파이어폭스를 제외한 신형 데스크탑, 모바일 브라우저는 모두 -webkit-을 사용한다고 생각하면 되고, webkit 기반의 엔진을 공통으로 사용하기 때문에 벤더프리픽스를 .. 2023. 4. 11. css 속성 flex/grid를 게임으로 이해하기 Flex 이해하기 Flexbox Froggy flex속성을 이용하여 개구리를 연잎 위로 옮기는 게임 https://flexboxfroggy.com/#ko Grid 이해하기 Grid Garden grid속성을 이용하여 정원 가꾸기 게임 https://cssgridgarden.com/#ko 2023. 4. 11. 이전 1 2 3 4 다음 728x90 반응형
