Inflearn Community Q&A
asked
border-radius 대신 부모 요소에서 overflow로 처리하는 방법
Resolved
Written on
·
790
0
강사님 안녕하세요. 6:07 부분 질문 드립니다. 저는 카드 이미지의 모서리를 둥글게 만들기 위해서 .class-image의 border-radius가 아니라, .class-card를 overflow: hidden으로 처리해서 튀어나온 모서리 부분을 처리했습니다. 그런데 이 상태로 카드를 여러 개 추가하면 카드들이 ul안에 최대한 들어가는 형태로 변형되고, 카드들이 반응형처럼 줄어들어버려서 overflow: hidden을 제거 했더니 카드들이 고정된 크기로 남아 있었습니다. 카드 사이즈는 반응형으로 만들어지지 않아야하기 때문에 overflow 프로퍼티를 지울 수 밖에 없었는데, 왜 overflow를 사용하면 ul안의 모든 li 요소를 ul안에 보여주는 방식으로 적용되는지 궁금합니다! 혹시 li에 overflow: hidden을 적용하면 발생하는 특성일까요?
Answer 1
0
안녕하세요.
솔직히 세번정도 읽어보았는데, 정확히 이야기하는 바를 제가 이해한 것인지 조금 걱정이 되네요.
overflow 를 hidden 으로 설정하면, 넘치는 부분은 잘려서 보여지지 않습니다.
그래서 class-card 자체를 overflow 를 hidden 으로 설정하면, class-card 로 표현되는 이미지? 의 본래 사이즈가 ul 안에 li 가 다 들어가는 것이 기본 설정이니까, 그만큼 각각이 본래 사이즈보다, 작아지게 되지 않을까 해요. 그런데, 각 class-card 를 overflow:hidden 으로 설정한 부분 때문에, 그 본래 사이즈만큼은 overflow:hidden 으로 짤리는 상황이 나오지 않을까 해서요. 제가 이해한 부분이 맞는지는 저도 테스트를 해봐야 겠긴 한데, 위와 같은 상황이 기본적인 이슈가 될 수 있다고 생각합니다.
감사합니다.
아아 화면을 캡쳐해놨어야 했는데 글로 설명하다보니 너무 복잡하게 말씀드린 것 같습니다. 그런데 문제가 발생한 설정대로 다시 테스트해보니, 해당 문제가 발생하지 않아서 정확한 원인을 찾지 못하고 있습니다. 말씀해주신 부분 참고해서 혼자 복습 할 때 해당 부분 다시 확인해봐야겠습니다. 감사합니다!!!