이미지에 CSS로 필터를 씌우자.

ⓒskitterphoto, pixabay.com

때로는 나의 무한 반복 업무가 code 한 줄이면 해결될 때가 있다. 이번에는 CSS를 이용하여 나의 반복업무를 줄일 수 있어서 기록으로 남겨 놓는다. 이번에 시도한 내용은 이미지 흑백 필터 넣기 이다.

CSS 수정 전

글은 쓰는 순간 과거의 기록이 된다. 새로이 배운 지식이어도 모든 내용은 과거이다. 그렇기 때문에 홈페이지를 조금 칙칙하더라도 흑백 테마로 운영하려고 하는데, 매번 '대표 이미지'를 흑백으로 만들어주자니 너무 성가셨다. CSS로 모든 이미지에 흑백 필터를 씌우기로 하였다.

CSS 수정 후

.thum img {
	filter:grayscale(100%); /*썸네일 흑백 필터*/
}

 

filter:grayscale(100%) 와 같이 CSS에 추가하면 된다. 매우 간단한 일이다. 좌우에 있는 이미지들은 실제 대표이미지들에 흑백 필터를 씌워서 다시 업로드 한 사진인 반면, 가운데 Subscribe는 CSS를 통해서 흑백 필터를 씌웠다. 큰 차이는 없다.

 

img {
        width: 200px;
        height: 200px;
        
        /* 
        filter : 이미지에 필터효과를 적용한다
            blur(px) : 이미지를 흐리게 한다
            brightness(%) : 이미지의 밝기를 변경한다
            contrast(%) : 이미지의 대비를 변경한다
            drop-shadow(x-offset y-offset blur color) : 이미지에 그림자를 추가한다
            grayscale(%) : 이미지에  흑백효과를 적용한다
            hue-rotate(deg) : 이미지에 색상환의 각도를 지정
            invert(%) : 이미지 반전
            opacity(%) : 이미지에 투명도 적용
         */    
         -webkit-filter: blur(5px);
        filter: blur(5px);
    }
    </style>


출처: https://ghj1001020.tistory.com/680 [혁준 블로그]

모든 CSS 로그는 아래링크에 보관한다.

티스토리 블로그 운영기 : CSS - 수정