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를 확인할 수 있다.