카드 전체에 border-radius를 줬는데 이미지 윗부분에는 적용이 안되는 것이다.
그렇다고 img에도 border-radius를 주기에는 너무 이미지 아랫부분이 어색하다.
방법 1
border-radius는 아래와 같이 세부적으로 더 나눌 수 있다.
- border-top-left-radius: 값;
- border-top-right-radius: 값;
- border-bottom-left-radius: 값;
- border-bottom-left-radius: 값;
위 방법으로 top-left와 top-right에 border-radius를 줬더니 원하는대로 됐다!
border-bottom-left-radius - CSS: Cascading Style Sheets | MDN
The border-bottom-left-radius CSS property rounds the bottom-left corner of an element by specifying the radius (or the radius of the semi-major and semi-minor axes) of the ellipse defining the curvature of the corner.
developer.mozilla.org
방법 2
이미 카드에는 border-radius를 준 상태이다. 근데 여기서 img에 또 radius를 주는 것이 아닌,
그 카드가 차지하는 범위 밖으로 넘어가는 부분을 가리게 하는 방법이 있다.
위에서 작성했던 img에 border-radius를 left와 right에 줬던 코드를 다 지우고
그냥 카드에 overflow: hidden 을 넣으면 위 사진처럼 내가 원하는대로 된다.
overflow - CSS: Cascading Style Sheets | MDN
The overflow CSS shorthand property sets the desired behavior for an element's overflow — i.e. when an element's content is too big to fit in its block formatting context — in both directions.
developer.mozilla.org
'HTML & CSS' 카테고리의 다른 글
| CSS - 넘치는 글 scroll로 만들고 커스텀하기 > overflow (+ scroll 숨기기) (0) | 2022.02.18 |
|---|---|
| CSS - body의 height가 이상해요!(+ footer 하단 고정 안됨) (0) | 2022.01.23 |
| 웹 프론트(4) - HTML tag(1) (0) | 2022.01.09 |
| 웹 프론트(3) - HTML 구조 (0) | 2022.01.08 |
| 웹 프론트(2) - 웹사이트를 구조화하는 연습을 하자 (0) | 2022.01.06 |