text-overflow(글자 넘치면 사용), filter(이미지 어둡게 만들기)

text-overflow

text-overflow는 글을 썼는데 줄이 넘치면 생략해주는 속성이다.

 

-적용하기 위한 조건

1. 고정된 width 혹은 height가 있어야 한다.

2. overflow:hidden; 속성을 사용해서 영역을 감춰야 한다.

3. 아래줄로 내려가는 것을 막기 위해 white-space: nowrap 같은 속성을 줘야 한다.

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 80px;

이런식으로 사용 가능하다.

 

이미지 어둡게 만들기

  filter: brightness(60%);

위 사진처럼 이미지를 어둡게 하기 위해서는 filter를 사용하면된다.