FrontEnd/HTML, CSS (3) 썸네일형 리스트형 flex, grid에서 자식요소에 스크롤이 안 먹힐 때는 min-height:0 문제 원인부모 높이는 자식 요소의 크기에 따라 결정된다. (∵ min-height : auto) 만약 자식 요소(item)가 overflow : auto 또는 overflow : scroll이 설정되어 있어 스크롤이 필요하지만, 부모 요소가 자식 요소의 크기에 맞춰 확장된다면 스크롤이 발생하지 않는다. (아래 사진 참고) 이때 부모 요소에 min-height: 0 을 설정하면,부모 요소는 자식 크기에 맞춰 확장되지 않고, 부모는 원래 높이를 유지하며 넘치는 자식 요소에 대해 스크롤이 생기게 된다. flex-basis:0 으로는 안되나?flex-basis는 flex item의 기본 크기를 설정하는 속성이다 .만약 direction이 width이면 가로 너비를, column이면 세로 높이를 기준으로 설정된.. 특정 요소 top, translateY로 부모 요소 중앙 정렬하기 1. top: 50%; - 요소를 부모 요소를 기준으로 50% 아래로 이동시킵니다. 즉, 요소의 상단이 부모 요소의 중간에 위치하게 됩니다. (이때 요소의 높이를 고려하지 않아 중앙 정렬이 되지 않습니다) 2. transform: translateY(-50%); - 요소를 현재 위치에서 자신의 높이의 50%만큼 위로 이동합니다. => 요소의 상단이 부모 요소의 중간에 위치하고, 그 위치에서 요소가 자신의 높이의 절반만큼 위로 이동하게 되어 요소의 중간이 부모 요소의 중간에 위치하게 됩니다 예를 들어, 요소의 높이가 50px이고 부모 요소의 높이가 100px이면1. top: 50%;를 적용하면, 요소의 상단이 부모 요소의 상단에서 50px (100px의 50%) 아래로 이동하고,2. transform: .. 넘치는 텍스트 줄이기(말 줄임표) 문제카드를 여러개 만들면서 따로 설정을 하지 않아서 긴 content의 길이에 맞춰 높이가 결정되고,그 card를 기준으로 다음 카드의 높이가 결정된다 그래서 카드가 같은 높이를 가지고, 카드를 벗어나는 글들은 ... (줄임) 표시를 하도록 수정하려한다text-overflow면 해결될 줄 알았는데 안됨! ㅠ아래는 위 화면의 html, css이다 Dune 설명글....movieContent { overflow: hidden; text-overflow: ellipsis; // 작동 안함 🥲} 말 줄임표 사용 방법을 2가지 찾았다1. text-overflow: ellipsis텍스트가 요소의 너비를 초과할 때 말 줄임표(...)를 사용한다 text-overflow: ellipsi.. 이전 1 다음
