CSS tips and tricks developer should know

frontend 개발자로서 가장 많이 하는 작업중 하나는 바로 styling 작업일 것이다. (내가 제일 재밌어하는 작업중에 하나이다)
styling시 css를 이용하여 구현을 하게되는데 css도 많은 문법과 tip을 가지고 있다. 이 포스트에서는 몇가지 유용한 tip들을 소개해보려 한다!

text-indent

문단에서 첫번째 줄만 indentation(들여쓰기)을 하고싶을때 사용할 수 있다.

shape-outside

float element 주위로 어떤 형태로 content를 보이도록 할지 설정할 수 있다. 여러가지 property가 있으며 공식사이트에서 확인할 수 있다.

drop-shadow

이미지의 윤곽선대로 그림자를 주고 싶을때 css filter의 drop-shadow를 사용할 수 있다. 비슷한 그림자 효과로 box-shadow가 있지만 이는 말 그대로 box형태 전체에 그림자를 주는 방식이다.

mix-blend-mode

여러개 element에 대해 blend mode를 설정할 수 있다. 여러가지 property를 사용할 수 있으며, 공식사이트에서 확인할 수 있다. 아래 예시는 overlay를 사용한 모습이다.

filters

CSS를 이용해 image에 다양한 효과를 넣을 수 있다. 공식사이트에서 추가적인 filter를 확인할 수 있다.