안녕하세요~
이번 글에서는 제가 후니블로그를 만들면서 겪었던 이슈와 어떻게 해결했는지를 공유하려고 합니다!
저의 메인페이지에서 post item들마다 타이틀이 있는데 이 타이틀이 적정 width를 벗어나면 ... 이 나오게하는
text-overflow: ellipsis 처리를 하려고 했습니다
저는 그냥 무난하게 title 박스에다가
typescriptoverflow: hidden; white-space: nowrap; text-overflow: ellipsis;
이 스타일언어를 추가하면 될 줄 알았습니다! 하지만 white-space: nowrap css 가 먹질 않고 그냥 쭉 넘어가버리는 이슈가 발생하는거였습니다! ㅠㅠ ( 당황 )
CSS 명시도 점수 체계를 이해하고 !important 남용 없이 스타일 충돌을 해결하는 전략을 정리합니다.
2022. 9. 10.FrontendCSS 속성 선택자에서 =, *=, $=, ^= 구문을 사용해 요소를 더 유연하게 선택하는 방법을 정리합니다.
2022. 9. 10.Frontend순서 기준으로 자식 요소를 선택하는 CSS 가상 클래스 nth-of-type와 nth-child의 차이를 예시로 비교합니다.
2022. 9. 10.도대체 왜 그런지 찾아보다가 단순히 부모 box에 grid-template-columns 를 사용할때 1fr를 넣으면 white-space: nowrap 을 적용했을때 width가 완벽하게 고정되어있지 않아 nowrap이 먹히지 않는다는 것을 알았습니다!
typescriptgrid-template-columns: repeat(3,1fr)
해결 방법은 간단합니다 minmax 0을 추가해주면 됩니다.
typescriptgrid-template-columns: repeat(3,minmax(0, 1fr));
그러면 잘 적용되는 모습을 확인 할 수 있습니다.
감사합니다!