[Vue.js] 영화 검색 사이트 예제 - 17. 영화 아이템_텍스트 말줄임 표시와 배경 흐림 처리, 강조 효과

말줄임 표시

다음과 같은 예제가 있다

width를 설정하게 되면 이런식으로 크기가 줄어들면서 줄바꿈 처리가 된다.

여기서 white-space: nowrap; 속성을 추가하면 다음과 같이 오버플로우 현상이 일어난다.

(CSS white-space 속성은 요소가 공백 문자를 처리하는 법을 지정한다.)

참조) white-space - CSS: Cascading Style Sheets | MDN (mozilla.org)

white-space - CSS: Cascading Style Sheets | MDN

다음의 속성들을 추가하면, 오버플로우 된 부분을 ...으로 대체할 수 있다.

 

이처럼 ...을 만드는 속성은 다음의 속성 조합이 필요하다. (실제로 자주 사용됨)

white-space: nowrap;
overflow: hidden;
text-overflow: elipsis;

 

blur 처리

다음과 같은 예제가 있다.

::after : 가상 요소 생성 선택자

box-sizing: 부모 요소에 크기를 맞춘다.

 

여기서 backdrop-filter에 px단위로 숫자를 넣으면 블러효과가 나온다.

숫자에 따라 blur 효과의 강도가 변하는 모습.

 

grayscale() 을 넣으면 회색으로 변한다.

 

한 가지 단점으로는 크롬과 엣지에서는 동작하나 firefox에서는 지원되지 않는다.

 

적용

여기서 hovering시 노란색으로 강조하는 효과를 넣을 것이다.

완성