# 페이스북 새 디자인의 CSS에서 알게된 것들

> Clean Markdown view of GeekNews topic #1819. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=1819](https://news.hada.io/topic?id=1819)
- GeekNews Markdown: [https://news.hada.io/topic/1819.md](https://news.hada.io/topic/1819.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2020-04-03T10:58:39+09:00
- Updated: 2020-04-03T10:58:39+09:00
- Original source: [ishadeed.com](https://ishadeed.com/article/new-facebook-css/)
- Points: 4
- Comments: 4

## Topic Body

- 안쪽 그림자 처리위해 Avatar에 SVG 사용

- Margin대신 스페이서 div

- 이미지에 CSS필터

- box-shadow 대신 그림자 이미지(2x14 px)

- 많은 CSS 변수 사용

- 멀티라인 줄수 제한을 위해 Line Clamp 사용

- :hover 대신 .hover-div 사용

- 주요색으로 동적인 그라디언트 배경생성

- 다중 박스 쉐도우

## Comments



### Comment 1506

- Author: sduck4
- Created: 2020-04-03T11:37:21+09:00
- Points: 2

요새 디자인쪽도 공부 많이 하시나봐요. GeekNews 디자인이 점점 개선되내요.

오늘은 폰트가 바뀐 것 같아요.

### Comment 1507

- Author: xguru
- Created: 2020-04-03T11:40:21+09:00
- Points: 1
- Parent comment: 1506
- Depth: 1

공부까지는 아니지만.. ㅎㅎ

웹폰트는 가능하면 안쓸려고 하다가 윈도우 환경에서 한글폰트가 넘 안이뻐서 끝내 굴복하고 Noto Sans 로 갈아탔습니다.

### Comment 1504

- Author: xguru
- Created: 2020-04-03T10:58:45+09:00
- Points: 1

왜 이렇게 했을까 싶은 것도 있지만, 이것 저것 참고하기 좋네요.

Line Clamp 는 함 적용해봐야 할 듯.

### Comment 1505

- Author: xguru
- Created: 2020-04-03T11:23:10+09:00
- Points: 2
- Parent comment: 1504
- Depth: 1

이미지 처리를 위해서 특정 줄수만 보여야 할게 있었는데 Line Clamp 딱이네요. 맘에 듭니다.

그냥은 동작 안하고 overflow: hidden 이랑 붙어야 합니다.

  display: -webkit-box;

  -webkit-line-clamp: 3;

  overflow: hidden;