CSS에서 border-radius와 overflow: hidden 사용법
CSS에서 border-radius 속성은 요소의 모서리를 둥글게 만듭니다. 하지만 콘텐츠가 요소의 경계를 벗어나면 둥근 모서리가 제대로 적용되지 않을 수 있습니다. 이 문제를 해결하기 위해 overflow: hidden 속성을 함께 사용해야 합니다.
border-radius의 기본 사용법
border-radius 속성은 요소의 모서리를 둥글게 만듭니다. 예를 들어, 다음과 같은 코드로 사각형을 둥근 모서리로 만들 수 있습니다.
.box {
width: 300px;
height: 200px;
border-radius: 20px;
background-color: lightblue;
}문제 발생
하지만 요소 내의 콘텐츠가 요소의 경계를 넘어가면 둥근 모서리가 제대로 표시되지 않습니다. 특히, 이미지나 다른 블록 요소가 포함된 경우 문제가 더욱 두드러집니다.
<div class="box">
<img src="example.jpg" alt="Example Image">
</div>.box {
width: 300px;
height: 200px;
border-radius: 20px;
background-color: lightblue;
}위와 같은 경우, 이미지가 둥근 모서리를 넘어가게 되면 둥근 모서리가 적용되지 않습니다.
overflow: hidden의 필요성
이 문제를 해결하기 위해 overflow: hidden 속성을 추가합니다. 이 속성은 요소의 경계를 벗어나는 콘텐츠를 잘라내어 경계 안에만 콘텐츠가 표시되도록 합니다.
.box {
width: 300px;
height: 200px;
border-radius: 20px;
background-color: lightblue;
overflow: hidden; /* 경계를 벗어나는 콘텐츠를 숨김 */
}이렇게 하면 이미지나 다른 콘텐츠가 요소의 경계를 넘지 않도록 하여, 둥근 모서리가 제대로 적용됩니다.
전체 예시
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>border-radius와 overflow: hidden</title>
<style>
.box {
width: 300px;
height: 200px;
border-radius: 20px;
background-color: lightblue;
overflow: hidden; /* 경계를 벗어나는 콘텐츠를 숨김 */
}
.box img {
width: 100%; /* 이미지가 상자 크기에 맞게 조정 */
height: auto;
}
</style>
</head>
<body>
<div class="box">
<img src="example.jpg" alt="Example Image">
</div>
</body>
</html>위와 같이 하면 border-radius와 overflow: hidden을 함께 사용하여 깔끔하고 일관된 둥근 모서리 효과를 얻을 수 있습니다. 이를 통해 웹 페이지의 디자인을 더욱 세련되게 만들 수 있습니다.
1인개발자가 되겠다