Front-end/CSS(3)
-
pre 태그에서 컨텐츠 크기보다 튀어나왔을 때 조정하는 법
pre { width: 100%; white-space: pre-wrap; word-wrap: break-word; } white-space 관해서 참고 블로그 : aboooks.tistory.com/187 white-space 속성(pre, pre-wrap, pre-line 차이) white-space 속성(pre, pre-wrap, pre-line 차이) 오늘은 요소 안에 공백 처리를 어떻게 할지 지정하는 속성입니다. white space란 여백이라고도 하는데 html에서는 공백, 공란으로 이해하면 됩니다. ▶태그 aboooks.tistory.com
2021.04.05 -
CSS 3줄 이상일 때 더보기/간략히 버튼 보이게 하기(ellipsis)
.video__description p.video__description__text=video.description .description_moreDetails 더보기 .video__description { font-size: 14px; line-height: 25px; padding-bottom: 50px; padding-left: 60px; border-bottom: 1px solid #e0e0e0; } p.video__description__text.abstracted { height: 75px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: verti..
2021.04.02 -
Safari에서 버튼 그라데이션/테두리곡선 고치는법
개발할 때 크롬으로 테스트해보면서 만든 후 배포한 다음에 사파리에서 테스트를 해보니 버튼이 그라데이션과 테두리곡선이 적용된 것을 볼 수 있었다. 내가 원하는 디자인으로 보이지 않아서 방법을 찾아보았다. 사파리에서는 기본적으로 버튼에 그라데이션과 테두리 곡선이 들어가있다고 한다. 이는 간단하게 이 코드를 통해 해결할 수 있다. 또한 내가 input에 text-shadow 넣은 것도 적용되지 않았었는데 그 문제도 이 코드를 통해 해결될 수 있었다. input, textarea, button{ -webkit-appearance: none; } 해결 전 해결 후
2021.04.01