TIL) overflow-clip-margin 속성으로 정밀한 클리핑 제어하기

 

 

2중 border를 사용하는데 각도가 맞지 않아서 이리저리 찾아보다가 발견하게 된 CSS 입니다. 

 

overflow-clip-margin

 

overflow-clip-margin = overflow 속성 값이 clip인 경우에만 동작하며, 바깥쪽 범위를 지정합니다. 

 

👀 눈으로 알아보기

 

기본 HTML

<div class="container">
	<div class="content">
		이 내용은 컨테이너를 넘어서지만, 클리핑 마진 덕분에 여유 공간이 있습니다.
	</div>
</div>

 

.container {
	width: 300px;
	height: 200px;
	border: 2px solid #000;
}

.content {
	width: 350px;
	height: 250px;
	background-color: lightblue;
}

 

를 적용하지 않았다면,

 

.content의 너비인 350px로 넘어가버립니다. 

 

---

 

overflow-clip-margin을 설정한다면, 딱 30px이 넘어갑니다. 

overflow: clip;
overflow-clip-margin: 30px; /* 클리핑 영역을 30px 확장 */

 

---

 

length가 아닌 visusal-box 값으로도 제어가 가능합니다. 

<visual-box> = content-box  |  padding-box  |  border-box

 

 

TIP) 둘 다 써야한다면,

overflow-clip-margin: 15px;
overflow-clip-margin-box: border-box;

 

---

 

overflow-clip-margin을 content-box로 설정한다면, .container 요소는 content-box를 기준으로 클리핑됩니다. 따라서 content 요소의 내용이 content 영역을 벗어나면 잘리게 됩니다.

 

overflow: clip;
overflow-clip-margin: content-box;

 

 

 

---

 

overflow-clip-margin을 padding-box로 설정한다면, .container 요소는 padding-box를 기준으로 클리핑됩니다. 패딩을 포함한 영역을 벗어난 content 요소의 내용이 잘리게 됩니다.

 

.container {
            width: 300px;
            height: 200px;
            border: 2px solid #000;
            padding: 10px;
            overflow: clip;
            overflow-clip-margin: padding-box;
}

overflow-clip-margin: padding-box;

 

overflow-clip-margin: content-box;

 

overflow-clip-margin: border-box;

 

위 사진처럼 overflow-clip-margin을 border-box로 설정한다면, .container 요소는 border-box를 기준으로 클리핑됩니다. 보더를 포함한 영역을 벗어난 content 요소의 내용이 잘리게 됩니다.

 

• border-box는 요소의 보더(border) 영역을 기준으로 클리핑이 이루어집니다. 패딩과 콘텐츠 영역을 모두 포함합니다.

 

 

---

ChatGPT에게 물어보니, 아래 상황에서 유용하게 사용할 수 있다고 하네요!

 

1. 정밀한 클리핑 제어

• 요소의 내용이 경계에 맞닿을 때: 특정 요소의 내용이 부모 요소의 경계에 매우 근접하거나 맞닿을 때, 시각적으로 더 부드러운 효과를 주기 위해 사용합니다. 클리핑 마진을 추가하여 내용이 완전히 잘리지 않도록 할 수 있습니다.

2. 시각적 여백 추가

• 여백을 통해 시각적 균형을 맞추고 싶을 때: 텍스트나 이미지 같은 콘텐츠가 요소의 경계와 너무 가까울 때, 약간의 여백을 주어 시각적으로 균형을 맞출 수 있습니다. 특히 디자인적으로 여유 공간이 필요할 때 유용합니다.

3. 복잡한 레이아웃에서의 사용

• UI 구성 요소가 복잡한 레이아웃에 있을 때: 다양한 구성 요소가 얽혀 있는 복잡한 레이아웃에서 각 요소의 클리핑을 세밀하게 조정해야 할 때 사용합니다. 이로 인해 레이아웃이 더 깔끔하고 보기 좋게 정돈될 수 있습니다.

4. 애니메이션 및 인터랙티브 요소

• 애니메이션이나 동적 콘텐츠를 다룰 때: 애니메이션이 적용된 요소나 사용자와의 상호작용이 많은 동적 콘텐츠의 경우, 클리핑 영역을 적절히 설정하여 부드러운 동작을 보장할 수 있습니다.

 

 

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓