TIL : CSS Filter

Today, What I learned?

본격적으로 미니 프로젝트를 시작하면서 마크업과 CSS 작업을 먼저 진행했다.

메인 페이지를 작업하다가 새롭게 알게 된 CSS Filter에 대해서 정리해본다.

 

 

CSS Filter

아래처럼 이미지에 마우스 hover시에 이미지가 어두워지며 이름이 보이는 부분을 짜다가 Filter라는 새로운 CSS 속성을 알게 되었다.

귀여운 미니니(요즘 꽂힘)들을 임시 이미지로 넣었다

 

filter는 말 그대로 사진에 적용하는 필터 효과들과 비슷한 역할을 한다.

흐림 효과나 색상 등의 그래픽 효과를 요소에 적용할 수 있고, svg 필터도 적용이 가능하다.

 

Filter 속성 내부 함수들

filter 속성 내부의 함수들은 대표적으로 이런 것들이 있다.

filter: blur(5px); // 흐림 효과
filter: brightness(0.4); // 밝기 
filter: contrast(200%); // 대비
filter: drop-shadow(16px 16px 20px blue); // 그림자
filter: grayscale(50%); // 흑백
filter: hue-rotate(90deg); // 색조 회전
filter: invert(75%); // 색 반전
filter: opacity(25%); // 불투명도 설정
filter: saturate(30%); // 채도 변경
filter: sepia(60%); // 세피아 변환

 

.team_list_item:hover > a > img{
  filter: brightness(0.5);
  transition: filter 300ms ease-in-out;
}

위의 코드는 첫번째 이미지에 적용된 코드. brightness가 적용되어 있다.

이 코드에 위 함수들 중 몇 가지만 적용해보았다.

 

 

1) hue-rotate  2)blur  3) invert (갑작스러운 호러행..) 4) saturate

왼쪽부터 시계방향대로 hue-rotate, blur, invert, saturate 순서다.

 

 

blur나 brightness 등 몇몇 효과들은 생각보다 유용하게 잘 쓰일 것 같다.

그럼 웹 브라우저 호환성은 어떤지 Can I use에서 찾아보았다.

 

Filter의 웹브라우저 호환성

can I use 에서 찾아본 filter

그렇게 좋다고 할 수는 없는 듯하다.. 일단 IE에서 지원이 아예 안된다. (물론 IE는 더 이상의 지원이 끊기긴 함)

 

좀 더 상세한 내용은 아래 mdn을 참고해보자! (어쩐 일인지 이미지 엑박이 많은 편)

https://developer.mozilla.org/ko/docs/Web/CSS/filter

filter - CSS: Cascading Style Sheets | MDN

 

 

 

 

미니 프로젝트 진행 현황

우선 개인 페이지를 대략적으로 마치고, 피그마로 메인 페이지 시안을 대략 짰다.

기능이 많지 않으니 겉보기에 있어 보이게!!! 가본다!!!..

메인 페이지 맡을게요! 하자마자 그려진 구상 바탕이긴 한데 우리 팀의 기능 중에 다크 모드가 있기 때문에 많은 요소를 넣지 않고 타이포그래피에 힘을 줬다.

((흰 도화지에 뭘 그리냐.. 막막하듯이 나는 특히나 글자가 없을수록.. 어렵다..))

피그마 작업 (다 끝난 상태긴 함)

 

 

팀원들의 피드백을 받아 완성된 시안은 이렇다.

우리 팀 메인페이지 + 다크모드

 

타이포에 힘을 줬기 때문에 군데군데 애니메이션이 들어갈 예정!

내일은 애니메이션을 넣고, 다크 모드를 적용하는 것을 우선적으로 진행해보려 한다.

개인 페이지도 조금 손봐야지 🤔