border-radius 대신 부모 요소에서 overflow로 처리하는 방법

Question

강사님 안녕하세요. 6:07 부분 질문 드립니다. 저는 카드 이미지의 모서리를 둥글게 만들기 위해서 .class-image의 border-radius가 아니라, .class-card를 overflow: hidden으로 처리해서 튀어나온 모서리 부분을 처리했습니다. 그런데 이 상태로 카드를 여러 개 추가하면 카드들이 ul안에 최대한 들어가는 형태로 변형되고, 카드들이 반응형처럼 줄어들어버려서 overflow: hidden을 제거 했더니 카드들이 고정된 크기로 남아 있었습니다. 카드 사이즈는 반응형으로 만들어지지 않아야하기 때문에 overflow 프로퍼티를 지울 수 밖에 없었는데, 왜 overflow를 사용하면 ul안의 모든 li 요소를 ul안에 보여주는 방식으로 적용되는지 궁금합니다! 혹시 li에 overflow: hidden을 적용하면 발생하는 특성일까요?

잔재미코딩 DaveLee · Answer

안녕하세요. 솔직히 세번정도 읽어보았는데, 정확히 이야기하는 바를 제가 이해한 것인지 조금 걱정이 되네요. overflow 를 hidden 으로 설정하면, 넘치는 부분은 잘려서 보여지지 않습니다. 그래서 class-card 자체를 overflow 를 hidden 으로 설정하면, class-card 로 표현되는 이미지? 의 본래 사이즈가 ul 안에 li 가 다 들어가는 것이 기본 설정이니까, 그만큼 각각이 본래 사이즈보다, 작아지게 되지 않을까 해요. 그런데, 각 class-card 를 overflow:hidden 으로 설정한 부분 때문에, 그 본래 사이즈만큼은 overflow:hidden 으로 짤리는 상황이 나오지 않을까 해서요. 제가 이해한 부분이 맞는지는 저도 테스트를 해봐야 겠긴 한데, 위와 같은 상황이 기본적인 이슈가 될 수 있다고 생각합니다. 감사합니다.