CSS (6) 썸네일형 리스트형 text-overflow text-overflow는 white-space가 nowrap, overflow가 hidden인 상황에서 쓸 수 있다. text-overflow: clip는 콘텐츠가 경계선을 넘으면 잘라서 보여준다. text-overflow: ellipsis는 콘텐츠가 경계선을 넘으면 "..."으로 처리한다. text-overflow - CSS: Cascading Style Sheets | MDN The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis ('…'), or display a custom string. developer.mozilla.org overflow overflow: visible은 경계선 밖으로 글자가 나올 수 있다. 컨텐츠를 밖으로 밀어내는 한이 있더라도 끝까지 보여준다. overflow: hidden은 경계선 밖으로 글자가 나오지 않는다. 컨텐츠가 잘릴 수 있다. overflow: scroll은 스크롤이 생겨서 컨텐츠를 끝까지 볼 수 있다. overflow-x, overflow-y로 둘 중 하나만 스크롤으로 보여줄 수 있다. overflow: auto는 컨텐츠가 경계선을 넘지 못하면 스크롤이 없고, 경계선을 넘으면 스크롤이 생긴다. white-space white-space: normal은 줄바꿈을 하는 기본 값이다. 연속된 띄어쓰기, 들여쓰기, 줄바꿈 문자는 무시된다. white-space: nowrap은 줄바꿈하지 않고 한줄로 나타낸다. white-space: pre는 입력한 그대로의 값을 넣을 수 있다. 연속된 띄어쓰기나 사용자의 줄바꿈이 적용된다. white-space: pre-wrap은 pre처럼 작동하면서도 긴 텍스트는 자동으로 줄바꿈한다. CSS의 white-space 속성 사용법 Engineering Blog by Dale Seo www.daleseo.com Object-fit object-fit: cover은 빈 곳 없이 꽉 차있게 한다. 이미지가 잘려 보일 수 있다. object-fit: contain은 이미지의 비율을 유지하므로 꽉 차있지 않을 수 있다. object-fit: none은 이미지의 본래 크기만큼 보여준다. object-fit: scale-down은 이미지가 영역보다 작으면 none처럼, 크면 contain처럼 작용한다. CSS의 object-fit 속성으로 이미지를 왜곡없이 보여주기 Engineering Blog by Dale Seo www.daleseo.com Styled-Components: 조건부 스타일링 Styled-Components의 props로 조건부 스타일링 flex: 1 flex: 1; => flex-grow:1 flex-shrink:1 slex-basis: 0% 화면 비율에 따라 유연하게 늘어나거나 줄어들 수 있다. div에 가로로 글을 쓸 때 css로 넣어주면 세로로 쭉 늘어날 수 있게 한다. 이전 1 다음
