CSS3 단어가 짧을 때 양쪽 정렬(text-align: justify) 방법 [only css] 글의 길이가 길지 않을 때 justify 속성이 잘 먹지 않는데, 해당 요소에 width 값과 text-align: justify를 주고, 가상요소인 :after가 핵심인데, display: inline-block 및 width: 100%를 주면 justify 속성을 적용할 수 있다. 아래 코드를 참고해보자. 코드 이 름 휴 대 전 화 이 메 일 ※ 주의: 강제로 준 width보다 글자의 길이가 큰 경우를 깨질 수 있음~ ※ 수동으로 길이를 맞춰야하다 보니 2023. 4. 11. [css] 말줄임 여러 줄 예시 여러 줄 말줄임을 사용할 경우 한 줄 말줄임에서 사용하는 "display" 속성 변경 및 "white-space: nowrap"을 삭제하고, "-webkit-line-clamp"와 "-webkit-box-orient"를 사용하면 된다. 예시 코드 /* 한 줄 말줄임 */ .single-line-ellipsis{ display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 여러 줄 말줄임 */ .multi-line-ellipsis{ display: -webkit-box; overflow: hidden; max-height: 3em; line-height: 1.5; text-overflow: ellipsis; -web.. 2023. 2. 14. css3 카드 뒤집기 효과 (backface-visibility: hidden;) 카드를 뒤집는 효과를 줄 때 기억해야 할 css는 1. 카드 앞뒷면에 적용해야 할 "backface-visibility: hidden;" 2. 카드를 3d 적용을 위해 카드 앞뒷면의 부모에게 적용해야 할 "transform: preserve-3d;"가 있다. 속성 설명 transform: preserve-3d; 자식 요소들에게 3d 적용 속성 (부모에게 적용) backface-visibility: hidden; 요소를 180도로 돌렸을 때 뒷면 숨김처리 아래 예시 짤과 예시 코드를 참고~ 코드 ... 2023. 1. 31. 이전1 1 다음 728x90 반응형
