Home IT/WEB 부모 요소의 border-radius가 자식 요소의 background-color로 가려지지 않도록 설정할 수 있는 방법

[css]부모 요소의 border-radius가 자식 요소의 background-color로 가려지지 않도록 설정할 수 있는 방법

overflow: hidden 속성 사용

부모 요소의 border-radius를 자식 요소의 background-color로 가려지지 않도록 설정해야 합니다. 이를 위해 부모 요소에 overflow: hidden; 속성을 추가하여 자식 요소의 배경이 부모 요소의 경계를 벗어나지 못하도록 만들 수 있습니다.

inline ad
.parent-div {
  border: 1px solid #A8C6DF;
  border-radius: 10px;
  overflow: hidden; /* 자식 요소의 배경을 가립니다 */
}

.child-div {
  background-color: #E0E0E0; /* 자식 요소의 배경색을 설정합니다 */
}

자식 요소에도 border-radius 적용

부모 요소의 border-radius 값을 자식 요소에도 동일하게 적용하여, 자식 요소의 모서리가 부모 요소의 모서리와 일치하도록 만들 수 있습니다. 자식 요소가 부모 요소의 전체 크기를 차지하는 경우 유용합니다.

CSS clip-path 사용

더 복잡한 모양이나 특정 영역에서만 자식 요소의 background-color를 가리고 싶은 경우 clip-path 속성을 사용할 수 있습니다. 이 방법은 자식 요소의 배경을 부모 요소의 특정 형태에 맞춰 자를 때 유용합니다.

.child {
  clip-path: inset(0); /* 부모 요소의 border-radius에 맞춰 조정 가능 */
}

자식 요소에 background-clip 속성 사용

또 다른 접근 방법으로, 부모 요소에 border가 있고 자식 요소의 배경색이 이를 넘지 않게 하고 싶은 경우, 자식 요소에 background-clip: padding-box; 속성을 사용할 수 있습니다. 이 속성은 배경색이나 이미지가 border 영역을 넘어서지 않도록 합니다.

.child {
  background-clip: padding-box;
}

참고문서

RECENT POSTS

[javscript]API 응답에서 키 값들을 검증하는 방법

API 응답에서 다수의 키 값들을 검증할 때 코드의 중복을 줄이는 것은 유지보수성을 향상시키고, 가독성을 높이는 데 중요합니다. 이를 위해 몇 가지 접근 방법을 사용할...

[javscript]특정 키를 제외하고 두 객체를 비교하는 방법

특정 키를 제외하고 두 객체를 비교하는 작업은 데이터의 동등성을 평가하고 싶을 때 유용합니다. Lodash 라이브러리를 통해서 처리할 수 있는 방법에 대해서 살펴보겠습니다. Lodash를 사용한 특정...

[javscript]배열을 특정 키의 값에 따라 정렬하는 방법, _.orderBy

Lodash의 _.orderBy 메소드를 사용하면 배열을 특정 키의 값에 따라 정렬할 수 있습니다. 이 메소드는 배열의 각 항목을 정렬할 기준이 되는 하나 이상의 속성 이름과...

[css]autoprefixer: end value has mixed support, consider using flex-end instead warning 처리 및 다양한 에러 메시지 의미

이 경고 메시지는 CSS를 처리하는 도구인 Autoprefixer가 justify-content: end; 속성값을 처리하려 할 때 발생합니다. Autoprefixer는 CSS에 벤더 접두사를 자동으로 추가해 주는 도구로, 다양한 브라우저에서 CSS 속성이...