728x90 반응형 CSS127 다양한 css 애니메이션/레이아웃 참고 사이트 https://freefrontend.com/css-code-examples 2022. 8. 23. 글자 영역 밖으로 벗어나면 자르기 글자가 영역밖으로 벗어났을 때 자르는 방법 특정 줄수 맞추기 원하는 줄수 넘어가면 자르기 1줄로 자르기 -webkit-line-clamp: 1; 2줄로 자르기 -webkit-line-clamp: 2; 3줄로 자르기 -webkit-line-clamp: 3; css 를 확인하세요! See the Pen Untitled by gahyun (@gahyun) on CodePen. [CSS/CSS 기초] - [CSS]글자가 영역밖으로 넘어갔을 때 text-overflow [CSS/CSS 기초] - [CSS3] 문장의 공백과 줄바꿈을 처리하는 white-space (자동 줄바꿈 방지) 2022. 8. 23. 로딩 skeleton loading See the Pen Untitled by gahyun (@gahyun) on CodePen. 2022. 8. 22. 이미지 비율 맞추기 .img-box::after 또는 ::before를 통해 width:100%; padding-bottom:100%; 또는 padding-top:100%; 로 가로세로 높이를 1:1로 맞춘다 이미지는 absolute를 통해 top:0;left:0;에 위치시킨다 (::after 또는 ::before의 패딩과 겹쳐지도록) .img-box의 width - height 를 100%로 크기를 꽉채운다 See the Pen Untitled by gahyun (@gahyun) on CodePen. object-fit 을 모른다면 [CSS/CSS 기초] - [CSS]Object-fit 이미지나 비디오 크기에 맞춰 자르는 방법 2022. 8. 22. 이전 1 2 3 4 5 6 ··· 32 다음 728x90 반응형